Esquemas de cores para sites: escolher as cores de um site

Um bom esquema de cores para site não é um painel 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 os estados. Escolhe primeiro o destaque da marca, constrói neutros calmos à volta dele, verifica o contraste de cada par de texto e guarda depois o resultado como variáveis CSS para o site inteiro usar os mesmos valores.

Os papéis de que todos os sites precisam

Como escolher as cores de um site

1. 1

   Começa com um destaque

   A cor da tua marca, ou aquela a que queres que te associem. Se não tens uma, o guia como escolher as cores da marca ajuda.

2. 2

   Tinge os neutros na direção dele

   Cinzentos com um toque do tom do destaque parecem aparentados com ele. Uma marca em azul-petróleo recebe cinzentos frios e ligeiramente azulados; uma marca em terracota recebe cinzentos quentes e cremosos.

3. 3

   Decide claro, escuro ou ambos

   Escolhe o tema que a maioria dos visitantes vai ver primeiro e desenha-o por completo antes de começares o outro.

4. 4

   Verifica cada par de texto

   Texto sobre fundo, texto sobre superfície, texto suave sobre ambos, branco sobre o botão de destaque. Corrige tudo o que ficar abaixo de 4,5:1.

5. 5

   Aplica 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 um site legível

As diretrizes de contraste das 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 da interface, como as bordas dos campos e os ícones com significado. O verificador de contraste da WebAIM testa qualquer par. O nosso guia de contraste de cor trata das razões e dos casos-limite.

Codificar o esquema de cores como tokens

Guarda cada papel uma só vez como propriedade personalizada de CSS e usa apenas essas variáveis nos teus 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 ficheiros. Esta é 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 à parte

Inverter uma paleta clara raramente funciona. Os destaques saturados brilham demasiado sobre preto, as sombras desaparecem e o texto branco puro causa encandeamento. Constrói o modo escuro como um segundo conjunto de valores: um fundo quase preto com um toque de tom, superfícies que ficam mais claras à medida que sobem, texto mais suave e um destaque aclarado até atingir o contraste. O guia design de modo escuro aprofunda o tema.

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

Se o destaque só é usado em botões, o site pode parecer genérico. A resposta não é mais destaque em todo o lado, mas um sítio onde a marca se pode expressar: o cabeçalho, uma faixa de funcionalidades ou o rodapé. Um gradiente rico na família da marca funciona bem aí, enquanto o resto da página fica calmo e legível.

Um Mark do Gradiently pode ser essa camada expressiva: um fundo que mais ninguém tem e que escolhe uma cor de letra da sua própria paleta para cada linha, para os títulos se manterem legíveis. Para mais sobre combinações, vê a harmonia de cores e o design de secções de cabeçalho.