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

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

Floresta à noite

Sangue de boi e cobre

Berinjela

Carvão e brasa

Verde-azulado profundo

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 e gradientes sombrios.

Regras para paletas escuras legíveis

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.

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. Aqui, uma cor de marca coral, #e0525d, vira um conjunto escuro completo.

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

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 trata das decisões mais amplas, como imagens, bordas e gráficos.

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

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.

É 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 e a estética dark academia.