# Paletas de cores escuras: códigos sombrios que continuam legíveis

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

As paletas escuras parecem caras quando feitas de quase pretos com um traço de cor, e baratas quando são preto puro com néon. Aqui ficam seis que acertam, com todos os códigos.

## The short version

- Uma boa paleta de cores escuras assenta num quase preto com um ligeiro tom de cor, e não no #000000 puro.
- O texto numa paleta escura lê-se melhor num branco suave e sujo, que mantém contraste forte sem o brilho ofuscante do branco puro.
- Os acentos em fundos escuros devem ser mais claros e menos saturados do que seriam sobre branco, porque as cores vivas vibram contra o preto.
- As interfaces escuras mostram profundidade tornando as superfícies elevadas ligeiramente mais claras, não acrescentando sombras.
- Cada cor de texto numa paleta escura continua a precisar de passar uma verificação de contraste contra a superfície onde realmente está.

Uma **paleta de cores escuras** que continua legível tem três partes: um fundo quase preto com um toque de cor lá dentro, um branco suave e sujo para o texto e um ou dois acentos mais claros e calmos do que usarias sobre branco. O preto puro com néon saturado parece duro e cansa os olhos. Escuros tingidos com realces suaves parecem deliberados e caros. As seis paletas abaixo seguem essa receita, com códigos hex para copiar e rácios de contraste já verificados.

## Seis paletas de cores escuras com códigos hex

Cada paleta tem os mesmos cinco papéis, da esquerda para a direita: **fundo** (a página), **superfície** (cartões e painéis, um passo mais claro), **profundo** (um tom médio rico para formas e áreas grandes), **acento** (para ligações, botões e realces) e **texto**.

### Tinta da meia-noite

- Fundo #0b0f1a: #0b0f1a
- Superfície #151b2c: #151b2c
- Azul-marinho profundo #2b3a67: #2b3a67
- Pervinca #8fa3d9: #8fa3d9
- Texto #e8e6f0: #e8e6f0

Fria, calma e técnica. O texto sobre o fundo tem 15,5:1; o acento pervinca tem 7,7:1, suficiente para ligações e etiquetas pequenas.

### Noite de floresta

- Fundo #0c1410: #0c1410
- Superfície #15231c: #15231c
- Pinho profundo #2f5d46: #2f5d46
- Salva #9cc5a1: #9cc5a1
- Texto #ece7da: #ece7da

Natural e calma, boa para marcas de bem-estar, ar livre e alimentação. Texto 15,1:1, salva 9,7:1.

### Sangue de boi e cobre

- Fundo #140a0b: #140a0b
- Superfície #241214: #241214
- Sangue de boi #6b1e26: #6b1e26
- Cobre #c9855b: #c9855b
- Texto #f1e6dc: #f1e6dc

Quente e rica, à vontade em cartas de vinhos, teatro e eventos noturnos. Texto 15,9:1, cobre 6,5:1.

### Beringela

- Fundo #120b17: #120b17
- Superfície #1e1326: #1e1326
- Ameixa #4a2a63: #4a2a63
- Orquídea #c79ad8: #c79ad8
- Texto #f3ecf6: #f3ecf6

Criativa e noturna, uma alternativa mais suave ao roxo néon. Texto 16,7:1, orquídea 8,3:1.

### Carvão e brasa

- Fundo #121212: #121212
- Superfície #1e1e1e: #1e1e1e
- Grafite #3a3a3a: #3a3a3a
- Brasa #ff8a3d: #ff8a3d
- Texto #ededed: #ededed

Cinzentos neutros com um acento quente, o clássico das apps e dos painéis. Texto 16:1, brasa 8:1.

### Verde-azulado profundo

- Fundo #071a1c: #071a1c
- Superfície #0f2a2d: #0f2a2d
- Verde-azulado profundo #1f5c5f: #1f5c5f
- Água #66c2b8: #66c2b8
- Texto #e6f2ef: #e6f2ef

Oceânica e composta, adequada a finanças e saúde. Texto 15,6:1, água 8,5:1.

As cores profundas de cada paleta servem para áreas, não para palavras: o azul-marinho sobre o fundo da meia-noite, por exemplo, tem apenas cerca de 1,7:1. Usa-as para formas, ilustrações e fundos atrás de texto nas cores mais claras.

## As mesmas paletas como gradientes escuros

As paletas escuras ganham vida quando a cor profunda brilha a partir do fundo, como a luz numa sala escura. Estes usam apenas os códigos acima, por isso combinam exatamente com as paletas planas. Há mais técnicas em [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) e [gradientes sombrios](https://gradiently.design/pt-pt/guide/moody-gradients).

- Tinta da meia-noite: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Noite de floresta: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Sangue de boi: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Beringela: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Carvão e brasa: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Verde-azulado profundo: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Os gradientes escuros formam mais faixas do que qualquer outro tipo. Acrescenta um pouco de grão e evita a compressão JPEG pesada ao exportar.

## Regras para paletas escuras que se leem bem

### Evita

- O #000000 puro como fundo
- O #ffffff puro em passagens longas de texto
- Acentos totalmente saturados, que parecem vibrar
- Sombras projetadas para mostrar que cartão está por cima
- Tipos finos e leves em tamanhos pequenos

### Faz

- Um quase preto tingido para o matiz da tua marca
- Um branco sujo tingido da mesma forma
- Versões mais claras e suaves das cores de acento
- Superfícies mais claras para elementos elevados
- Pesos regular ou médio, espaçamento ligeiramente mais solto

**Porque não preto puro?** Preto com texto branco puro é o contraste máximo que um ecrã consegue mostrar, 21:1, e em ecrãs brilhantes pode ofuscar, sobretudo em passagens longas. Um quase preto tingido a cerca de 15:1 continua muito acima de todos os limiares de acessibilidade e é muito mais fácil de ler por muito tempo. Dá também à paleta uma temperatura, que o preto puro nunca tem.

**Porque acentos mais calmos?** Um azul ou vermelho saturado que fica bem sobre branco parece brilhar e tremer nas arestas sobre preto. Sobe-lhe a luminosidade e baixa-lhe ligeiramente a saturação, como na pervinca e na salva acima, e ele fica quieto. Verifica todos os acentos que uses para texto com um [verificador de contraste](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

## Como fazer uma paleta escura a partir da cor da tua marca

Não precisas de pedir emprestada uma das paletas acima. Qualquer cor de marca pode tornar-se uma paleta escura mantendo o matiz e mudando só a luminosidade e a saturação. Funciona melhor num formato que separe as duas, como o [HSL](https://gradiently.design/pt-pt/guide/hsl-colors). Aqui, uma cor de marca coral, `#e0525d`, torna-se um conjunto escuro completo.

1. **Fundo: o mesmo matiz, quase sem luz** Mantém o matiz, baixa a saturação para cerca de 30% e a luminosidade para cerca de 7%: `#170c0d`. Lê-se como preto, mas parece quente.
2. **Superfície: um passo acima** Sobe a luminosidade para cerca de 12% e baixa um pouco a saturação: `#261718`. Os cartões e painéis ficam aqui.
3. **Profundo: um tom médio rico para áreas** Uma luminosidade de cerca de 28% dá `#68272d`, um vinho apagado para formas e ilustração, nunca para texto.
4. **Acento: mais claro e mais suave do que a marca** Sobe o coral para cerca de 72% de luminosidade: `#ea868e` chega a 7,6:1 sobre o fundo, enquanto o coral original fica a 5,1:1 e parece mais duro.
5. **Texto: um branco sujo com um traço do matiz** `#f2e9e9` dá 16:1 sobre o fundo e combina discretamente com tudo o resto.

- Fundo #170c0d: #170c0d
- Superfície #261718: #261718
- Vinho profundo #68272d: #68272d
- Coral suave #ea868e: #ea868e
- Texto #f2e9e9: #f2e9e9

Uma paleta escura derivada de um só coral. Todas as cores partilham o matiz, e é por isso que o conjunto parece uma só marca à noite.

## Usar uma paleta escura em CSS

Dá às cores nomes por papel, para os mesmos componentes funcionarem nos temas claro e escuro. O padrão abaixo define a Tinta da meia-noite como tema escuro e deixa a definição do sistema escolher. [Design em modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) trata das decisões mais amplas, como imagens, contornos e gráficos.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

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

O acento muda entre temas: azul-marinho profundo no claro, pervinca no escuro. Uma só cor raramente funciona em ambos.

## Paletas escuras para publicações sociais

Num feed, uma publicação escura destaca-se entre fotografias claras, mas só se as palavras se lerem no tamanho de um telemóvel. Mantém o texto grande, afasta a parte mais clara do fundo do título e dá às palavras a zona mais calma do quadro.

Uma publicação vertical escura para Instagram a anunciar uma abertura tardia de galeria, com texto claro sobre um fundo profundo

Uma publicação escura e sombria em que o texto fica na parte mais calma do fundo e o brilho se mantém longe das palavras.

É aqui que um Mark do Gradiently ajuda: move a sua zona mais calma e de melhor contraste para trás do texto e o auto ink escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, por isso um fundo sombrio nunca engole o título. Para looks escuros de caráter mais rico e premium, vê [paletas de cores de luxo](https://gradiently.design/pt-pt/guide/luxury-color-palettes) e a [estética dark academia](https://gradiently.design/pt-pt/guide/dark-academia-aesthetic).

## FAQ

### Que cores entram numa paleta de cores escuras?

Um quase preto tingido para o fundo, uma cor de superfície ligeiramente mais clara, um tom médio profundo para áreas grandes, um acento mais claro e um branco suave e sujo para o texto.

### Devo usar preto puro no modo escuro?

Normalmente não. Um quase preto como #121212 ou um escuro tingido como #0b0f1a reduz o brilho ofuscante com texto branco e continua a dar contraste muito alto.

### Que cor de texto funciona melhor num fundo escuro?

Um branco suave e sujo como #e8e6f0 ou #ededed. Mantém o contraste a cerca de 15:1 ou mais sem a dureza do branco puro.

### Porque é que as cores vivas parecem erradas num fundo escuro?

As cores saturadas parecem vibrar contra o preto. Usa versões mais claras e ligeiramente menos saturadas para os acentos em fundos escuros.