Colores verdes para web: 6 paletas con códigos hex

Paletas de verde para tu web con códigos hex, pares de texto con contraste verificado y casos de uso, para elegir un verde legible que encaje con tu marca.

Preguntas frecuentes

¿Cuál es el mejor verde para una página web?

No existe un único mejor verde, pero un verde profundo y algo desaturado, como #166534 o #2D6A4F, es el punto de partida más seguro. Ambos superan el umbral de texto 4.5:1 de WCAG AA sobre blanco (7.13:1 y 6.39:1), así que sirven para botones, enlaces y títulos. Los verdes brillantes como #22C55E no lo superan sobre blanco (2.28:1) y conviene reservarlos para iconos o fondos oscuros.

¿Qué colores combinan bien con el verde en una web?

Los blancos rotos y cremas cálidos (#F6F4EC), los verdes casi negros (#081C15) y un único acento cálido, como ámbar o terracota, combinan muy bien. Mantén los neutros con un matiz verdoso en lugar de gris puro para que la página se vea cohesionada, y limita el acento a un solo color de acción.

¿Es accesible el verde para el texto?

Los verdes oscuros sí; los claros y medios muchas veces no. WCAG 2 AA pide al menos 4.5:1 para texto normal y 3:1 para texto grande y componentes de interfaz. Comprueba cada par en lugar de fiarte del ojo, porque verdes de tono medio como #40916C (3.83:1 sobre blanco) están en la zona donde solo cumplen para texto grande.

¿Qué transmite el verde en el diseño web?

El verde se asocia sobre todo con la naturaleza, el crecimiento, la salud, la sostenibilidad y el dinero, por eso aparece tanto en sitios de bienestar, finanzas, energía y aire libre. El significado cambia según el tono: los verdes bosque profundos transmiten solidez y calma, mientras que el lima se percibe enérgico y moderno. Tómalo como convenciones, no como garantías, y pruébalo con tu propia audiencia.

¿Debo usar verde en los botones de llamada a la acción?

Puedes, siempre que el botón destaque del resto de la página y su texto cumpla el contraste. Un botón verde oscuro con texto blanco funciona en páginas claras. En una página mayormente verde, un botón en un acento cálido suele separarse mejor. Consulta nuestra guía de esquemas de color que favorecen la conversión para decidir.

¿Necesito una paleta verde para modo oscuro?

No es obligatoria, pero los fondos verde oscuro son una elección de diseño muy popular por sí solos. Si ofreces uno, no reutilices sin más la paleta clara: los verdes brillantes que fallan sobre blanco suelen funcionar muy bien sobre un verde casi negro; por ejemplo, #22C55E sobre #052E16 alcanza 6.54:1.

Respuesta corta: para una web en verde, usa un verde profundo como #166534 o #2D6A4F en botones, enlaces y títulos, un blanco roto con matiz como #F6F4EC o #F0FDF4 de fondo, y reserva los verdes brillantes como #22C55E para fondos oscuros o decoración. Los verdes oscuros sobre fondos claros superan el umbral de texto 4.5:1 de WCAG AA. Los verdes brillantes sobre blanco no (#22C55E sobre blanco es 2.28:1).

A continuación tienes seis paletas verdes con valores hex, ratios de contraste medidos y el tipo de sitio al que encaja cada una. Todos los ratios se calcularon con la fórmula de luminancia relativa de WCAG, y puedes verificar cualquier par tú mismo en el comprobador de contraste de color.

Por qué el verde es complicado en pantalla

El verde se sitúa en el centro del rango de luminancia. Un verde medio se ve vivo, pero sobre blanco suele ser demasiado claro para texto, y sobre negro suele ser demasiado oscuro. Por eso un verde que luce genial en un logotipo puede fallar como color de botón.

La regla práctica: elige tu verde por su ratio de contraste, no por cómo se ve en una muestra. Para texto normal, apunta a 4.5:1 o más. Para texto grande (aproximadamente 24 px normal o 19 px en negrita en adelante) y para componentes de interfaz como bordes de campos e iconos, 3:1 es el mínimo.

Seis paletas verdes para web con códigos hex

Cada paleta incluye un fondo, un color de texto, un acento para botones o enlaces y el ratio de contraste del par que importa.

1. Bosque y crema (editorial, aire libre, gastronomía)

Rol	Hex	Par y ratio
Fondo	#F6F4EC
Texto y títulos	#1B4332	sobre el fondo: 10.06:1
Botón / enlace	#2D6A4F	texto blanco encima: 6.39:1
Panel suave	#95D5B2	texto #1B4332 encima: 6.56:1

Cálida, tranquila y legible. El fondo crema evita que se sienta clínica. Buena para restaurantes, tiendas de productores locales, viajes y sitios de contenido extenso.

2. Menta fresca (bienestar, clínicas, contenido de salud)

Rol	Hex	Par y ratio
Fondo	#F0FDF4
Texto y títulos	#14532D	sobre el fondo: 8.70:1
Botón	#15803D	texto blanco encima: 5.02:1
Banda oscura	#052E16	texto #DCFCE7 encima: 13.57:1

Ligera y limpia. El verde del botón apenas supera AA, así que usa etiquetas de peso normal o más grueso y evita colocarlo sobre paneles con tinte.

3. Salvia y oliva (estudios, interiorismo, artesanía)

Rol	Hex	Par y ratio
Fondo	#E9F5DB
Texto y títulos	#31572C	sobre el fondo: 7.33:1
Botón	#4F772D	texto blanco encima: 5.24:1
Resaltado	#90A955	texto #132A13 encima: 5.84:1

Una paleta apagada y terrosa. Funciona muy bien para portafolios y marcas boutique donde quieres verde sin que grite.

4. Tema oscuro verde profundo (fintech, SaaS, premium)

Rol	Hex	Par y ratio
Fondo	#081C15
Texto	#B7E4C7	sobre el fondo: 12.58:1
Acento / enlaces	#40916C	sobre el fondo: 4.62:1
Tarjeta	#1B4332	texto #95D5B2 encima: 6.56:1

Los fondos oscuros permiten usar verdes medios como acento. Ten en cuenta que #40916C cumple sobre #081C15 pero falla sobre blanco (3.83:1), así que no lo reutilices en una sección clara.

5. Lima neón sobre verde oscuro (eventos, creadores, marcas juveniles)

Rol	Hex	Par y ratio
Fondo	#1A2E05
Titular / botón	#A3E635	sobre el fondo: 9.69:1
Brillante alternativo	#22C55E	sobre #052E16: 6.54:1

Mucha energía y muy legible, porque el lima claro se apoya sobre una base oscura. Úsala con mesura: una página entera en lima cansa la vista enseguida.

6. Verde azulado (SaaS, healthtech, sostenibilidad)

Rol	Hex	Par y ratio
Fondo	#CCFBF1
Texto y títulos	#134E4A	sobre el fondo: 8.41:1
Botón	#0F766E	texto blanco encima: 5.47:1

Tira hacia el verde azulado, que se percibe más técnico y menos "natural". Encaja bien cuando quieres verde sin el aire orgánico.

Verdes que fallan y por cuáles cambiarlos

Falla	Par	Ratio	Cámbialo por
Botón verde brillante	#22C55E con texto blanco	2.28:1	#15803D con texto blanco (5.02:1)
Enlace lima sobre blanco	#65A30D sobre blanco	3.09:1	#4D7C0F sobre blanco (4.99:1)
Texto de cuerpo en verde medio	#40916C sobre blanco	3.83:1	#2D6A4F sobre blanco (6.39:1)

Los de tono medio todavía superan la barra de 3:1, así que son aceptables para titulares grandes, iconos y bordes, pero no para párrafos ni enlaces pequeños. Para ver más sobre qué suele salir mal, consulta ejemplos de mal contraste de color y, para combinaciones más sólidas en general, la guía de paletas de colores de alto contraste.

Cómo crear tu propia paleta verde, paso a paso

Decide primero la función del verde. ¿Es el color de marca, el color de acción o solo un acento? Los verdes solo de marca pueden ser de cualquier tono. Los verdes de acción deben superar el contraste.
Elige un ancla oscura. Empieza con un verde entre #14532D y #2D6A4F. Será el color de títulos, enlaces y botones sobre fondos claros.
Tiñe el fondo. Usa un verde muy claro o un crema cálido en lugar de blanco puro, por ejemplo #F0FDF4 o #F6F4EC. Vuelve a comprobar el contraste del texto tras teñir.
Añade un acento que no sea verde. El ámbar o la terracota junto al verde dan separación a los botones en páginas con mucho verde. Verifica el contraste de la etiqueta: por ejemplo, texto #92400E sobre #FEF3C7 mide 6.37:1.
Prueba cada par de texto sobre fondo. Pasa títulos, cuerpo, enlaces, botones y texto de marcador por un comprobador. Todo lo que quede por debajo de 4.5:1 en tamaño de cuerpo necesita un tono más oscuro o más claro.
Revisa los estados hover y deshabilitado. Los tonos de hover suelen derivar hacia valores que no cumplen.
Guarda la paleta como tokens con nombre. Usar nombres de variable como brand-900, brand-700 y brand-100 hace que los cambios posteriores sean una edición de una sola línea. Nuestra guía de colores de Tailwind CSS muestra la idea de la escala de tonos, y varios de los hex anteriores salen de ese tipo de escala.

Qué verde para qué tipo de sitio

Sostenibilidad, energía, ONG: bosque y crema, o salvia. Puedes ver ejemplos reales de ese ambiente en nuestra plantilla Greenfield Renewables.
Salud y bienestar: menta fresca o verde azulado.
Finanzas y SaaS: tema oscuro verde profundo, con un único acento brillante.
Gastronomía, granja, jardín: bosque y crema con un acento cálido.
Páginas de creadores y eventos: lima neón sobre verde oscuro, limitado a titulares y un botón.

Lista de verificación para copiar antes de publicar

[ ] El texto de cuerpo tiene al menos 4.5:1 frente a su fondo
[ ] El texto grande y los iconos tienen al menos 3:1
[ ] Las etiquetas de los botones alcanzan 4.5:1 frente al relleno del botón
[ ] Los enlaces se distinguen del texto de cuerpo por algo más que el color (el subrayado funciona)
[ ] Los verdes brillantes aparecen solo sobre fondos oscuros o como decoración
[ ] No hay más de un color de acento aparte del verde
[ ] Las secciones oscuras usan sus propios pares probados, no los reciclados del modo claro
[ ] La paleta está guardada como tokens con nombre para poder cambiarla en un solo lugar

Si no tienes claro cuántos colores necesita un sitio en total, la guía de esquemas de color para webs cubre lo básico, y la entrada del glosario sobre paleta de colores define los términos usados aquí.

Cómo aplicar una paleta verde en un sitio real

Cuando tengas tus códigos hex, necesitas un lugar donde aplicarlos. El plan gratuito de We.Inc te permite publicar hasta tres sitios a partir de plantillas listas para usar; el constructor con IA que genera un sitio a partir de un prompt empieza en el plan Starter, a $20 al mes. Puedes registrarte aquí y pegar los hex de fondo, texto y botón en los estilos del sitio, y luego ejecutar las mismas comprobaciones de contraste en las páginas publicadas.

Empieza gratis · Sin tarjeta de crédito

Umair Ali Sadaqat

Fundador de We.Inc

Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.

¿Listo para crear algo grande?

Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.