La versión corta
- Un degradado verde y azul mezcla tonos fríos vecinos como el esmeralda #10b981, el verde azulado #0d9488 y el azul cielo #0284c7, con verde azulado o aguamarina en el medio.
- Como el verde y el azul son contiguos en el círculo cromático, la mezcla se mantiene limpia y parece natural porque refleja el agua, el hielo y el cielo.
- Los verdes vivos y las aguamarinas son demasiado claros para texto blanco, así que usa una tinta verde azulado profundo en las versiones claras y blanco o menta en las oscuras.
- Los degradados verde y azul oscuros transmiten calma y confianza, mientras que las versiones claras transmiten frescura y limpieza.
- La pareja va bien con viajes, bienestar, finanzas, marcas de aire libre y tecnología, y un acento cálido como arena o coral evita que parezca fría.
En esta página
Un degradado verde y azul mezcla dos vecinos fríos: verdes como el esmeralda #10b981 o la menta #a7f3d0 y azules como #0284c7 o el cielo #bae6fd, con el verde azulado y la aguamarina haciendo de puente. La mezcla se mantiene limpia porque no hay punto gris entre los dos tonos. Se siente natural porque lo has visto toda la vida en el agua, el hielo y el cielo. Los códigos de aquí siguen cuatro paisajes, con los colores de texto que se leen en cada uno y CSS para modo claro y oscuro.
Por qué el verde y el azul se ven naturales juntos
El verde y el azul son colores análogos: están uno al lado del otro en el círculo, así que cada paso entre ellos es un color real, sobre todo verde azulado y aguamarina. La naturaleza muestra esta pareja constantemente, desde los mares poco profundos donde el agua azul corre sobre algas verdes y arena hasta los lagos glaciares y los bosques de pinos reflejados en aguas quietas. Tomar prestado de esas escenas es la forma más fácil de que el degradado resulte calmado y no corporativo.
Laguna: degradados aguamarina y verde vivos
El agua tropical poco profunda es sobre todo aguamarina, con verde donde es más somera y azul donde se hace más honda. Estos degradados transmiten brillo de vacaciones. Añade una parada de arena cálida si quieres que parezcan una playa y no una piscina.
Lago de pinos: degradados verde y azul profundos
El verde oscuro que desemboca en azul oscuro resulta silencioso, caro y fiable. Piensa en un lago de bosque al anochecer o en el color de una botella antigua. Sostienen bien el texto blanco y van con finanzas, equipamiento de exterior, arquitectura y cualquier marca que quiera sentirse estable.
Glaciar: degradados de menta pálida y cielo
Aclara la pareja del todo y obtienes hielo glaciar y mañanas frías: limpio, aireado y muy calmado. Sirven para sanidad, cuidado de la piel, limpieza y apps de productividad. Pueden parecer clínicos, así que un toque de blanco cálido ayuda.
Aurora: verde y azul sobre un cielo nocturno
Las auroras boreales son luz verde y azul sobre negro, por eso los degradados aurora están entre los fondos oscuros más queridos. Mantén el color en bandas suaves y deja que el fondo oscuro ocupe casi todo el encuadre. Degradados aurora cubre la técnica completa.
Colores de texto sobre degradados verde y azul
El esmeralda y la aguamarina son sorprendentemente claros, así que el texto blanco sobre las versiones vivas suele fallar. La tinta verde azulado profundo funciona en mezclas claras y mantiene todo en una familia; el blanco y la menta se leen bien en las oscuras. Los ratios de abajo usan la fórmula WCAG. Texto sobre un degradado muestra qué hacer cuando una línea cruza ambos extremos.
#10b981Texto
Contraste
Veredicto
#22d3eeTexto
Contraste
Veredicto
#0d9488Texto
Contraste
Veredicto
#a7f3d0Texto
#042f2eContraste
Veredicto
#065f46Texto
Contraste
Veredicto
#04202aTexto
#5eead4Contraste
Veredicto
Una publicación de agencia de viajes en tonos vivos de laguna, con texto verde azulado profundo.
Una imagen de enlace de LinkedIn de pino a marino para una app de finanzas.
Cómo calentar una paleta verde y azul
El verde y el azul son fríos los dos, así que toda una marca en ellos puede sentirse distante. Un acento cálido lo arregla. La arena, el coral y el dorado suave están al otro lado del círculo respecto al verde azulado, así que úsalos junto al degradado, en un botón, un logotipo o una franja en un borde, y no mezclados con él. Colores complementarios explica por qué mezclar a través del círculo da gris.
Evita
- Verde azulado mezclado directamente con coral
- Texto blanco sobre esmeralda o aguamarina
- Todas las superficies en colores fríos
- Verde saturado sobre azul saturado a plena intensidad
Haz
- Coral o arena junto al degradado como acento
- Tinta verde azulado profundo en mezclas claras
- Un blanco cálido o crema para paneles y texto
- Un color al frente y el otro de apoyo
CSS del degradado verde y azul para modo claro y oscuro
.hero {
background-color: #ecfdf5;
background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
color: #042f2e;
}
@media (prefers-color-scheme: dark) {
.hero {
background-color: #031418;
background-image:
radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
color: #ecfeff;
}
}Emparejar una versión clara y otra oscura del mismo verde y azul es una forma limpia de que el cambio de tema parezca diseñado y no simplemente invertido. Degradados en modo oscuro profundiza más. En Gradiently, un Mark se renderiza en cada tamaño que diseñas y elige tinta clara u oscura línea a línea a partir de su propia paleta, así que tanto los brillos de laguna como los oscuros de pino mantienen legibles sus palabras.
Preguntas frecuentes
¿Cuál es un buen código de degradado verde y azul?
Una opción viva es linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%). Para algo más oscuro y calmado, prueba linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%).
¿Combinan el verde y el azul?
Sí. Son vecinos en el círculo cromático, con el verde azulado y la aguamarina entre ambos, así que la mezcla se mantiene limpia y se siente natural.
¿Qué color hay entre el verde y el azul?
El verde azulado, alrededor de #0d9488, con la aguamarina y el turquesa como parientes más brillantes.
¿Qué color de texto va sobre un degradado verde y azul?
Verde azulado profundo como #042f2e en las versiones claras, y blanco o menta en las oscuras. El blanco sobre esmeralda o aguamarina vivos no cumple el contraste.
¿Qué significa un degradado verde y azul para una marca?
Suele transmitir calma, frescura y confianza, porque evoca el agua, el cielo y las plantas. Las versiones oscuras se sienten estables; las claras, limpias.
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