# Degradados azules: 20 paletas del hielo a la medianoche

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

El azul es el color más seguro del diseño, y por eso tantos degradados azules se parecen. Aquí van veinte que no, agrupados del más claro al más oscuro, con los códigos y el razonamiento detrás.

## The short version

- Un degradado azul mezcla tonos de azul, a menudo con un vecino como el verde azulado, el cian o el violeta, del hielo pálido al marino profundo.
- El azul se asocia mucho con la calma, la fiabilidad y la tecnología, lo que lo hace popular y fácil de confundir con el de todos los demás.
- El azul se mezcla limpiamente hacia el verde azulado, el cian, el índigo y el violeta, pero tiende a volverse gris cuando se mezcla directamente hacia el naranja o el amarillo.
- El texto blanco funciona sobre azules profundos y medios como #1e3a8a y #2563eb, pero falla sobre azules más claros como #3b82f6 para texto de cuerpo.
- Inclinar un degradado azul hacia el verde azulado o el violeta, hacerlo más profundo o más pálido y añadir un acento cálido son las formas más rápidas de escapar del aire corporativo.

Un **degradado azul** mezcla tonos de azul, a menudo con un vecino como el verde azulado, el cian o el violeta. Puede sentirse como un cielo despejado, un océano profundo, una pantalla de noche o el informe anual de un banco, según los azules que elijas y cómo los uses. A continuación hay veinte paletas de degradados azules con CSS para copiar, agrupadas de la más pálida a la más oscura, seguidas de los colores de texto que funcionan sobre ellas y de cómo evitar que el azul resulte soso.

## Degradados azules claros: hielo y cielo

Los degradados azules pálidos se sienten abiertos, limpios y silenciosos. Van bien con la salud, los viajes, el bienestar y las páginas de producto que necesitan espacio. Usa tinta oscura encima y añade un toque de calidez o de lila para que no parezcan fríos y clínicos.

- 1. Hielo: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Cielo de mañana: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Bruma pervinca: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Glaciar: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Nube y rubor: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Cinco degradados azules claros. Los extremos cálidos o lila de 2, 3 y 5 evitan que resulten estériles.

## Degradados azules oceánicos y verde azulados

Inclinar el azul hacia el verde le da vida. Los degradados oceánicos se sienten frescos y naturales, y esquivan las asociaciones corporativas del azul puro. Van bien con las marcas de viajes, comida, sostenibilidad y aire libre.

- 6. Mar abierto: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Inmersión profunda: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Laguna: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Puerto: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Aguas someras: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Azul hacia el verde azulado y el aguamarina. Los tonos vecinos mantienen limpia cada mezcla.

## Degradados azules brillantes y eléctricos

Los azules saturados son enérgicos y técnicos. Van bien con lanzamientos, apps, deporte y eventos. También son los azules más comunes de la web, así que son los que más se benefician de una forma inesperada o de un acento cálido.

- 11. De cobalto a cian: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. De ultramar a violeta: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Resplandor azul: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Cobalto con borde dorado: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Señal ascendente: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Azules vivos. El número 14 mantiene su acento cálido como un borde duro, así que el azul y el oro nunca se mezclan en gris.

## Degradados azul oscuro y de medianoche

Los degradados de azul marino profundo y de medianoche se sienten serios, premium y serenos. Son excelentes bases para la tipografía blanca y para los acentos brillantes. Ojo con el banding, que se nota con facilidad en los azules oscuros y lentos; un grano fino lo soluciona. Mira el [banding en degradados](https://gradiently.design/es/guide/gradient-banding).

- 16. Medianoche: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Noche de pizarra: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Resplandor del horizonte: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. De marino a índigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Anochecer sobre el agua: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Cinco azules oscuros. El último termina en un coral cálido, como la última luz sobre el mar.

## Qué degradado azul para qué trabajo

Veinte paletas son muchas para elegir. Parte del trabajo que el diseño tiene que hacer y de las palabras que tiene que llevar, y luego elige del grupo que corresponda.

| Trabajo | Prueba | Por qué |
| --- | --- | --- |
| Producto sereno o página de salud | 1, 3, 4 | Pálidos, abiertos, fáciles bajo texto oscuro |
| Viajes, comida, aire libre | 6, 8, 10 | El azul inclinado al verde se siente natural |
| Lanzamiento de app o evento tecnológico | 11, 13, 15 | Saturados e iluminados, transmiten energía |
| Premium o finanzas | 16, 17, 19 | Las bases profundas se sienten serias y aguantan la tipografía blanca |
| Algo memorable | 2, 14, 20 | Una nota cálida hace que el azul se sienta concreto |

Un punto de partida para cada tipo de diseño. Los números se refieren a las paletas de arriba.

## Qué señala el azul, y el problema de la sosería

En buena parte del mundo, el azul se asocia con la calma, la fiabilidad y la profundidad, en parte por el cielo y el agua. Por eso es tan común en la banca, los seguros, la salud y la tecnología. También es la razón por la que un degradado azul medio rara vez ayuda a que alguien te reconozca: se parece a la categoría y no a la empresa. La [psicología del color](https://gradiently.design/es/guide/color-psychology) explica por qué la convención corta por los dos lados.

### Azul corporativo

- Un azul medio hacia un azul más claro a 135 grados
- Azul primario puro y totalmente saturado
- Liso y plano, sin textura
- Azul por todas partes, nada cálido

### Azul distintivo

- Inclinado hacia el verde azulado, el índigo o el violeta
- Muy profundo o muy pálido, no el medio
- Grano, brillo o un resplandor suave
- Un acento cálido: coral, oro o albaricoque

El azul se mezcla bien hacia sus vecinos: verde azulado, cian, índigo y violeta. Se mezcla mal hacia sus opuestos. El azul directo al naranja o al amarillo pasa por un medio grisáceo, así que mantén cortos los acentos cálidos o hazlos pasar por violeta o rosa. Los [colores complementarios](https://gradiently.design/es/guide/complementary-colors) explican por qué.

## Texto sobre degradados azules

| Texto sobre fondo | Contraste | Veredicto |
| --- | --- | --- |
| Blanco sobre `#0b1437` | 18,0:1 | Excelente |
| Blanco sobre `#1e3a8a` | 10,4:1 | Excelente |
| Blanco sobre `#2563eb` | 5,2:1 | Bien para texto de cuerpo |
| Blanco sobre `#3b82f6` | 3,7:1 | Solo texto grande |
| `#0b1a33` sobre `#60a5fa` | 6,8:1 | Aquí funciona la tinta oscura |
| `#0b1a33` sobre `#bae6fd` | 13,1:1 | Excelente |

Relaciones de contraste WCAG, calculadas. El texto de cuerpo necesita 4,5:1 y el texto grande 3:1.

La trampa es el medio de la gama de azules: un azul aciano brillante como `#3b82f6` parece lo bastante fuerte para el texto blanco, pero queda por debajo de 4,5:1. En un degradado, comprueba el contraste donde el azul es más claro detrás de tus palabras. El [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) tiene el método completo.

Un post vertical con un dato, 98% en letra grande sobre un degradado profundo

Un campo profundo hace que un solo número lo diga todo.

Una historia vertical con las palabras Suelta el aire sobre un degradado sereno

Una historia más serena con mucho espacio abierto.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

La paleta 20, Anochecer sobre el agua, como fondo de cabecera. Mantén los titulares en la parte superior, más oscura.

Exportar un degradado azul como imagen para redes sociales necesita un paso extra. Las plataformas vuelven a comprimir lo que subes, y los azules oscuros y lentos están entre los primeros colores que se rompen en bandas visibles. Exporta al tamaño recomendado de la plataforma, añade un grano fino antes de guardar y usa PNG donde la plataforma lo acepte. Los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) muestran cuánto grano es suficiente.

Para los morados vecinos del azul, mira los [degradados morados](https://gradiently.design/es/guide/purple-gradient); para opciones más verdes, mira los [degradados verdes](https://gradiently.design/es/guide/green-gradient).

## FAQ

### ¿Qué colores combinan bien con el azul en un degradado?

El verde azulado, el cian, el índigo y el violeta se mezclan limpiamente con el azul. Los colores cálidos como el coral y el oro son buenos acentos si se mantienen cortos, porque mezclar el azul directamente con naranja o amarillo se vuelve gris.

### ¿Cuál es un buen código CSS para un degradado azul?

Para un azul profundo y sereno prueba linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Todas las paletas de esta página se pueden copiar como CSS.

### ¿Se lee el texto blanco sobre un degradado azul?

Sobre azules profundos y medio oscuros, sí. Sobre azules más claros como #3b82f6, el texto blanco queda por debajo de la relación de 4,5:1 recomendada para el texto de cuerpo.

### ¿Cómo hago que un degradado azul parezca menos corporativo?

Inclínalo hacia el verde azulado o el violeta, elige azules muy profundos o muy pálidos en lugar de un azul medio, añade grano y usa un pequeño acento cálido.