La versión corta
- 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.
En esta página
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.
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.
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.
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.
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 |
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 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 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 |
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 tiene el método completo.
Un campo profundo hace que un solo número lo diga todo.
Una historia más serena con mucho espacio abierto.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}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 muestran cuánto grano es suficiente.
Para los morados vecinos del azul, mira los degradados morados; para opciones más verdes, mira los degradados verdes.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
