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

Noite de floresta

Sangue de boi e cobre

Beringela

Carvão e brasa

Verde-azulado profundo

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

Regras para paletas escuras que se leem bem

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.

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

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

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 trata das decisões mais amplas, como imagens, contornos 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 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.

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