Como escolher a paleta de cores de um site

Por Felipe Silva · Atualizado em 25/09/2026

Para escolher a paleta de cores de um site, comece pela identidade da marca (ou por uma imagem de referência), defina uma cor primária, uma secundária e uma de destaque, monte uma escala de neutros e as cores de estado, distribua tudo com a regra 60-30-10 e só então verifique contraste, daltonismo e modo escuro. O resultado final não é uma lista de cinco HEX bonitos, e sim um pequeno sistema de tokens que cobre fundos, textos, bordas, botões e mensagens.

Este passo a passo usa um exemplo concreto do início ao fim: um site institucional com azul como cor principal. Você pode trocar os valores pelos da sua marca e seguir as mesmas etapas.

1. Parta da marca ou de uma imagem

Se a marca já tem um manual, use as cores oficiais como ponto de partida e anote os códigos exatos. Se ela ainda não existe ou tem só um logotipo, escolha uma referência visual que represente o tom desejado: uma foto do produto, do ambiente, um moodboard.

• Com uma imagem em mãos, use o extrator de cores para obter as cores dominantes em HEX. Ele ajuda a sair do “acho que é um azul meio esverdeado” para um valor concreto.
• Com uma cor-base definida, gere combinações no gerador de paletas, testando esquemas análogos, complementares ou triádicos.

Nesta etapa, pense também na personalidade da marca. O guia de psicologia das cores mostra por que a adequação à marca e ao público pesa mais do que listas de significados.

2. Defina a primária, a secundária e a de destaque

Três papéis bastam para a maioria dos sites:

A primária desse exemplo tem razão de contraste de 6,7:1 com o branco, então funciona como cor de texto de link e de fundo de botão com texto branco. A secundária, um verde-azulado escuro, chega a 5,47:1. Já o laranja de destaque tem só 2,8:1 com o branco: ele serve como fundo de botão com texto escuro (#0F172A sobre #F97316 dá cerca de 6,4:1), mas não como cor de texto sobre fundo claro.

A cor de destaque deve ser rara. Se ela aparecer em todo lugar, deixa de chamar atenção.

3. Monte os neutros e as cores semânticas

Na maior parte de um site, o que o visitante vê são neutros: fundo, texto, bordas, divisórias. Em vez de cinzas puros, use cinzas levemente tingidos com o matiz da primária. Eles parecem mais harmônicos e menos “sem vida”. Uma escala de cinzas azulados de exemplo:

• #F8FAFC: fundo da página
• #E2E8F0: divisórias e fundos de cartões
• #64748B: texto secundário e bordas de campos (4,76:1 no branco)
• #334155: texto de apoio
• #0F172A: texto principal (17,85:1 no branco)

As cores semânticas comunicam estado e precisam ser consistentes em todo o site:

Repare que os tons mais vivos e populares, como um verde #16A34A (3,3:1) ou um amarelo-alaranjado #D97706 (3,19:1), não alcançam 4,5:1 com o branco. Eles podem aparecer em ícones grandes ou fundos, mas o texto precisa do tom mais escuro.

Fundos suaves para mensagens

Alertas e mensagens de formulário costumam combinar um fundo bem claro com texto e ícone no tom escuro do mesmo estado. Para informação, por exemplo, um fundo #EFF6FF com texto #1D4ED8 funciona bem. Defina essas duplas uma vez, para cada estado, e reutilize em todo o site: assim, um alerta de erro sempre terá a mesma aparência, esteja no checkout ou na página de contato.

4. Aplique a regra 60-30-10 e crie escalas

A regra 60-30-10, herdada da decoração de interiores, é um ponto de partida para distribuir o peso visual:

• 60% para a cor dominante, geralmente os neutros claros do fundo;
• 30% para a cor secundária ou a primária em áreas de apoio, como cabeçalho, rodapé e cartões;
• 10% para o destaque, nos botões e elementos que precisam de atenção.

Não é uma medida exata de pixels, e sim um lembrete de hierarquia: poucas cores fortes, muito espaço neutro.

No exemplo, isso se traduz em fundo #F8FAFC e cartões brancos ocupando a maior parte da tela, o azul #1D4ED8 no cabeçalho, nos links e nos botões principais, e o laranja #F97316 apenas no botão “Solicitar orçamento”. Em um painel administrativo, com muita informação, a proporção de neutros pode subir ainda mais; em uma landing page de campanha, a cor da marca pode ocupar mais espaço.

Escalas de 50 a 900

Cada cor da marca precisa de variações para hover, fundos suaves, bordas e modo escuro. O padrão mais usado é uma escala de 50 (quase branco) a 900 (bem escuro). Para a primária do exemplo:

50 #EFF6FF · 100 #DBEAFE · 200 #BFDBFE · 300 #93C5FD · 400 #60A5FA · 500 #3B82F6 · 600 #2563EB · 700 #1D4ED8 · 800 #1E40AF · 900 #1E3A8A

Você pode gerar os tons claros misturando a cor-base com branco e os escuros misturando com preto (ou com um azul muito escuro, para manter a saturação) no misturador de cores. Depois ajuste à mão: os passos devem parecer visualmente regulares, não matematicamente iguais.

5. Planeje o modo escuro

Modo escuro não é inverter as cores. Uma inversão direta transforma o texto #0F172A em um branco quase puro sobre preto, o que gera brilho excessivo, e deixa as cores da marca saturadas demais sobre o fundo escuro.

• Evite o preto puro. Use um fundo muito escuro e levemente tingido, como #0F172A. Superfícies elevadas (cartões, menus) ficam um pouco mais claras, como #1E293B.
• Evite o branco puro no texto. Um cinza claro como #E2E8F0 tem 14,48:1 sobre #0F172A, mais do que suficiente e mais confortável.
• Reduza a saturação e clareie as cores da marca. O azul #1D4ED8 fica escuro demais sobre fundo escuro; no modo escuro, use o 400 da escala, #60A5FA, que atinge 7,02:1 sobre #0F172A.
• Recalcule os estados. Os tons semânticos também sobem na escala: um verde #4ADE80 ou um vermelho #F87171 funcionam bem sobre #0F172A.

6. Confira contraste e daltonismo

Com a paleta rascunhada, teste cada combinação real de texto e fundo, e não só as cores isoladas. A WCAG pede 4,5:1 para texto normal, 3:1 para texto grande e 3:1 para bordas de campos, ícones e outros componentes de interface. Meça cada par no verificador de contraste.

Em seguida, simule como a interface aparece para pessoas com daltonismo no simulador de daltonismo. Pares como verde de sucesso e vermelho de erro podem ficar muito parecidos em deuteranopia e protanopia, por isso acompanhe a cor com ícones, textos ou padrões. Links no meio do texto merecem o mesmo cuidado: se a única diferença entre o link e o texto ao redor for a cor, mantenha o sublinhado. O guia de contraste e acessibilidade detalha os critérios.

7. Transforme a paleta em tokens CSS

Separe dois níveis: os tokens primitivos, que guardam os valores da escala, e os tokens semânticos, que dizem para que cada cor serve. Os componentes usam só os semânticos; assim, trocar o tema é mudar poucas linhas.

:root {
  /* primitivos */
  --blue-400: #60A5FA;
  --blue-700: #1D4ED8;
  --slate-50: #F8FAFC;
  --slate-200: #E2E8F0;
  --slate-500: #64748B;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --orange-500: #F97316;

  /* semânticos */
  --color-bg: var(--slate-50);
  --color-surface: #FFFFFF;
  --color-text: var(--slate-900);
  --color-text-muted: var(--slate-500);
  --color-primary: var(--blue-700);
  --color-accent: var(--orange-500);
  --color-success: #15803D;
  --color-danger: #B91C1C;
}

.button-primary { background: var(--color-primary); color: #FFFFFF; }

Para o modo escuro, a função light-dark() define os dois valores no mesmo token. Ela exige a propriedade color-scheme:

:root {
  color-scheme: light dark;
  --color-bg: light-dark(#F8FAFC, #0F172A);
  --color-surface: light-dark(#FFFFFF, #1E293B);
  --color-text: light-dark(#0F172A, #E2E8F0);
  --color-primary: light-dark(#1D4ED8, #60A5FA);
}

Se precisar dar suporte a navegadores mais antigos, a alternativa clássica é a media query:

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0F172A;
    --color-surface: #1E293B;
    --color-text: #E2E8F0;
    --color-primary: #60A5FA;
  }
}

Erros comuns

• Cores demais sem papel definido. Se você não sabe explicar para que serve uma cor, ela provavelmente sobra.
• Cinzas neutros puros ao lado de uma marca muito saturada, o que deixa a interface fria e desconexa.
• Bordas de campo quase invisíveis, como #E2E8F0 sobre branco (1,23:1), que reprovam no critério de contraste não textual.
• Texto branco sobre cores claras da marca, como laranja, amarelo ou verde vivo.
• Modo escuro por inversão, com preto puro, branco puro e cores saturadas “vibrando”.
• Valores HEX soltos no código em vez de tokens, o que torna qualquer ajuste de marca um trabalho de busca e substituição.

Próximos passos

Revise sua paleta nesta ordem: marca e referência, papéis das cores, neutros e estados, distribuição 60-30-10 e escalas, modo escuro, contraste e daltonismo, tokens. Para colocar em prática:

• Gere e compare combinações no gerador de paletas.
• Valide cada par de texto e fundo no verificador de contraste.
• Crie as escalas de 50 a 900 no misturador de cores.
• Aprofunde os esquemas no guia de harmonia de cores e veja referências como o azul-marinho e o cinza-chumbo.