Verde é um tom profundo e clássico que incorpora a natureza e a vitalidade. Ele se posiciona entre o azul e o amarelo na roda de cores—um tom saturado e essencial, sem pender para o limão claro ou os tons escuros de floresta. É uma cor ideal para transmitir crescimento, estabilidade e a riqueza do mundo natural, tornando-se uma escolha frequente em designs que visam inspirar e revigorar.
O verde é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #008000
- Valor RGB: 0% vermelho, 50,2% verde e 0% azul
A escolha de cores no design de UX e UI deve considerar critérios de acessibilidade, que são fundamentais. Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
O verde oferece um vasto espectro, desde a vivacidade refrescante do limão até a profundidade calmante do verde floresta. Essa versatilidade permite que você aproveite suas forças estrategicamente:
- Crie uma conexão natural. A associação inerente do verde com a natureza o torna ideal para marcas ecológicas ou interfaces relacionadas a plantas e bem-estar.
- Evocar harmonia e equilíbrio. Verdes mais claros promovem uma sensação de calma e tranquilidade, perfeitos para aplicativos de meditação ou experiências focadas em relaxamento.
- Sinalizar crescimento e sucesso. Verdes mais claros também podem representar novos começos e crescimento, sendo uma boa escolha para barras de progresso ou mensagens de confirmação. (Alguns sites de e-commerce usam barras de progresso verdes para representar confirmação de pedido ou transações bem-sucedidas.)
- Destacar elementos importantes. Certos tons de verde podem se destacar sem sobrecarregar o usuário. Use-os para botões de chamada para ação ou elementos de navegação primária para chamar a atenção enquanto mantém uma estética limpa.
Dica: Ao projetar para um público global, pesquise o simbolismo da cor em diferentes culturas — o vermelho não significa o mesmo em todos os lugares.
Para variações dentro do mesmo espectro verdejante do verde, considere:
- Esmeralda (#006742) incorpora a essência rica e vívida da pedra preciosa, oferecendo um tom mais luminoso e ligeiramente azulado que captura o espírito do verde.
- Verde Kelly (#4CBB17) é um verde vibrante e puro que compartilha o apelo clássico do verde com um caráter ligeiramente mais intenso e animado.
- Verde Floresta (#2E6F40) apresenta um tom mais profundo e mais suave, ecoando a folhagem densa de um dossel florestal e incorporando a tranquilidade da natureza.
- Verde Mar (#2E8B57) mistura verde com um toque de azul, criando um tom mais suave e sutil que reflete as qualidades serenas e calmantes do mar.
Para complementar os tons naturais do verde, considere combiná-lo com:
- Creme (#FDFBD4) proporciona um contraste leve e arejado, destacando a riqueza do verde com sua presença suave e reconfortante.
- Laranja Queimada (#BE5103) introduz calor e profundidade, criando uma paleta harmoniosa e terrosa que realça o apelo natural do verde.
- Azul Profundo (#0000CD) oferece um contraste marcante, trazendo à tona a energia vibrante do verde com sua profundidade ousada e profunda.
- Rosa Empoeirado (#DCAE96) adiciona um toque de suavidade e feminilidade, combinando docemente com o verde para um visual delicado e equilibrado.
- Marrom Rico (#654321) fundamenta a paleta com seus tons terrosos e robustos, complementando a essência natural do verde para um ambiente acolhedor e convidativo.
Outras cores que valem a pena considerar incluem cinza ardósia para um fundo moderno e neutro, lavanda para um toque suave e contrastante, e amarelo para um contraste brilhante e alegre que evoca a vivacidade da primavera.
Embora o verde seja notavelmente adaptável, certas combinações podem ser menos harmoniosas:
- Rosa Neon (#FF69B4) pode ser excessivamente vibrante, potencialmente chocando com a natureza calmante do verde ao criar um contraste visualmente chocante.
- Vermelho Brilhante (#FF0000), embora uma combinação clássica de Natal, pode parecer muito ousado e avassalador, desviando da calma natural do verde.
- Roxo Escuro (#800080), embora rico e régio, pode competir muito fortemente com o verde, levando a uma paleta que parece excessivamente saturada e menos coesa.
- Azul Elétrico (#00F0FF), com sua vibrância intensa, pode ofuscar o verde, criando uma paleta que carece de harmonia e equilíbrio.
- Amarelo Brilhante (#FFFF00), embora um complemento natural em alguns contextos, pode ser muito forte e pode sobrecarregar a sutileza de certos tons de verde, levando a um visual menos sofisticado.
O verde simboliza crescimento, renovação e a própria vida. Como a cor mais dominante da natureza, ele incorpora o mundo natural, representando fertilidade, frescor e saúde ambiental. Sugere estabilidade e resistência, destacando a vitalidade da terra e o ciclo da vida.
Na psicologia das cores, o verde está associado ao equilíbrio e à harmonia. Tem um efeito calmante, reduzindo o estresse e promovendo uma sensação de paz e relaxamento. O verde incentiva sentimentos de segurança, proteção e esperança, promovendo o bem-estar físico e emocional. Ele estimula a criatividade e a produtividade, tornando-o perfeito para espaços que visam acalmar e energizar.
No design de UI/UX, o verde pode criar um ambiente digital relaxante e acolhedor, incentivando o engajamento e significando ações positivas, como transações bem-sucedidas ou mensagens de confirmação. Sua versatilidade o torna adequado para várias aplicações, desde evocar luxo e exclusividade com tons mais escuros até promover diversão e vitalidade com tons mais claros.
No antigo Egito, o verde representava fertilidade e nova vida, adornando representações de Osíris, o deus da vegetação. Da mesma forma, os romanos associavam o verde à vitória e à primavera, usando louros verdes para seus generais triunfantes.
Durante a Idade Média, o verde tinha um significado duplo. Simbolizava tanto o amor cortês quanto, inversamente, a inveja e a doença. O Renascimento marcou um ponto de virada. O desenvolvimento de pigmentos verdes estáveis permitiu que os artistas capturassem os tons vibrantes da natureza com mais precisão, e o verde passou a ser associado à harmonia e ao status social devido à raridade e ao custo desses novos corantes.
Nos séculos 18 e 19, a invenção de corantes sintéticos tornou o verde mais acessível, influenciando a moda e o design de interiores. No final do século 19, o verde assumiu um novo simbolismo (ambientalismo), refletindo sua conexão histórica com a vida e o crescimento.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Green Gables
Avant-Garden
Green Goddess
Verificador de contraste
Contraste 5,14
- Texto grande
#008000
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Reprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Contraste 4,09
- Texto grande
#008000
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Aprovado | Reprovado | |
Aprovado | Reprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #008000, conhecida como verde, tem valores RGB de R:0, G:128, B:0 e 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) |
