El verde claro es un tono de matiz frío entre el turquesa y el verde en la rueda de colores. Sus cualidades refrescantes y calmantes provienen de su influencia verde y sutilmente azul, lo que crea una sensación de estabilidad, paz y rejuvenecimiento.
El verde claro se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #88E788
- Valor RGB: 53.3% rojo, 90.6% verde y 53.3% 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.
Aquí hay algunas formas de usar el verde claro en tus diseños:
- Proporcionar retroalimentación visual. El verde claro es el color perfecto para mensajes de éxito o efectos de desplazamiento que indican la finalización de una tarea o meta dentro de una plataforma. Una casilla de verificación, por ejemplo, puede aparecer en verde claro cuando un usuario hace clic en el elemento, promoviendo una sensación de logro.
- Fomentar la acción del usuario. El verde claro tiene una vitalidad que capta la atención sin ser visualmente abrumador. Úsalo para CTAs principales, como botones de “registrarse”, “crear cuenta” o “comprar ahora” para animar a los usuarios a hacer clic.
- Evocar una atmósfera calmante. Incorporar el verde claro en la paleta de colores de una UI puede promover la paz y el bienestar, especialmente para las industrias de salud y bienestar. También funciona bien en aplicaciones de educación y productividad que fomentan un ambiente tranquilo y enfocado.
Ten en cuenta que el color y su significado pueden cambiar de cultura a cultura, 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 refrescante que el verde claro, considera:
- Verde jade (#00BB77) tiene una apariencia más rica, inclinándose más hacia la región azul de la rueda de colores.
- Verde pastel (#80EF80) comparte un tono similar con un poco más de vitalidad.
- Verde menta (#ADEBB3) aporta un toque más suave y ligero para un ambiente primaveral.
- Celadón (#A8DCAB) aparece más apagado con sutiles matices grises.
Para complementar el verde claro, considera emparejarlo con:
- Orquídea (#ED80E9) complementa el verde claro, ofreciendo una combinación de colores dinámica pero equilibrada.
- Blanco (#FFFFFF) crea un aspecto limpio y moderno que permite que el verde claro destaque.
- Amarillo claro (#FFFFC5) ofrece un contraste sutil para una combinación de colores alegre.
- Salmón (#FF7E70) añade energía a la naturaleza rejuvenecedora del verde claro.
- Azul brumoso (#B5C7EB) contrasta el verde claro con un complemento calmante.
Otros colores que vale la pena considerar incluyen el verde oscuro para una combinación cohesiva y natural, azul marino para un ambiente costero, y gris claro para un esquema de color simple pero sofisticado.
Aunque el verde claro es fresco, puede chocar con:
- Verde lima (#89F336) tiene una vitalidad que puede opacar la sensación aireada del verde claro.
- Rosa neón (#FF13F0) crea un contraste extremo, interrumpiendo la energía calmante del verde claro.
- Naranja oscuro (#C76E00) tiene una calidez que puede parecer turbia junto a la frescura del verde claro.
- Púrpura neón (#8A00C4) puede crear un contraste discordante y desequilibrado junto al verde claro.
El verde claro simboliza nuevos comienzos, crecimiento y optimismo. También lleva connotaciones de paz y estabilidad.
En la psicología del color, el verde claro evoca sentimientos de relajación y rejuvenecimiento. Su tono suave también promueve una sensación de esperanza, elevando el ánimo y fomentando un nuevo comienzo.
En el diseño de UI, el verde claro proporciona suficiente contraste para captar la atención del usuario sin ser visualmente abrumador. Esto lo convierte en un tono ideal para CTAs principales o para proporcionar retroalimentación visual positiva.
Los pigmentos de verde claro se han utilizado a lo largo de la historia, utilizando minerales naturales como la malaquita, el cardenillo y materiales de origen vegetal para producir el tono. Muchos creen que el primer uso registrado del verde claro como un color distintivo fue tan temprano como el año 700 d.C.
A lo largo de la historia, el verde claro ha sido un símbolo de crecimiento y regeneración. En la era moderna, se ha asociado fuertemente con la naturaleza, la sostenibilidad y el ambientalismo. Hoy en día, los tonos de verde claro se utilizan en una variedad de aplicaciones, incluyendo el diseño de UI, el diseño gráfico, el arte moderno y la moda.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Siempreverde
Flores de primavera
Nuevo comienzo
Comprobador de contraste
Contraste 1,52
- Texto largo
#88E788
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Contraste 13,83
- Texto largo
#88E788
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Aprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #88e788, también llamado Verde claro, tiene valores RGB de R:136, G:231, B:136 y valores CMYK de C:41, M:0, Y:41, K:9.
| VALUE | CSS | |
|---|---|---|
| HEX | #88e788 | #88e788 |
| RGB DECIMAL | 136, 231, 136 | RGB(136,231,136) |
| RGB PERCENTAGE | 53.3, 90.6, 53.3 | RGB(53.3%,90.6%,53.3%) |
| CMYK | 41, 0, 41, 9 | |
| HSL | HSL(120.0, 66.4%, 72.0%) | HSL(120.0, 66.4%, 72.0%) |
| HSV (OR HSB) | 120.0°, 41.1, 90.6 | |
| WEB SAFE | #153255153 | #153255153 |
| BINARY | 10001000, 11100111, 10001000 | |
| iOS - SwiftUI | Color(red: 0.533, green: 0.906, blue: 0.533) | |
| iOS - UIKit | UIColor(red: 0.533, green: 0.906, blue: 0.533, alpha: 1) | |
| Android - Compose | Color(0xFF88E788) |