# Degradado cian: códigos nítidos y eléctricos

[Canonical HTML page](https://gradiently.design/es/guide/cyan-gradient)

El cian es el color de las pantallas, las piscinas y el hielo: limpio, luminoso y un poco futurista. También es mucho más claro de lo que parece, y eso cambia la forma de poner palabras encima.

## The short version

- Un degradado cian mezcla el color brillante a medio camino entre el verde y el azul con blanco, azul, lima, magenta o un azul marino profundo.
- El cian puro de pantalla es `#00ffff`, que CSS también llama aqua, y es más claro y luminoso que el verde azulado o el turquesa.
- El texto blanco sobre cian puro tiene un contraste de solo 1,3 a 1, así que el cian necesita letra oscura o un fondo mucho más profundo detrás de las palabras.
- El cian se ve más eléctrico sobre un fondo casi negro o azul marino, donde una pequeña cantidad parece brillar.
- El cian se funde limpiamente con el azul y la lima, porque ambos son sus vecinos en el círculo cromático.

Un **degradado cian** mezcla el color brillante a medio camino entre el verde y el azul con uno de sus vecinos: blanco para el hielo, azul para un aire tecnológico eléctrico, lima para la frescura, magenta para un toque cyber o un azul marino profundo donde el cian parece brillar. El cian puro de pantalla es `#00ffff`, y es mucho más claro de lo que casi todo el mundo espera, así que la habilidad principal es decidir dónde van las palabras. A continuación tienes códigos para copiar de cada estilo, con las cifras de contraste que importan.

## Cian, verde azulado y turquesa no son lo mismo

Estos tres se confunden constantemente, y la diferencia importa cuando pasas un encargo a un diseñador o eliges un código. CSS incluso tiene nombre para los tres, y son claramente distintos. El cian es el más luminoso y el más equilibrado entre verde y azul. El turquesa es más suave y algo más verde, como la piedra. El verde azulado es mucho más oscuro y sereno.

| Color | Nombre CSS y hex | Carácter |
| --- | --- | --- |
| Cian | `aqua` / `cyan`, `#00ffff` | El más luminoso, eléctrico, sintético |
| Cian eléctrico | `#00e5ff` | Cian con un poco más de azul, más agradable a la vista |
| Turquesa | `turquoise`, `#40e0d0` | Más suave y verde, tropical |
| Verde azulado | `teal`, `#008080` | Oscuro, sereno, adulto |

Cuatro vecinos. Si tu degradado tiene que transmitir calma y no luminosidad, probablemente buscas verde azulado, no cian.

Para los parientes más tranquilos, mira [degradado verde azulado](https://gradiently.design/es/guide/teal-gradient) y [degradado turquesa](https://gradiently.design/es/guide/turquoise-gradient). Este artículo se queda en el extremo luminoso.

- Hielo: #f0fdff
- Piscina clara: #a5f3fc
- Cian puro: #00ffff
- Cian eléctrico: #00e5ff
- Cian profundo: #0891b2
- Laguna: #0e7490
- Marino nocturno: #082f49
- Acento lima: #b6f73a

Una familia cian del hielo al azul marino, más la lima como compañera que lo mantiene fresco.

## Códigos de degradado cian hielo y piscina

El extremo claro del cian recuerda al agua fría y al aire limpio. Hielo es casi blanco con un toque de color; glaciar y piscina van más hondo, pasando por un cian brillante hasta un azul verdoso que admite texto blanco abajo. Encajan en ofertas de verano, cosmética con un relato refrescante, bebidas y todo lo que quiera transmitir frescor.

- Hielo: `linear-gradient(180deg, #f0fdff 0%, #b8f3ff 50%, #5fdcf5 100%)`
- Glaciar: `linear-gradient(160deg, #e0fbff 0%, #67e8f9 45%, #0891b2 100%)`
- Piscina: `linear-gradient(180deg, #a5f3fc 0%, #22d3ee 50%, #0e7490 100%)`

Cianes claros. Pon texto oscuro en la parte superior de cada uno; solo la parada más profunda, al pie de glaciar y piscina, admite blanco.

## Cian eléctrico sobre fondos oscuros

El cian se vuelve eléctrico cuando se apoya en la oscuridad. Una pequeña luz cian sobre un fondo casi negro o azul marino parece una pantalla, un láser o una visualización de datos, y por eso está en todas partes en software, videojuegos y ciencia. Mantén oscura la mayor parte del encuadre y deja que el cian ocupe una esquina o un borde. El **degradado cian azul** de esta serie es el más versátil de todos, luminoso en un extremo y azul intenso en el otro.

- Cian a azul eléctrico: `linear-gradient(135deg, #00e5ff 0%, #00a3ff 50%, #2563eb 100%)`
- Luz cian sobre negro: `radial-gradient(circle at 30% 30%, #00e5ff 0%, #0077a8 30%, #04202e 65%, #01070c 100%)`
- Noche de circuitos: `linear-gradient(160deg, #020617 0%, #082f49 50%, #06b6d4 100%)`

Fondos oscuros con luz cian. Noche de circuitos sube del negro al cian, perfecto para una cabecera con el titular en la mitad superior oscura.

Para esquemas completos basados en este estilo, [paletas de colores tecnológicas](https://gradiently.design/es/guide/tech-color-palettes) tiene varios, y [degradados neón](https://gradiently.design/es/guide/neon-gradients) lo lleva más hacia la noche.

## Cian con lima y con magenta

Del cian a la lima se pasa por el menta, y el resultado es deportivo, fresco y optimista. Cian con magenta es la pareja cyberpunk: dos de los tres primarios de impresión, ambos a todo volumen. Pásala por un centro añil oscuro y parecerá una calle de neón de noche en lugar de un juguete infantil. El artículo [degradado magenta](https://gradiently.design/es/guide/magenta-gradient) cubre el otro lado de esta pareja.

- Cian a lima: `linear-gradient(135deg, #00e5ff 0%, #34f5c5 50%, #b6f73a 100%)`
- Cyberpunk: `linear-gradient(135deg, #00e5ff 0%, #3b2aa8 50%, #ff2bd6 100%)`

Dos parejas atrevidas. Las dos son ruidosas, así que dales pocas palabras y mucho espacio.

## La trampa del contraste: palabras sobre cian

El cian es uno de los colores saturados más claros que puede mostrar una pantalla. El texto blanco sobre `#00ffff` puro tiene un contraste de solo 1,3 a 1, ilegible, mientras que el negro sobre el mismo cian llega a unos 16,7 a 1. El blanco empieza a funcionar cuando el cian se oscurece hasta alrededor de `#0e7490`, donde alcanza aproximadamente 5,4 a 1. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica las proporciones y los objetivos.

### Difícil de leer

- Texto blanco sobre cian brillante
- Texto cian sobre una página blanca
- Texto pequeño sobre el centro brillante de un degradado
- Texto azul pálido sobre hielo

### Fácil de leer

- Texto azul marino o casi negro sobre cian brillante
- Texto cian sobre una página azul marino o negra
- Texto pequeño solo sobre la parada más profunda
- Texto blanco sobre laguna #0e7490 o más oscuro

Este es el tipo de criterio que Gradiently aplica por ti. La tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark, y el Mark coloca su zona más tranquila y de mejor contraste detrás de las palabras, así que un fondo cian brillante nunca deja el texto blanco a la deriva.

## Un borde degradado cian en CSS

En interfaces oscuras, el cian funciona de maravilla como borde en lugar de relleno. Un borde degradado mantiene legible la tarjeta y añade el toque eléctrico. Este usa dos fondos, uno recortado al padding y otro al borde, así que conserva las esquinas redondeadas.

```css
.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(135deg, #00e5ff 0%, #2563eb 100%) border-box;
  color: #e6f9ff;
}
```

Una tarjeta oscura con un borde de cian a azul. Cambia el segundo degradado por cian a lima para un aire más fresco.

Tienes más técnicas, incluidos bordes animados, en [borde degradado CSS](https://gradiently.design/es/guide/css-gradient-border).

## Dónde encaja un degradado cian

El cian es una elección natural para lanzamientos de software, herramientas para desarrolladores, videojuegos, ropa de baño, bebidas y todo lo que quiera parecer rápido o frío. El día del lanzamiento, mantén un mismo estilo cian en la publicación del anuncio, la vista previa del enlace y el banner del registro de cambios para que la gente lo reconozca en cada feed. [Branding para startups SaaS](https://gradiently.design/es/guide/saas-startup-branding) muestra cómo construir toda una identidad en torno a un color luminoso como este.

Una publicación horizontal con fondo azul marino oscuro, una luz cian brillante en un borde y las palabras Despliegues en segundos en blanco

Una publicación de lanzamiento para X a 1600×900. Texto blanco en el lado oscuro, con la luz cian lejos de las palabras.

## FAQ

### ¿Cuál es el código hex del cian?

El cian puro de pantalla es #00ffff, también llamado aqua en CSS. Un cian eléctrico algo más azulado y cómodo de mirar es #00e5ff.

### ¿Qué diferencia hay entre cian y verde azulado?

El cian es luminoso y claro, a medio camino entre verde y azul. El verde azulado, #008080 en CSS, es un azul verdoso mucho más oscuro y sereno.

### ¿Qué color de texto funciona sobre un fondo cian?

Azul marino o casi negro sobre cian brillante. El blanco solo funciona sobre cianes profundos como #0e7490 o más oscuros.

### ¿Qué colores combinan con un degradado cian?

El azul y la lima se funden limpiamente porque son vecinos del cian. El magenta crea una pareja cyberpunk atrevida, y el azul marino o el negro hacen brillar el cian.