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

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

Um site precisa de menos cores do que pensas, e cada uma precisa de uma função. Dá-lhes papéis, verifica-as umas contra as outras e o site inteiro mantém-se coerente à medida que 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 estado.
- A maioria dos sites precisa de um destaque de marca, usado sobretudo em botões e ligações, com os neutros a fazer o resto do trabalho.
- As WCAG pedem 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 as bordas dos campos.
- Guardar as cores como propriedades personalizadas de CSS, ou tokens de design, permite a um site inteiro mudar de tema trocando um só conjunto de valores.
- Um tema escuro é um conjunto de valores à parte para os mesmos papéis, não uma inversão do claro.

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

| Papel | Usado para | Regra prática |
| --- | --- | --- |
| Fundo | O fundo da página | Ligeiramente 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) do que o fundo |
| Texto | Títulos e texto do corpo | Contraste muito alto com o fundo e a superfície |
| Texto suave | Legendas, etiquetas, metadados | Ainda com pelo menos 4,5:1 contra o fundo |
| Borda | Divisórias e contornos de campos | As divisórias decorativas podem ser ténues; as bordas dos campos precisam de 3:1 |
| Destaque | Botões, ligações, estados selecionados | A cor da tua marca, usada com parcimónia para significar “age aqui” |
| Estado | Erros, avisos, sucesso | Vermelho, âmbar, verde, afinados para combinarem com o teu destaque |

Sete papéis cobrem a maioria dos sites. Dá nomes às cores pelo papel e não pelo tom, para mudar a cor da marca mais tarde ser uma só edição.

## Como escolher as cores de um site

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](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors) ajuda.
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. **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. **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. **Aplica 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-pt/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 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 petróleo 5,5:1, e a borda do campo chega mesmo a 3:1 sobre branco.

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

Café acolhedor, tema claro. O expresso sobre creme tem cerca de 15:1; o branco sobre terracota cerca de 5,5:1, por isso as etiquetas 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 quase branco em vez de branco puro reduz o encandeamento; o destaque lilás tem cerca de 7:1 sobre o fundo, por isso usa texto escuro nos botões lilás.

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

As [diretrizes de contraste das 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 da interface, como as bordas dos campos e os ícones com significado. O [verificador de contraste da WebAIM](https://webaim.org/resources/contrastchecker/) testa qualquer par. O nosso [guia de contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) trata das razões e dos casos-limite.

### Falhas comuns

- Texto de exemplo em cinzento claro usado como única etiqueta
- Texto branco sobre uma cor de marca pálida, como amarelo ou azul-céu
- Ligações que só se distinguem do texto do corpo pela cor
- Uma borda pálida como único contorno de um campo de formulário
- Mensagens de erro mostradas só a vermelho

### Correções

- Etiquetas reais acima dos campos, texto suave a 4,5:1
- Texto escuro sobre destaques claros, ou um tom mais profundo do destaque
- Sublinhar as ligações no texto do corpo, ou pô-las a negrito
- Bordas de campo a 3:1 contra o fundo
- Um ícone ou palavras junto à cor

## 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](https://gradiently.design/pt-pt/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 tons. Repara que `--on-accent` passa de branco a quase preto, porque um botão lilás claro precisa de texto escuro.

## 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](https://gradiently.design/pt-pt/guide/dark-mode-design) 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 cabeçalho horizontal de site de uma clínica de fisioterapia com um título curto sobre um gradiente rico

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

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](https://gradiently.design/pt-pt/guide/color-harmony) e o [design de secções de cabeçalho](https://gradiently.design/pt-pt/guide/hero-section-design).

## FAQ

### Quantas cores deve ter um site?

Normalmente um destaque de marca, três a cinco neutros para fundo, superfícies, texto e bordas, e três cores de estado. Mais de um destaque torna mais difícil perceber o que é clicável.

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

Começa pelo destaque da marca, tinge cinzentos neutros na direção do seu tom, decide entre tema claro ou escuro e verifica cada par de texto para um contraste de pelo menos 4,5:1.

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

As WCAG pedem pelo menos 4,5:1 para texto normal e 3:1 para texto grande e partes da interface, como as bordas dos campos.

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

Não tem de ser. Um branco muito ligeiramente tingido costuma parecer mais calmo e deixa os cartões brancos destacarem-se como superfícies.

### Como junto o modo escuro ao meu esquema de cores?

Define cada papel de cor como propriedade personalizada de CSS e depois fornece um segundo conjunto de valores dentro de uma media query `prefers-color-scheme: dark`.