El verde es un tono profundo y clásico que encarna la naturaleza y la vitalidad. Se encuentra justo entre azul y amarillo en el círculo cromático, un matiz saturado por excelencia, sin inclinarse hacia tonos claros de lima ni oscuros de bosque. Es un color ideal para transmitir crecimiento, estabilidad y la riqueza del mundo natural, convirtiéndolo en una opción preferida en diseños que buscan inspirar y rejuvenecer.
El verde se define por los siguientes códigos y valores de color para asegurar la consistencia en diversas plataformas y dispositivos digitales.
- Código HEX: #008000
- Valor RGB: 0% rojo, 50.2% verde y 0% azul
La accesibilidad juega un papel clave en la elección de colores en el diseño UX y UI. La comunidad de Figma ofrece plugins para ayudarte a cumplir con las Web Content Accessibility Guidelines.
El verde ofrece un amplio espectro, desde la vibrante frescura de la lima hasta la calmante profundidad del verde bosque. Esta versatilidad te permite aprovechar sus fortalezas estratégicamente:
- Crea una conexión natural. La asociación inherente del verde con la naturaleza lo hace ideal para marcas ecológicas o interfaces relacionadas con plantas y bienestar.
- Evoca armonía y equilibrio. Los verdes más claros promueven una sensación de calma y tranquilidad, perfectos para aplicaciones de meditación o experiencias enfocadas en la relajación.
- Señala crecimiento y éxito. Los verdes más claros también pueden representar nuevos comienzos y crecimiento, siendo una buena opción para barras de progreso o mensajes de confirmación. (Algunos sitios de comercio electrónico usan barras de progreso verdes para representar la confirmación de pedidos o transacciones exitosas.)
- Destaca elementos importantes. Ciertos tonos de verde pueden sobresalir sin abrumar al usuario. Úsalos para botones de llamada a la acción o elementos de navegación primaria para atraer la atención mientras mantienes una estética limpia.
Ten en cuenta que el color y su significado pueden variar según la cultura y el contexto. Si diseñas para una audiencia internacional, investiga cómo se perciben los colores en cada país.
Para variaciones dentro del mismo espectro verde, considera:
- Esmeralda (#006742) encarna la rica y vívida esencia de la gema, ofreciendo un matiz más luminoso y ligeramente más azulado que captura el espíritu del verde.
- Verde Kelly (#4CBB17) es un verde vibrante y puro que comparte el atractivo clásico del verde con un carácter ligeramente más intenso y animado.
- Verde bosque (#2E6F40) presenta un tono más profundo y sobrio, evocando el denso follaje de un dosel forestal y encarnando la tranquilidad de la naturaleza.
- Verde mar (#2E8B57) mezcla verde con un toque de azul, creando un matiz más suave y apagado que refleja las cualidades serenas y calmantes del mar.
Para complementar los tonos naturales del verde, considera emparejarlo con:
- Crema (#FDFBD4) proporciona un contraste ligero y aireado, destacando la riqueza del verde con su presencia suave y reconfortante.
- Naranja quemado (#BE5103) introduce calidez y profundidad, creando una paleta armoniosa y terrosa que realza el atractivo natural del verde.
- Azul profundo (#0000CD) ofrece un contraste llamativo, resaltando la energía vibrante del verde con su profundidad audaz y profunda.
- Rosa empolvado (#DCAE96) añade un toque de suavidad y feminidad, combinando dulcemente con el verde para un aspecto delicado y equilibrado.
- Marrón rico (#654321) ancla la paleta con sus tonos terrosos y robustos, complementando la esencia natural del verde para un ambiente acogedor e invitante.
Otros colores que vale la pena considerar incluyen gris pizarra para un fondo moderno y neutral, lavanda para un toque suave y contrastante, y amarillo para un contraste brillante y alegre que evoca la vitalidad de la primavera.
Aunque el verde es notablemente adaptable, ciertas combinaciones pueden resultar menos armoniosas:
- Rosa neón (#FF69B4) puede ser excesivamente vibrante, potencialmente chocando con la naturaleza calmante del verde al crear un contraste visualmente discordante.
- Rojo brillante (#FF0000), aunque una combinación clásica navideña, puede sentirse demasiado audaz y abrumadora, restando calma natural al verde.
- Morado oscuro (#800080), aunque rico y regio, podría competir demasiado con el verde, llevando a una paleta que se siente excesivamente saturada y menos cohesiva.
- Azul eléctrico (#00F0FF), con su intensa vibración, podría eclipsar al verde, creando una paleta que carece de armonía y equilibrio.
- Amarillo brillante (#FFFF00), aunque un complemento natural en algunos contextos, puede ser demasiado fuerte y podría opacar la sutileza de ciertos tonos de verde, llevando a un aspecto menos sofisticado.
El verde simboliza crecimiento, renovación y la vida misma. Como el color más dominante de la naturaleza, encarna el mundo natural, representando fertilidad, frescura y salud ambiental. Sugiere estabilidad y resistencia, destacando la vitalidad de la tierra y el ciclo de la vida.
En la psicología del color, el verde se asocia con el equilibrio y la armonía. Tiene un efecto calmante, reduciendo el estrés y fomentando una sensación de paz y relajación. El verde fomenta sentimientos de seguridad, protección y esperanza, promoviendo el bienestar físico y emocional. Aumenta la creatividad y la productividad, haciéndolo perfecto para espacios que buscan calmar y energizar.
En el diseño de UI/UX, el verde puede crear un entorno digital relajado y acogedor, fomentando la participación y significando acciones positivas, como transacciones exitosas o mensajes de confirmación. Su versatilidad lo hace adecuado para diversas aplicaciones, desde invocar lujo y exclusividad con tonos más oscuros hasta promover diversión y vitalidad con matices más claros.
En el antiguo Egipto, el verde representaba fertilidad y nueva vida, adornando representaciones de Osiris, el dios de la vegetación. De manera similar, los romanos vinculaban el verde con la victoria y la primavera, usando laureles verdes para sus generales triunfantes.
Durante la Edad Media, el verde tenía un significado dual. Simbolizaba tanto el amor cortés como, por el contrario, la envidia y la enfermedad. El Renacimiento marcó un punto de inflexión. El desarrollo de pigmentos verdes estables permitió a los artistas capturar los vibrantes matices de la naturaleza con mayor precisión, y el verde se asoció con la armonía y el estatus social debido a la rareza y el costo de estos nuevos tintes.
Para los siglos XVIII y XIX, la invención de tintes sintéticos hizo que el verde fuera más accesible, influyendo en la moda y el diseño de interiores. A finales del siglo XIX, el verde adquirió un nuevo simbolismo (ambientalismo), reflejando su conexión histórica con la vida y el crecimiento.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Green Gables
Avant-Garden
Green Goddess
Verificador de contraste
Contraste 5,14
- Texto grande
#008000
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Aprobado | Desaprobado | |
Aprobado | Aprobado | |
Aprobado | Aprobado |
Contraste 4,09
- Texto grande
#008000
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Aprobado | Desaprobado | |
Aprobado | Desaprobado |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #008000, también conocido como verde, tiene valores RGB de R:0, G:128, B:0 y valores CMYK de C:100, M:0, Y:100, K:50.
| VALUE | CSS | |
|---|---|---|
| HEX | #008000 | #008000 |
| RGB DECIMAL | 0, 128, 0 | RGB(0,128,0) |
| RGB PERCENTAGE | 0.0, 50.2, 0.0 | RGB(0.0%,50.2%,0.0%) |
| CMYK | 100, 0, 100, 50 | |
| HSL | HSL(120.0, 100.0%, 25.1%) | HSL(120.0, 100.0%, 25.1%) |
| HSV (OR HSB) | 120.0°, 100.0, 50.2 | |
| WEB SAFE | #01530 | #01530 |
| BINARY | 00000000, 10000000, 00000000 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.502, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.502, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFF008000) |
