Como construir uma paleta de cores verde e azul que não pareça amadora
A combinação mais óbvia de verde e azul é o teal com cyan, e é também a que vejo em 80% dos projetos que chegam mal acabados. A questão não é que as cores sejam ruins por si só. O problema é a saturação. Quando você puxa um verde esmeralda puro ao lado de um azul royal puro, o contraste vibratório acontece e o olho do usuário cansa rápido. O resultado visual depende de como você gerencia a luminância e o tom, não de escolher tons bonitos no picker do Photoshop.
paleta de cores verde e azul para sites e interfaces
O método que eu uso funciona assim: defino primeiro a cor de fundo, escolho uma cor neutra derivada dela com HSL, e só então adiciono o verde e o azul como cores de destaque. Na prática, se o fundo for #0f172a (um azul escuro quase preto), eu pego a mesma matiz, reduzo a saturação para cerca de 15% e a luz para 90% para criar um cinza azulado de texto. Aí sim o verde entra como cor de ação ou destaque, em torno de HSL(160, 60%, 42%), que é um verde-água que ainda mantém contraste suficiente sobre fundos escuros sem parecer neon. Essa sequência inversa — fundo primeiro, depois neutros, depois as cores — evita que o verde e o azul lutem pela atenção. Eles ocupam funções diferentes na hierarquia visual. O azul domina o fundo e estruturas. O verde aparece em botões, ícones de sucesso e CTAs. Isso economiza tempo de revisão porque o contraste já está resolvido antes de você enviar o layout para o testador.
Codificação prática da paleta
Minha paleta base costuma ser essa. Os valores estão em HEX porque é o que todo designer e desenvolvedor consegue usar diretamente no Figma ou no CSS. Azul escuro (fundo principal): #0a1628
Azul médio (cards e superfícies): #1a3a5c Verde-água (destaque primário): #2dd4bf
Verde suave (status e ícones): #34d399 Cinza azulado claro (texto secundário): #94a3b8
👉 Clique no botão abaixo para saber mais sobre o assunto!
Off-white (texto principal): #f1f5f9 Esses seis tons cobrem fundo, superfície, destaque, status, texto e contraste. Não precisa de mais cores. Se o projeto exige um tom adicional, eu entro com um gradiente simples entre o azul médio e o verde-água, em vez de introduzir uma terceira hue. Manter a gama cromática restrita a duas matizes — azul e verde, que são vizinhas no espectro — evita conflito harmônico.
O problema que todo mundo ignora: acessibilidade de contraste
Colocar o verde-água #2dd4bf sobre fundo #0a1628 dá um ratio de aproximadamente 7.2:1, o que passa em WCAG AAA. Mas o verde suave #34d399 sobre o mesmo fundo cai para cerca de 5.8:1. Ainda passa no AA, mas se você adicionar um botão com borda fina ou usar esse verde em texto pequeno, o ratio pode descer para 3.5:1. Nesse ponto o texto já não é legível para quem tem visão reduzida. A correção é simples: ajuste a luz do verde para HSL(160, 55%, 47%) e o ratio sobe para 4.5:1, ou use o verde em elementos maiores, não em microtipografia. Já vi equipes inteiras perderem dias refazendo telas porque o verde ficava bonito no mockup do Figma e invisível no navegador com o modo de alto contraste do Windows ativado. O Figma não simula isso corretamente. Rodar um auditório com a ferramenta WebAIM contrast checker antes de entregar o design resolve esse problema em cinco minutos.
Erros comuns que estragam a paleta
O erro número um é usar verde e azul com a mesma saturação. Se ambos estão em 80% de saturação, eles competem e nenhum deles resolve sua função. Mantenha o azul com saturação alta mas luz baixa, e o verde com saturação média mas luz mais alta. A diferença de luminância é o que separa hierarquia visual de confusão. O erro número dois é adicionar laranja ou amarelo como cor complementar achando que "dá vida". Isso quebra a harmonia análoga que faz a combinação verde-azul funcionar. Uma cor complementária só funciona se o verde e o azul já estiverem equilibrados em proporção de 70-20-10. Na prática, para a maioria dos projetos, fica melhor manter a palette restrita e usar variations de opacidade para criar profundidade.
Quando essa paleta não funciona
Se o seu projeto é para públicos com daltonismo vermelho-esverdeado — cerca de 8% dos homens brancos têm essa deficiência —, o verde e o azul podem se fundir visualmente. Nesses casos, a solução não é trocar as cores, mas adicionar padrões texturizados ou variações de forma aos elementos. Um botão verde com ícone de check interno permanece distinguível mesmo quando a cor é indecifrável. Isso aumenta o tempo de design em cerca de 15% mas elimina retrabalho futuro de acessibilidade. Outro cenário onde a paleta falha completamente é em produtos voltados para o mercado imobiliário ou gastronômico, onde o verde e o azul transmitem frieza e confiança institucional. Um restaurante precisa de calor, não de frio. Para esses casos, a alternativa mais eficiente é partir para uma paleta quente, mantendo apenas o azul como cor de estrutura e usando um vermelho ou terracota como cor de destaque.
O arquivo pronto
Eu hospedo os valores dessa paleta em formato CSS custom properties, JSON e SVG em um repositório público. O link é direto e atualizado toda vez que encontro um novo ajuste de acessibilidade. Para importar no Figma, copie o conteúdo JSON e use o plugin importador de cores. Para desenvolvimento, o arquivo CSS já vem com as variáveis mapeadas para cada função: background, surface, accent, success, text-secondary e text-primary. O arquivo tem 2kb e não depende de frameworks.
