# Degradado verde azulado: códigos de laguna a mar profundo [Canonical HTML page](https://gradiently.design/es/guide/teal-gradient) El verde azulado está justo entre el azul y el verde: es sereno, elegante y muy fácil de mezclar. Baja de la laguna al mar profundo con códigos para cada profundidad. ## The short version - 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. 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. - Aguas someras: #ccfbf1 - Laguna: #5eead4 - Aqua: #2dd4bf - Verde azulado: #14b8a6 - Arrecife: #0d9488 - Alga: #0f766e - Verde azulado profundo: #115e59 - Abismo: #042f2e Ocho verdes azulados de claro a oscuro. Dos o tres vecinos dan una mezcla serena; de claro a oscuro, profundidad. ## 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. - Aguas someras: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)` - Laguna: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)` - Del cielo a la laguna: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)` - Piscina al sol: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)` Verdes azulados pálidos que siguen frescos. Cada uno conserva una parada casi blanca para que el texto oscuro tenga dónde apoyarse. ## 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. - Arrecife: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)` - Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)` - De cian a alga: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)` - De verde azulado a azul: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)` - Verde azulado en tres pasos: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)` Los verdes azulados medios tiran hacia el esmeralda o hacia el azul. Elige la dirección según lo que deba sentir tu marca. ## 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](https://gradiently.design/es/guide/gradient-banding). - Descenso: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)` - Luz desde arriba: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)` - De verde azulado profundo a medianoche: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)` - Haz de luz: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)` Verdes azulados oscuros con una sola fuente de luz. Se sienten caros y serenos. ## 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](https://gradiently.design/es/guide/complementary-colors) explican esa atracción, y los [degradados coral](https://gradiently.design/es/guide/coral-gradient) tienen códigos para el otro lado. - Evita: gris en el medio: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)` - Sol de cobre en verde azulado oscuro: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)` - De verde azulado pálido a melocotón: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)` Una mezcla saturada de verde azulado a coral se vuelve gris en el medio. Una pequeña luz cálida sobre el verde azulado, o dos tintes pálidos, funciona mucho mejor. 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. | Si eres | Prueba | Combínalo con | | --- | --- | --- | | Una clínica, piscina o marca de cuidado de la piel | Aguas someras o Laguna | Texto carbón, mucho espacio en blanco | | Una app o producto fintech | De verde azulado a azul | Un único botón coral | | Una cafetería, floristería o vivero | Jade | Crema y terracota | | Un hotel, bar o despacho de abogados | Luz desde arriba | Detalles en cobre o latón | | Un evento de noche | Haz de luz | Titular en laguna pálida | Puntos de partida, no reglas. Prueba cada uno con tu titular y tu logotipo reales. ## 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](https://gradiently.design/es/guide/dark-mode-design). ```css :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); } ``` Un marco verde azulado profundo con un resplandor verde azulado arriba. Los enlaces en laguna pálida siguen siendo legibles sobre él. ## 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. | Fondo | Texto blanco | Texto Abismo #042f2e | | --- | --- | --- | | Laguna `#5eead4` | Suspende | Unos 9,8:1 | | Verde azulado `#14b8a6` | Unos 2,5:1, suspende | Unos 5,8:1 | | Arrecife `#0d9488` | Unos 3,7:1, solo texto grande | Débil | | Alga `#0f766e` | Unos 5,5:1, aprueba | Suspende | | Verde azulado profundo `#115e59` | Unos 7,6:1, aprueba | Suspende | El verde azulado pasa del texto oscuro al texto blanco entre Arrecife y Alga. Una publicación vertical de spa con texto blanco sobre un degradado verde azulado profundo Como publicación vertical, el titular se apoya en el verde azulado más sereno. El mismo diseño de spa como story vertical, con la luz verde azulada movida para ajustarse al formato 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](https://gradiently.design/es/guide/website-hero-background). ## FAQ ### ¿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.