Verde-claro é um tom de frio entre turquesa e verde na roda de cores. Suas qualidades refrescantes e calmantes vêm da influência do verde e do sutil azul, criando uma sensação de estabilidade, paz e rejuvenescimento.
Verde-claro é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #88E788
- Valor RGB: 53,3% vermelho, 90,6% verde e 53,3% azul
Considerações de acessibilidade desempenham um papel crucial na escolha de cores no design de UX e UI. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de usar o verde-claro em seus designs:
- Forneça feedback visual. Verde-claro é a cor perfeita para mensagens de sucesso ou efeitos de hover que sinalizam a conclusão de uma tarefa ou objetivo dentro de uma plataforma. Uma caixa de seleção, por exemplo, pode aparecer verde-claro quando um usuário clica no elemento, promovendo uma sensação de realização.
- Incentive a ação do usuário. Verde-claro tem uma vivacidade que captura a atenção sem ser visualmente opressivo. Use-o para CTAs primários, como botões de “inscreva-se”, “criar conta” ou “compre agora” para incentivar os usuários a clicar.
- Evocar uma atmosfera calma. Incorporar verde-claro na paleta de cores de uma UI pode promover paz e bem-estar, especialmente para indústrias de saúde e bem-estar. Também funciona bem em aplicativos de educação e produtividade que promovem um ambiente calmo e focado.
Lembre-se de que a cor e seu significado podem mudar de cultura para cultura — e a qualquer momento. Se você está projetando para um público global, pesquise considerações de cor para suas regiões específicas.
Para variações dentro do mesmo espectro refrescante que o verde-claro, considere:
- Verde-jade (#00BB77) tem uma aparência mais rica, inclinando-se mais para a região azul da roda de cores.
- Verde-pastel (#80EF80) compartilha um tom semelhante com um pouco mais de vivacidade.
- Verde-menta (#ADEBB3) traz um toque mais suave e leve para uma vibração primaveril.
- Celadon (#A8DCAB) aparece mais suave com sutis tons de cinza.
Para complementar o verde-claro, considere combiná-lo com:
- Orquídea (#ED80E9) complementa o verde-claro, oferecendo uma combinação de cores dinâmica e equilibrada.
- Branco (#FFFFFF) cria um visual limpo e moderno que permite que o verde-claro se destaque.
- Amarelo-claro (#FFFFC5) oferece um contraste sutil para uma combinação de cores alegre.
- Salmão (#FF7E70) adiciona energia à natureza revigorante do verde-claro.
- Azul-neblina (#B5C7EB) contrasta com o verde-claro com um complemento calmante.
Outras cores que valem a pena considerar incluem verde-escuro para uma combinação coesa e natural, azul-marinho para uma vibração costeira, e cinza-claro para um esquema de cores simples, mas sofisticado.
Embora o verde-claro seja frio, ele pode entrar em conflito com:
- Verde-limão (#89F336) tem uma vivacidade que pode ofuscar a leveza do verde-claro.
- Rosa-neon (#FF13F0) cria um contraste extremo, perturbando a energia calma do verde-claro.
- Laranja-escuro (#C76E00) tem um calor que pode parecer turvo ao lado da frieza do verde-claro.
- Roxo-neon (#8A00C4) pode criar um contraste chocante e desequilibrado ao lado do verde-claro.
Verde-claro simboliza novos começos, crescimento e otimismo. Também carrega conotações de paz e estabilidade.
Na psicologia das cores, o verde-claro evoca sensações de relaxamento e rejuvenescimento. Seu tom suave também promove uma sensação de esperança, elevando o humor e incentivando um novo começo.
No design de UI, o verde-claro oferece contraste suficiente para capturar a atenção do usuário sem ser visualmente opressivo. Isso o torna um tom ideal para CTAs primários ou para fornecer feedback visual positivo.
Pigmentos de verde-claro foram usados ao longo da história, utilizando minerais naturais como malaquita, verdete e materiais à base de plantas para produzir o tom. Muitos acreditam que o primeiro uso registrado do verde-claro como uma cor distinta foi já em 700 d.C.
Ao longo da história, o verde-claro tem sido um símbolo de crescimento e regeneração. Na era moderna, tem sido fortemente associado à natureza, sustentabilidade e ambientalismo. Hoje, tons de verde-claro são usados em uma variedade de aplicações, incluindo design de UI, design gráfico, arte moderna e moda.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Sempre-viva
Flores da Primavera
Novo Começo
Verificador de contraste
Contraste 1,52
- Texto grande
#88E788
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 13,83
- Texto grande
#88E788
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #88e788, conhecida como Verde-claro, tem valores RGB de R:136, G:231, B:136 e 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) |
