# Esquema de cores para site: como escolher as cores

[Canonical HTML page](https://gradiently.design/pt-br/guide/website-color-scheme)

Um site precisa de menos cores do que você imagina, e cada uma precisa de uma função. Dê papéis a elas, confira umas contra as outras e o site inteiro continua consistente enquanto cresce.

## The short version

- Um esquema de cores para site funciona melhor como uma lista curta de papéis: fundo da página, superfície, texto, texto suave, borda, destaque e cores de status.
- A maioria dos sites precisa de um destaque de marca, usado sobretudo em botões e links, com os neutros fazendo o resto do trabalho.
- A WCAG pede uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande e partes da interface, como bordas de campos.
- Guardar as cores como propriedades personalizadas do CSS, ou tokens de design, permite trocar o tema do site inteiro mudando um só conjunto de valores.
- Um tema escuro é um conjunto separado de valores para os mesmos papéis, e não uma inversão do tema claro.

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

| Papel | Usado para | Regra prática |
| --- | --- | --- |
| Fundo | O plano de fundo da página | Levemente tingido, em vez de branco ou preto puro, parece mais suave |
| Superfície | Cartões, painéis, menus | Um degrau mais claro (tema claro) ou ainda mais claro (tema escuro) que o fundo |
| Texto | Títulos e texto do corpo | Contraste muito alto contra o fundo e a superfície |
| Texto suave | Legendas, rótulos, metadados | Ainda com pelo menos 4,5:1 contra o fundo |
| Borda | Divisores e contornos de campos | Divisores decorativos podem ser discretos; bordas de campos precisam de 3:1 |
| Destaque | Botões, links, estados selecionados | A cor da sua marca, usada com parcimônia para significar “aja aqui” |
| Status | Erros, avisos, sucesso | Vermelho, âmbar, verde, ajustados para combinar com o destaque |

Sete papéis cobrem a maioria dos sites. Nomeie as cores pelo papel, não pelo matiz, para que mudar a cor da marca depois seja uma única edição.

## Como escolher as cores de um site

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](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) ajuda.
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. **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. **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. **Aplique 60, 30, 10** Mais ou menos 60% de fundo, 30% de superfícies e texto, 10% de destaque. A [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) explica o equilíbrio.

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

- Fundo: #f7f9fb
- Superfície: #ffffff
- Texto: #14202b
- Texto suave: #52606d
- Borda de campo: #8a96a3
- Destaque azul-petróleo: #0f766e

Clínica calma, tema claro. O texto sobre o fundo tem cerca de 15,7:1, o texto suave 6,1:1, o branco sobre o botão azul-petróleo 5,5:1 e a borda de campo chega a 3:1 sobre o branco.

- Fundo creme: #fbf6ef
- Superfície aveia: #efe4d6
- Texto espresso: #2a1f17
- Texto suave: #635e68
- Destaque terracota: #b4441c

Café aconchegante, tema claro. Espresso sobre creme dá cerca de 15:1; branco sobre terracota, cerca de 5,5:1, então os rótulos dos botões continuam legíveis.

- Fundo noturno: #0f0e17
- Superfície elevada: #1a1926
- Texto: #ecebf3
- Texto suave: #a5a3b8
- Destaque lilás: #a78bfa

Estúdio noturno, tema escuro. Texto em branco-gelo em vez de branco puro reduz o ofuscamento; o destaque lilás tem cerca de 7:1 sobre o fundo, então use texto escuro nos botões lilás.

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

As [diretrizes de contraste da WCAG](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) 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](https://webaim.org/resources/contrastchecker/) testa qualquer par. Nosso [guia de contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) trata dos motivos e dos casos-limite.

### Falhas comuns

- Texto de placeholder em cinza claro como único rótulo
- Texto branco sobre uma cor de marca clara, como amarelo ou azul-céu
- Links que se diferenciam do texto do corpo só pela cor
- Uma borda clara como único contorno de um campo de formulário
- Mensagens de erro mostradas só em vermelho

### Correções

- Rótulos de verdade acima dos campos, texto suave a 4,5:1
- Texto escuro sobre destaques claros, ou um tom mais profundo do destaque
- Sublinhar links no texto do corpo, ou deixá-los em negrito
- Bordas de campo a 3:1 contra o fundo
- Um ícone ou palavras junto com a cor

## 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](https://gradiently.design/pt-br/guide/design-tokens).

```css
: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); }
```

Papéis, não matizes. Repare que `--on-accent` passa de branco para quase preto, porque um botão lilás claro precisa de texto escuro.

## 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](https://gradiently.design/pt-br/guide/dark-mode-design) 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 topo de site em widescreen para uma clínica de fisioterapia, com um título curto sobre um gradiente rico

Uma faixa expressiva em 1920×1080 carrega a marca; o resto do site usa os papéis calmos acima.

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](https://gradiently.design/pt-br/guide/color-harmony) e [design de seção de topo](https://gradiently.design/pt-br/guide/hero-section-design).

## FAQ

### Quantas cores um site deve ter?

Em geral, um destaque de marca, de três a cinco neutros para fundo, superfícies, texto e bordas e três cores de status. Mais de um destaque dificulta saber o que é clicável.

### Como escolher um esquema de cores para o meu site?

Comece pelo destaque da marca, incline os cinzas neutros na direção do matiz dele, decida entre tema claro ou escuro e confira cada par de texto para um contraste de pelo menos 4,5:1.

### Que razão de contraste o texto de um site precisa ter?

A WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande e partes da interface, como bordas de campos.

### O fundo de um site deve ser branco puro?

Não precisa. Um branco levemente tingido costuma parecer mais calmo e deixa os cartões brancos se destacarem como superfícies.

### Como acrescentar modo escuro ao meu esquema de cores?

Defina cada papel de cor como propriedade personalizada do CSS e depois ofereça um segundo conjunto de valores dentro de uma media query `prefers-color-scheme: dark`.