El verde es un tono profundo y clásico que encarna la naturaleza y la vitalidad. Se sitúa justo entre el azul y el amarillo en el círculo cromático, un matiz saturado por excelencia, que no se inclina ni hacia los tonos claros de lima ni hacia los 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 varias plataformas y dispositivos digitales.
- Código HEX: #008000
- Valor RGB: 0% rojo, 50,2% verde y 0% azul
Las consideraciones de accesibilidad juegan un papel crucial en las elecciones de color de diseño UX y UI. Figma ofrece plugins en la Comunidad para asegurarse de que tus diseños cumplan con las Pautas de Accesibilidad de Contenidos Web.
El verde ofrece un amplio espectro, desde la vibrante frescura de la lima hasta la calma 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 cambiar de una cultura a otra, y en cualquier momento. Si estás diseñando para una audiencia global, investiga las consideraciones de color para tus regiones específicas.
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 azul 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 más sutil, evocando el denso follaje de un dosel forestal y encarnando la tranquilidad de la naturaleza.
- Verde Mar (#2E8B57) mezcla el 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, combinándose 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 demasiado 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.
- Púrpura Oscuro (#800080), aunque rico y regio, podría competir demasiado con el verde, llevando a una paleta que se siente demasiado 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 dominar la sutileza de ciertos tonos de verde, llevando a un aspecto menos sofisticado.
El verde simboliza el crecimiento, la 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 UI/UX, el verde puede crear un entorno digital relajado y acogedor, fomentando el compromiso 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 la fertilidad y la nueva vida, adornando las 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 (el ambientalismo), reflejando su conexión histórica con la vida y el crecimiento.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Green Gables
Avant-Garden
Green Goddess
Comprobador de contraste
Contraste 5,14
- Texto largo
#008000
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Desaprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Contraste 4,09
- Texto largo
#008000
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Aprobar | Desaprobar | |
Aprobar | Desaprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #008000, también llamado 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) |
