# Degradados verdes: frescos, profundos y eléctricos [Canonical HTML page](https://gradiently.design/es/guide/green-gradient) El verde puede ser una mañana de primavera, un club privado o el cartel de una rave. Aquí hay degradados verdes para cada caso, con códigos, y una salida del tópico del verde hoja. ## The short version - Un degradado verde mezcla tonos de verde, del menta pálido y la salvia al esmeralda, el bosque y el lima eléctrico, a menudo con un verde azulado o un amarillo vecino. - El verde se asocia ampliamente con la naturaleza, la salud, el crecimiento y el dinero, y por eso es tan común en sostenibilidad, bienestar y finanzas. - El verde se mezcla con limpieza hacia el verde azulado, el azul y el amarillo, pero tiende a volverse gris al mezclarse directamente con rosa, rojo o morado. - El texto blanco funciona sobre verdes profundos como #14532d, pero un verde medio como #16a34a necesita texto oscuro o tamaños grandes. - Los verdes inesperados, como el oliva, el botella y el chartreuse, combinados con un color acompañante no natural, evitan el tópico ecológico. Un **degradado verde** mezcla tonos de verde, del menta pálido y la salvia al esmeralda y el bosque hasta el lima eléctrico, a menudo con un verde azulado o un amarillo vecino. El verde tiene más rango que casi cualquier otro color: puede sentirse fresco y limpio, profundo y caro, o ruidoso y sintético. Abajo hay paletas de degradado verde para cada ambiente, con CSS para copiar, los colores de texto que funcionan sobre ellas y cómo evitar parecerte a todos los informes de sostenibilidad. ## La familia del verde Los verdes se inclinan hacia dos lados. Hacia el amarillo se convierten en lima, chartreuse y oliva, que se sienten cálidos, enérgicos o terrosos. Hacia el azul se convierten en verde azulado, jade y esmeralda, que se sienten fríos, calmos y pulidos. Si los apagas hacia el gris, obtienes la salvia, que es suave y adulta. Si los oscureces, obtienes el bosque y el verde botella, que se sienten consolidados y algo lujosos. - Menta: #d1fae5 - Salvia: #a3b18a - Lima: #a3e635 - Esmeralda: #059669 - Verde azulado: #0f766e - Oliva: #556b2f - Bosque: #14532d - Verde botella: #0b3b2e Ocho verdes. Versiones inclinadas al amarillo, inclinadas al azul, apagadas y profundas de una misma familia de color. ## Qué señala un degradado verde Las asociaciones del verde más ampliamente compartidas son la naturaleza, el crecimiento, la salud y la frescura, que vienen directamente de las plantas. La convención ha añadido más: el paso en los semáforos, el dinero en Estados Unidos por sus billetes y el éxito en paneles y apps de finanzas. También lleva significados religiosos y nacionales en algunos lugares; los [significados de los colores en el mundo](https://gradiently.design/es/guide/color-meanings-around-the-world) los tratan. En la práctica, eso significa que el tono hace casi todo el trabajo. El menta dice limpio. La salvia dice calma y cuidado. El bosque y el botella dicen tradición. El lima dice energía. El verde azulado dice acabado pulido. Decide cuál de esas cosas quieres decir antes de elegir un degradado, y las paletas de abajo serán mucho más fáciles de elegir. ## Degradados verdes frescos y menta Los verdes pálidos se sienten limpios, frescos y ligeros. Van bien con el cuidado de la piel, la salud, la comida y todo lo que deba sentirse fresco. Mantén el texto oscuro y caliéntalos un poco en un extremo para que no se sientan clínicos. - Menta: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)` - Mañana de primavera: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)` - Papel salvia: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)` - De aguamarina a lima: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)` Degradados de verde claro. Los extremos amarillo y lima añaden calidez y evitan que parezcan fríos. ## Degradados verdes profundos y de bosque Los verdes oscuros son de los colores más caros que hay. Piensa en coches de carreras, bibliotecas antiguas y envases de tradición. Sostienen bien el texto blanco y crema y combinan de maravilla con el oro, el latón y el blanco roto cálido. - Verde botella: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)` - Suelo del bosque: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)` - Resplandor esmeralda: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)` - De oliva a latón: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)` Degradados de verde profundo. De oliva a latón muestra lo bien que acepta un verde oscuro a una pareja metálica cálida. ## Degradados de lima eléctrico y verde neón Los verdes ácidos y lima son ruidosos y sintéticos en el mejor sentido. Van bien con deporte, música, videojuegos y lanzamientos de tecnología. Sobre un fondo casi negro brillan; sobre blanco pueden ser difíciles de mirar, así que úsalos ahí en zonas pequeñas. - Lima sobre negro: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)` - De lima a limón: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)` - Resplandor ácido: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)` - De verde a cian: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)` Verdes eléctricos. Solo con vecinos: negro, amarillo y cian. ## Degradados de verde azulado y jade El verde que se inclina hacia el azul es calmo, pulido y tranquilamente seguro. Funciona bien para finanzas, bienestar y viajes, y es menos esperado que el azul puro en esas categorías. - Verde azulado profundo: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)` - De jade a aguamarina: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)` - Luz de laguna: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)` Verde azulado y jade. Están entre los verdes de arriba y los [degradados azules](https://gradiently.design/es/guide/blue-gradient). ## Cómo evitar el tópico de la sostenibilidad Como el verde está tan fuertemente ligado a la naturaleza, se ha convertido en el color por defecto de todo lo ecológico, orgánico o sostenible. Un verde hoja brillante, un fondo blanco y un icono de hoja ya se leen como la categoría, no como una empresa concreta. Si trabajas en ese terreno y quieres que te noten, cambia al menos una de esas tres cosas. ### Tópico - Verde hoja brillante sobre blanco - Verde mezclado solo con más verde y azul - Hojas, globos terráqueos y brotes como decoración - Acabado digital liso y brillante ### Fresco - Oliva, botella, salvia o chartreuse - Una pareja no natural: rosa, lila, crema o negro - Tipografía y textura en vez de iconos - Grano de papel o un material mate El verde y el rosa son una pareja especialmente buena para esto, porque la combinación se siente botánica sin ser literal. Están casi opuestos en el círculo cromático, así que mantenlos en zonas separadas en vez de mezclar uno en el otro. Los [colores complementarios](https://gradiently.design/es/guide/complementary-colors) explican por qué. Verde botella y rosa, dividido: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)` Dos opuestos lado a lado con un borde duro. Llamativo, botánico y nada parecido a una paleta ecológica de archivo. ## Texto sobre degradados verdes | Texto sobre el fondo | Contraste | Veredicto | | --- | --- | --- | | Blanco sobre `#14532d` | 9,1:1 | Excelente | | Blanco sobre `#15803d` | 5,0:1 | Bueno para texto normal | | Blanco sobre `#16a34a` | 3,3:1 | Solo texto grande | | `#052e16` sobre `#22c55e` | 6,5:1 | Aquí funciona la tinta oscura | | `#052e16` sobre `#a3e635` | 9,9:1 | Excelente | | `#052e16` sobre `#86efac` | 10,6:1 | Excelente | Relaciones de contraste WCAG, calculadas. El texto normal necesita 4,5:1 y el texto grande 3:1. Los verdes brillantes son más claros de lo que parecen, así que el texto blanco sobre ellos suele fallar. Una tinta verde muy oscura se lee mejor y mantiene todo en la familia. Comprueba el punto más claro detrás del texto blanco en cualquier degradado; el [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) muestra cómo. Un post vertical de cuaderno de campo titulado Qué crece en octubre sobre un degradado profundo Un fondo calmo y profundo para un post editorial. Una historia vertical de cuenta atrás que dice Faltan 3 días sobre un degradado brillante Una historia de cuenta atrás ruidosa, donde un verde eléctrico brillaría. ```css .panel { background-color: #0b3b2e; background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%); color: #f5f0e6; } ``` Verde botella con texto crema cálido: una combinación fácil y premium. Para más paletas sacadas de bosques, campos y agua, mira las [paletas de colores de la naturaleza](https://gradiently.design/es/guide/nature-color-palettes). ## FAQ ### ¿Qué colores combinan bien con el verde en un degradado? El verde azulado, el azul, el amarillo y el lima se mezclan con limpieza con el verde. El rosa, el rojo y el morado son parejas llamativas pero deben ir en zonas separadas, porque mezclar el verde con ellos lo vuelve gris. ### ¿Cuál es el CSS de un degradado verde oscuro? Por ejemplo, linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) da un verde botella profundo. Todas las paletas de esta página se pueden copiar como CSS. ### ¿Qué color de texto funciona sobre el verde? El blanco o el crema funcionan sobre verdes profundos. Sobre verdes brillantes o claros, usa una tinta verde muy oscura, porque el texto blanco suele quedar por debajo del contraste recomendado. ### ¿Cómo uso el verde sin parecer una marca ecológica? Elige verdes menos esperados, como el oliva, el botella o el chartreuse, combínalos con un color no natural como el rosa o el lila, y usa textura o tipografía en vez de motivos de hojas.