Cores de Site Verde: 6 Paletas com Códigos Hex

Paletas de cores verdes para site com códigos hex, pares de texto com contraste testado e usos, para escolher um verde legível que combine com sua marca.

Perguntas frequentes

Qual é o melhor verde para um site?

Não existe um único verde ideal, mas um verde profundo e levemente dessaturado, como #166534 ou #2D6A4F, é o ponto de partida mais seguro. Os dois passam no limite de texto WCAG AA de 4,5:1 contra o branco (7,13:1 e 6,39:1), então funcionam para botões, links e títulos. Verdes vibrantes como #22C55E falham contra o branco (2,28:1) e são mais indicados para ícones ou fundos escuros.

Quais cores combinam com verde em um site?

Tons off-white e creme (#F6F4EC), verdes quase pretos (#081C15) e um único acento quente, como âmbar ou terracota, combinam bem. Mantenha os neutros com um toque de verde em vez de cinza puro para que a página fique coesa, e limite o acento a uma única cor de ação.

O verde é acessível para texto?

Os verdes escuros são; os claros e médios muitas vezes não. O WCAG 2 AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface. Teste cada par em vez de julgar a olho, porque verdes de tom médio como #40916C (3,83:1 sobre branco) ficam na faixa em que só passam para texto grande.

O que o verde comunica no design de sites?

O verde é mais associado a natureza, crescimento, saúde, sustentabilidade e dinheiro, e por isso aparece tanto em sites de bem-estar, finanças, energia e atividades ao ar livre. O significado muda conforme o tom: verdes profundos de floresta passam solidez e calma, enquanto o verde-limão transmite energia e modernidade. Trate isso como convenções, não garantias, e teste com o seu próprio público.

Devo usar verde nos botões de call to action?

Pode, desde que o botão se destaque no restante da página e o texto dele passe no contraste. Um botão verde escuro com texto branco funciona em páginas claras. Em uma página predominantemente verde, um botão com acento quente costuma se destacar melhor. Veja nosso guia sobre esquemas de cores que favorecem a conversão para decidir.

Preciso de uma paleta verde para modo escuro?

Não é obrigatório, mas fundos verde-escuros já são uma escolha de design muito popular por si só. Se você oferecer um modo escuro, não reaproveite simplesmente a paleta clara: verdes vibrantes que falham no branco costumam funcionar bem sobre verde quase preto, por exemplo #22C55E sobre #052E16 resulta em 6,54:1.

Resposta rápida: Para um site verde, use um verde profundo como #166534 ou #2D6A4F em botões, links e títulos, um off-white com leve tom, como #F6F4EC ou #F0FDF4, no fundo, e reserve verdes vibrantes como #22C55E para fundos escuros ou decoração. Verdes escuros sobre fundos claros passam no limite de texto WCAG AA de 4,5:1. Verdes vibrantes sobre branco não passam (#22C55E sobre branco é 2,28:1).

Abaixo estão seis paletas verdes com valores hex, taxas de contraste medidas e o tipo de site que cada uma atende. Todas as taxas foram calculadas com a fórmula de luminância relativa do WCAG, e você pode verificar qualquer par no verificador de contraste de cores.

Por que o verde é complicado nas telas

O verde fica no meio da faixa de luminância. Um verde médio parece vibrante, mas contra o branco costuma ser claro demais para texto, e contra o preto costuma ser escuro demais. Por isso um verde que fica ótimo em um logotipo pode falhar como cor de botão.

A regra prática: escolha o verde pela taxa de contraste, não pela aparência na amostra de cor. Para texto normal, busque 4,5:1 ou mais. Para texto grande (cerca de 24px regular ou 19px negrito ou mais) e para componentes de interface como bordas de campos e ícones, 3:1 é o mínimo.

Seis paletas verdes para site com códigos hex

Cada paleta lista um fundo, uma cor de texto, um acento para botões ou links e a taxa de contraste do par que importa.

1. Floresta e creme (editorial, ar livre, gastronomia)

Função	Hex	Par e taxa
Fundo	#F6F4EC
Texto e títulos	#1B4332	sobre o fundo: 10,06:1
Botão / link	#2D6A4F	texto branco sobre ele: 6,39:1
Painel suave	#95D5B2	texto #1B4332 sobre ele: 6,56:1

Calorosa, tranquila e legível. O fundo creme evita o aspecto clínico. Boa para restaurantes, lojas de produtos da fazenda, viagens e sites de conteúdo longo.

2. Menta fresca (bem-estar, clínicas, conteúdo de saúde)

Função	Hex	Par e taxa
Fundo	#F0FDF4
Texto e títulos	#14532D	sobre o fundo: 8,70:1
Botão	#15803D	texto branco sobre ele: 5,02:1
Faixa escura	#052E16	texto #DCFCE7 sobre ela: 13,57:1

Leve e limpa. O verde do botão está apenas um pouco acima do AA, então mantenha os rótulos dos botões em peso normal ou mais forte e evite colocá-lo sobre painéis coloridos.

3. Sálvia e oliva (estúdios, interiores, produtos artesanais)

Função	Hex	Par e taxa
Fundo	#E9F5DB
Texto e títulos	#31572C	sobre o fundo: 7,33:1
Botão	#4F772D	texto branco sobre ele: 5,24:1
Destaque	#90A955	texto #132A13 sobre ele: 5,84:1

Uma paleta suave e terrosa. Funciona bem para portfólios e marcas boutique que querem verde sem exagero.

4. Tema escuro verde profundo (fintech, SaaS, premium)

Função	Hex	Par e taxa
Fundo	#081C15
Texto	#B7E4C7	sobre o fundo: 12,58:1
Acento / links	#40916C	sobre o fundo: 4,62:1
Card	#1B4332	texto #95D5B2 sobre ele: 6,56:1

Fundos escuros permitem que verdes médios funcionem como acentos. Note que #40916C passa sobre #081C15, mas falha sobre branco (3,83:1), então não o reutilize em uma seção clara.

5. Verde-limão neon sobre verde escuro (eventos, criadores, marcas jovens)

Função	Hex	Par e taxa
Fundo	#1A2E05
Título / botão	#A3E635	sobre o fundo: 9,69:1
Outro vibrante	#22C55E	sobre #052E16: 6,54:1

Muita energia e ótima legibilidade, porque o limão claro fica sobre uma base escura. Use com moderação: uma página inteira em limão cansa a vista rapidamente.

6. Verde-azulado (SaaS, health tech, sustentabilidade)

Função	Hex	Par e taxa
Fundo	#CCFBF1
Texto e títulos	#134E4A	sobre o fundo: 8,41:1
Botão	#0F766E	texto branco sobre ele: 5,47:1

Tende ao azul-esverdeado, o que soa mais técnico e menos "natureza". Boa escolha quando você quer verde sem o clima orgânico.

Tons de verde que falham e o que usar no lugar

Falha	Par	Taxa	Troque por
Botão verde vibrante	#22C55E com texto branco	2,28:1	#15803D com texto branco (5,02:1)
Link verde-limão sobre branco	#65A30D sobre branco	3,09:1	#4D7C0F sobre branco (4,99:1)
Texto de corpo em verde médio	#40916C sobre branco	3,83:1	#2D6A4F sobre branco (6,39:1)

Os de tom médio ainda passam no limite de 3:1, então são aceitáveis para títulos grandes, ícones e bordas, mas não para parágrafos ou links pequenos. Para entender melhor o que dá errado, veja exemplos de mau contraste de cores e, para combinações mais fortes em geral, o guia de paletas de cores de alto contraste.

Como montar sua própria paleta verde, passo a passo

Defina primeiro a função do verde. Ele será a cor da marca, a cor de ação ou apenas um acento? Verdes só de marca podem ter qualquer tom. Verdes de ação precisam passar no contraste.
Escolha uma âncora escura. Comece com um verde entre #14532D e #2D6A4F. Ele será a cor de títulos, links e botões sobre fundos claros.
Dê um tom ao fundo. Use um verde muito claro ou um creme quente em vez de branco puro, por exemplo #F0FDF4 ou #F6F4EC. Confira o contraste do texto de novo depois de aplicar o tom.
Adicione um acento que não seja verde. Âmbar ou terracota sobre o verde separam melhor os botões em páginas com muito verde. Verifique o contraste do rótulo: por exemplo, texto #92400E sobre #FEF3C7 resulta em 6,37:1.
Teste todos os pares de texto sobre fundo. Passe títulos, corpo, links, botões e placeholders por um verificador. Qualquer valor abaixo de 4,5:1 em tamanho de corpo precisa de um tom mais escuro ou mais claro.
Confira os estados de hover e desabilitado. Os tons de hover costumam escorregar para a zona de reprovação.
Salve a paleta como tokens nomeados. Usar nomes de variáveis como brand-900, brand-700 e brand-100 faz com que mudanças futuras sejam edições de uma linha. Nosso guia de cores do Tailwind CSS mostra a ideia de escala de tons, e vários dos hex acima vêm desse estilo de escala.

Qual verde para cada tipo de site

Sustentabilidade, energia, ONGs: floresta e creme, ou sálvia. Exemplos reais desse clima estão no nosso modelo Greenfield Renewables.
Saúde e bem-estar: menta fresca ou verde-azulado.
Finanças e SaaS: tema escuro verde profundo, com um único acento vibrante.
Gastronomia, fazenda, jardim: floresta e creme com um acento quente.
Páginas de criadores e eventos: verde-limão neon sobre verde escuro, restrito a títulos e um botão.

Checklist para copiar antes de publicar

[ ] O texto do corpo tem pelo menos 4,5:1 contra o fundo
[ ] Textos grandes e ícones têm pelo menos 3:1
[ ] Os rótulos dos botões passam 4,5:1 contra o preenchimento do botão
[ ] Os links se distinguem do texto do corpo por mais do que só a cor (sublinhado funciona)
[ ] Verdes vibrantes aparecem apenas em fundos escuros ou como decoração
[ ] Não há mais de uma cor de acento além do verde
[ ] Seções escuras usam seus próprios pares testados, não os reaproveitados do modo claro
[ ] A paleta está salva como tokens nomeados para ser alterada em um só lugar

Se você não tem certeza de quantas cores um site precisa no total, o guia de esquemas de cores para sites cobre o básico, e o verbete do glossário sobre paleta de cores define os termos usados aqui.

Aplicando uma paleta verde em um site de verdade

Com os códigos hex em mãos, você precisa de um lugar para aplicá-los. O plano gratuito da We.Inc permite publicar até três sites a partir de modelos prontos; o construtor com IA que cria um site a partir de um prompt começa no plano Starter, por $20 por mês. Você pode se cadastrar aqui e colar os hex de fundo, texto e botão nos estilos do site, e depois rodar as mesmas verificações de contraste nas páginas publicadas.

Comece grátis · Sem cartão de crédito

Umair Ali Sadaqat

Fundador da We.Inc

Umair é o fundador da We.Inc. Ele escreve sobre criação de sites com IA, agências e o negócio de administrar um estúdio web.

Pronto para criar algo incrível?

Junte-se a 15,000+ empresas que usam o We.Inc para lançar, crescer e automatizar, tudo em uma plataforma.