Esquema de cores para site: como escolher as cores

Um bom esquema de cores para site não é um mural de inspiração com cinco cores favoritas. É uma lista curta de papéis, cada um preenchido por uma cor: o fundo da página, as superfícies elevadas, o texto do corpo, o texto mais discreto, as bordas, um destaque para ações e vermelho, âmbar e verde para status. Escolha primeiro o destaque da marca, monte neutros calmos ao redor dele, confira o contraste de cada par de texto e depois guarde o resultado como variáveis CSS para que o site inteiro use os mesmos valores.

Os papéis de que todo site precisa

Como escolher as cores de um site

1. 1

   Comece com um destaque

   A cor da sua marca, ou a que você quer que as pessoas associem a você. Se não tem uma, como escolher as cores da marca ajuda.

2. 2

   Incline os neutros na direção dele

   Cinzas com um toque do matiz do destaque parecem aparentados com ele. Uma marca azul-petróleo ganha cinzas frios, levemente azulados; uma marca terracota ganha cinzas quentes e cremosos.

3. 3

   Decida: claro, escuro ou os dois

   Escolha o tema que a maioria dos visitantes verá primeiro e desenhe-o por completo antes de começar o outro.

4. 4

   Confira cada par de texto

   Texto sobre fundo, texto sobre superfície, texto suave sobre os dois, branco sobre o botão de destaque. Corrija o que ficar abaixo de 4,5:1.

5. 5

   Aplique 60, 30, 10

   Mais ou menos 60% de fundo, 30% de superfícies e texto, 10% de destaque. A regra 60 30 10 explica o equilíbrio.

Três paletas de cores para site como ponto de partida

Regras de contraste que mantêm o site legível

As diretrizes de contraste da WCAG definem o mínimo: 4,5:1 para texto normal, 3:1 para texto grande (cerca de 24 px, ou 19 px em negrito) e 3:1 para componentes de interface, como bordas de campos e ícones que carregam significado. O verificador de contraste da WebAIM testa qualquer par. Nosso guia de contraste de cores trata dos motivos e dos casos-limite.

Como codificar seu esquema de cores como tokens

Guarde cada papel uma única vez como propriedade personalizada do CSS e use só essas variáveis nos estilos. Assim, um tema escuro, uma campanha sazonal ou uma mudança de marca é a alteração de um bloco de valores, e não uma busca por todos os arquivos. Essa é a ideia central dos tokens de design.

:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }

O modo escuro é um esquema próprio

Inverter uma paleta clara raramente funciona. Destaques saturados brilham demais sobre o preto, as sombras desaparecem e o texto branco puro causa ofuscamento. Monte o modo escuro como um segundo conjunto de valores: um fundo quase preto com um toque de matiz, superfícies que clareiam conforme sobem, texto mais suave e um destaque clareado até atingir o contraste. Design de modo escuro vai mais a fundo.

Onde a cor da marca vai além dos botões

Se o destaque é usado só em botões, o site pode parecer genérico. A resposta não é mais destaque em todo lugar, mas um lugar em que a marca pode ser expressiva: o topo, uma faixa de recursos ou o rodapé. Um gradiente rico na família da marca funciona bem ali, enquanto o resto da página fica calmo e legível.

Um Mark do Gradiently pode ser essa camada expressiva: um fundo que ninguém mais tem, que escolhe uma cor de texto da própria paleta para cada linha, de modo que os títulos continuem legíveis. Para saber mais sobre combinações, veja harmonia de cores e design de seção de topo.