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

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

Paletas escuras parecem caras quando são feitas de quase pretos com um traço de cor, e baratas quando são preto puro com neon. Aqui estão seis que acertam, com todos os códigos.

## The short version

- Uma boa paleta de cores escuras é construída sobre um quase preto com um leve tom de cor, e não sobre #000000 puro.
- O texto numa paleta escura fica mais legível num branco suave, que mantém um contraste forte sem o ofuscamento do branco puro.
- Cores de destaque sobre fundos escuros devem ser mais claras e menos saturadas do que seriam sobre o branco, porque cores vivas vibram contra o preto.
- Interfaces escuras mostram profundidade deixando as superfícies elevadas um pouco mais claras, e não acrescentando sombras.
- Toda cor de texto numa paleta escura ainda precisa passar numa verificação de contraste contra a superfície em que realmente está.

Uma **paleta de cores escuras** que continua legível tem três partes: um fundo quase preto com um toque de cor, um branco suave para o texto e um ou dois destaques mais claros e mais calmos do que você usaria sobre o branco. Preto puro com neon saturado parece duro e cansa a vista. Escuros tingidos com realces suaves parecem deliberados e caros. As seis paletas abaixo seguem essa receita, com códigos hex para copiar e proporções de contraste já conferidas.

## 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** (cards e painéis, um degrau mais claro), **profundo** (uma cor média rica para formas e áreas grandes), **destaque** (para links, botões e realces) e **texto**.

### Tinta da meia-noite

- Fundo #0b0f1a: #0b0f1a
- Superfície #151b2c: #151b2c
- 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 destaque pervinca tem 7,7:1, o bastante para links e rótulos pequenos.

### Floresta à noite

- Fundo #0c1410: #0c1410
- Superfície #15231c: #15231c
- Pinheiro profundo #2f5d46: #2f5d46
- Sálvia #9cc5a1: #9cc5a1
- Texto #ece7da: #ece7da

Natural e silenciosa, boa para marcas de bem-estar, vida ao ar livre e comida. Texto 15,1:1, sálvia 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 vinho, teatro e eventos noturnos. Texto 15,9:1, cobre 6,5:1.

### Berinjela

- 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 neon. 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

Cinzas neutros com um destaque quente, o clássico para apps e dashboards. 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 serena, adequada a finanças e saúde. Texto 15,6:1, água 8,5:1.

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

## As mesmas paletas como gradientes escuros

Paletas escuras ganham vida quando a cor profunda brilha a partir do fundo, como luz num cômodo na penumbra. Estes gradientes usam só os códigos acima, então combinam exatamente com as paletas chapadas. Mais técnicas estão em [fundos com gradiente escuro](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) e [gradientes sombrios](https://gradiently.design/pt-br/guide/moody-gradients).

- Tinta da meia-noite: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Floresta à noite: `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%)`
- Berinjela: `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%)`

Gradientes escuros criam mais faixas do que qualquer outro tipo. Acrescente um pouco de granulação e evite compressão JPEG pesada ao exportar.

## Regras para paletas escuras legíveis

### Evite

- #000000 puro como fundo
- #ffffff puro para trechos longos de texto
- Destaques totalmente saturados, que parecem vibrar
- Sombras projetadas para mostrar qual card está por cima
- Letras finas e leves em tamanhos pequenos

### Faça

- Um quase preto tingido na direção do matiz da sua marca
- Um branco suave tingido do mesmo jeito
- Versões mais claras e suaves das cores de destaque
- Superfícies mais claras para elementos elevados
- Pesos regular ou medium, com espaçamento um pouco mais aberto

**Por que não preto puro?** Preto com texto branco puro é o contraste máximo que uma tela consegue mostrar, 21:1, e em telas muito brilhantes pode ofuscar, principalmente em trechos longos. Um quase preto tingido, por volta de 15:1, continua muito acima de qualquer limite de acessibilidade e é bem mais fácil de ler por bastante tempo. Ele também dá uma temperatura à paleta, coisa que o preto puro nunca tem.

**Por que destaques mais calmos?** Um azul ou vermelho saturado que fica bem sobre o branco parece brilhar e tremer nas bordas sobre o preto. Aumente um pouco a luminosidade e reduza um pouco a saturação, como no pervinca e na sálvia acima, e ele se aquieta. Confira cada destaque que você usa para texto com um [verificador de contraste](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

## Como criar uma paleta escura a partir da cor da sua marca

Você não precisa pegar emprestada uma das paletas acima. Qualquer cor de marca pode virar uma paleta escura mantendo o matiz e mudando só a luminosidade e a saturação. Isso funciona melhor num formato que separa as duas, como o [HSL](https://gradiently.design/pt-br/guide/hsl-colors). Aqui, uma cor de marca coral, `#e0525d`, vira um conjunto escuro completo.

1. **Fundo: mesmo matiz, quase sem luz** Mantenha o matiz, baixe a saturação para cerca de 30% e a luminosidade para cerca de 7%: `#170c0d`. Parece preto, mas é quente.
2. **Superfície: um degrau acima** Suba a luminosidade para cerca de 12% e reduza um pouco a saturação: `#261718`. Cards e painéis ficam aqui.
3. **Profundo: um tom médio rico para áreas** Luminosidade por volta de 28% dá `#68272d`, um vinho discreto para formas e ilustração, nunca para texto.
4. **Destaque: mais claro e suave que a marca** Leve o coral a cerca de 72% de luminosidade: `#ea868e` chega a 7,6:1 sobre o fundo, enquanto o coral original fica em 5,1:1 e parece mais duro.
5. **Texto: um branco suave com um traço do matiz** `#f2e9e9` dá 16:1 sobre o fundo e combina discretamente com todo 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 único coral. Todas as cores compartilham o matiz, e é por isso que o conjunto parece uma só marca à noite.

## Como usar uma paleta escura no CSS

Nomeie as cores pela função para que os mesmos componentes funcionem nos temas claro e escuro. O padrão abaixo define Tinta da meia-noite como tema escuro e deixa a configuração do sistema escolher. [Design em modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) trata das decisões mais amplas, como imagens, bordas 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 destaque muda entre os temas: marinho profundo no claro, pervinca no escuro. Uma mesma cor raramente funciona nos dois.

## Paletas escuras para posts nas redes sociais

Num feed, um post escuro se destaca entre fotos claras, mas só se as palavras forem legíveis no tamanho do celular. Mantenha as letras grandes, deixe a parte mais clara do fundo longe do título e dê às palavras a área mais calma do quadro.

Um post vertical escuro para Instagram anunciando uma abertura noturna de galeria, com letras claras sobre um fundo profundo

Um post escuro e sombrio em que as letras ficam na parte mais calma do fundo e o brilho fica longe das palavras.

É aqui que um Mark do Gradiently ajuda: ele move a sua região mais calma e de melhor contraste para trás do texto, e a Tinta automática escolhe letra clara ou escura para cada linha a partir da própria paleta do Mark, então um fundo sombrio nunca engole o título. Para visuais escuros com um caráter mais rico e premium, veja [paletas de cores de luxo](https://gradiently.design/pt-br/guide/luxury-color-palettes) e a [estética dark academia](https://gradiently.design/pt-br/guide/dark-academia-aesthetic).

## FAQ

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

Um quase preto tingido para o fundo, uma cor de superfície um pouco mais clara, uma cor média profunda para áreas grandes, um destaque mais claro e um branco suave para o texto.

### Devo usar preto puro no modo escuro?

Geralmente não. Um quase preto como #121212 ou um escuro tingido como #0b0f1a reduz o ofuscamento com texto branco e ainda dá um contraste muito alto.

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

Um branco suave como #e8e6f0 ou #ededed. Ele mantém o contraste por volta de 15:1 ou mais, sem a dureza do branco puro.

### Por que cores vivas ficam estranhas num fundo escuro?

Cores saturadas parecem vibrar contra o preto. Use versões mais claras e um pouco menos saturadas para os destaques em fundos escuros.