La versión corta
- Un degradado verde azulado mezcla tonos entre azul y verde, normalmente de un aguamarina pálido a un azul verdoso profundo.
- El verde azulado se mezcla limpiamente con sus vecinos: cian, esmeralda, azul y azul marino.
- Acentos cálidos como el coral, el melocotón y el cobre se sitúan frente al verde azulado y lo hacen brillar si los dejas fuera de la mezcla.
- El texto blanco necesita un verde azulado al menos tan oscuro como #0f766e para superar el contraste; los más claros piden texto oscuro.
- Un verde azulado muy oscuro es un fondo excelente para el modo oscuro: resulta más suave que el negro y menos previsible que el azul marino.
En esta página
Un degradado verde azulado recorre tonos entre azul y verde: aguamarina pálido en el extremo claro, un verde azulado limpio en el centro y un azul verdoso oscuro, casi tinta, abajo. Como el verde azulado está a medio camino entre el azul y el verde, se mezcla con facilidad hacia cualquiera de los dos lados y casi nunca se enturbia. Los códigos de abajo lo siguen por profundidad, de una laguna soleada al mar profundo, con notas sobre acentos, CSS y tipografía para cada una.
Una escala de verdes azulados para crear cualquier degradado
La mayoría de los buenos degradados verde azulado son de dos a cuatro pasos de esta escala. Elige vecinos para una mezcla suave o salta tres peldaños para dar dramatismo. Los nombres de abajo se usan en el resto del artículo.
Degradados verde azulado claros: laguna y aguas someras
El verde azulado claro es limpio, fresco y discretamente alegre. Va bien con bienestar, piscinas y trajes de baño, clínicas dentales y de salud, y cualquier producto que quiera transmitir higiene sin la frialdad del azul puro. Llévalo hacia el blanco o hacia un menta pálido para mantenerlo suave.
Degradados verde azulado medios: arrecife y jade
El centro de la gama es el verde azulado en su versión más segura. Funcionan bien para apps, paneles fintech, marcas de sostenibilidad y educación, porque transmiten confianza (azul) y vida (verde). Si te inclinas hacia el esmeralda resulta natural; si te inclinas hacia el azul, técnico.
Degradados verde azulado oscuros: el mar profundo
En el extremo oscuro, el verde azulado se vuelve casi negro con un soplo verde y frío. Es el verde azulado más sofisticado: despachos de abogados, licores, hoteles, arquitectura, eventos de noche. También es un fondo magnífico para un solo acento vivo, porque nada en él compite. Las mezclas oscuras forman bandas en las exportaciones comprimidas, así que un poco de grano ayuda; consulta el banding en degradados.
Acentos cálidos para un degradado verde azulado
El opuesto del verde azulado en el círculo cromático es un rojo anaranjado cálido, así que coral, melocotón, albaricoque y cobre lo hacen cantar. Deja el color cálido fuera de la mezcla: un degradado de verde azulado a coral pasa por un gris apagado en el medio. Usa el acento para un botón, un titular o una forma pequeña. Los colores complementarios explican esa atracción, y los degradados coral tienen códigos para el otro lado.
Fíjate en la tercera muestra: los tintes muy pálidos de colores opuestos se mezclan bien, porque hay poca saturación que perder. Es un truco útil para envases suaves y papelería de boda.
Cómo elegir un degradado verde azulado para tu marca
El verde azulado gusta a las marcas de salud, dinero y sostenibilidad, así que el tono por sí solo no te distinguirá. Lo que sí lo hace es la profundidad que elijas, el acento con el que lo combines y la superficie. Empieza por el trabajo que el diseño tiene que hacer.
Prueba
Combínalo con
Prueba
Combínalo con
Prueba
Combínalo con
Prueba
Combínalo con
Prueba
Combínalo con
CSS de degradado verde azulado para una interfaz en modo oscuro
El verde azulado profundo es una bonita alternativa al negro o al azul marino para una interfaz oscura. Resulta más suave que el negro puro y aun así da al texto claro mucho contraste. Aquí tienes un fondo para el marco de una app con un suave resplandor tras la parte superior de la página. Más sobre el enfoque en diseño en modo oscuro.
:root {
--abyss: #042f2e;
--deep-teal: #115e59;
--lagoon: #5eead4;
}
body {
min-height: 100vh;
margin: 0;
color: #f0fdfa;
background-color: var(--abyss);
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}
a { color: var(--lagoon); }Texto legible sobre verde azulado
El verde azulado medio engaña. #14b8a6 parece lo bastante fuerte para texto blanco, pero mide unos 2,5 a 1, un suspenso claro. El blanco necesita Alga (#0f766e, unos 5,5 a 1) o más oscuro. Desde Aqua hacia arriba, usa el color Abismo #042f2e como tinta: mantiene el texto en la familia del verde azulado y se lee con facilidad.
#5eead4Texto blanco
Texto Abismo #042f2e
#14b8a6Texto blanco
Texto Abismo #042f2e
#0d9488Texto blanco
Texto Abismo #042f2e
#0f766eTexto blanco
Texto Abismo #042f2e
#115e59Texto blanco
Texto Abismo #042f2e
Como publicación vertical, el titular se apoya en el verde azulado más sereno.
El mismo diseño como story, renderizado de nuevo en lugar de recortado.
Ese último punto importa más de lo que parece. Un degradado recortado de publicación a story deja la luz en el lugar equivocado. En Gradiently un Mark se renderiza en cada tamaño, y el Designer puede crear los demás tamaños por ti, así que un look verde azulado se mantiene equilibrado en el feed, en la story y en el hero de tu web.
Preguntas frecuentes
¿Qué colores combinan con un degradado verde azulado?
Cian, esmeralda, azul y azul marino se mezclan con él. Coral, melocotón, cobre y dorado son acentos cálidos potentes si se usan fuera de la mezcla.
¿Cuál es el código hex del verde azulado?
El teal con nombre de la web es #008080. La mayoría de las paletas modernas usan versiones más vivas, como #14b8a6 para el verde azulado medio y #0f766e para uno más profundo.
¿Qué diferencia hay entre el verde azulado y el turquesa?
El verde azulado es más profundo y apagado; el turquesa es más claro, más brillante y tira algo más al verde. Ambos están entre el azul y el verde.
¿Puedo usar texto blanco sobre verde azulado?
Solo sobre verde azulado profundo, desde #0f766e hacia abajo. Los verdes azulados vivos y claros necesitan texto oscuro para superar el contraste.
¿Es el verde azulado un buen color para el modo oscuro?
Sí. Un verde azulado muy oscuro como #042f2e es más suave que el negro y más distintivo que el azul marino, y los acentos verde azulado pálidos se leen bien sobre él.
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