Gerador de paleta para modo escuro
Crie um tema escuro com funções explícitas: fundo, superfície elevada, texto legível e destaque. Comece pelo exemplo CSS e confira as combinações que serão realmente usadas.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
Defina funções para as cores
Um tema escuro precisa de uma hierarquia própria. Separe o fundo das superfícies elevadas e teste texto e controles nos dois. Preserve o significado das cores de estado e ofereça uma forma clara de escolher o tema.
Uma paleta escura para experimentar em CSS
Visão geral do projeto
A superfície elevada separa este conteúdo do fundo. O texto principal, o secundário e a ação usam tokens de cores distintos.
Verificar as cores da ação:root[data-theme="dark"] {
--canvas: #111827;
--surface: #1F2937;
--text: #F9FAFB;
--text-secondary: #9CA3AF;
--accent: #93C5FD;
--on-accent: #111827;
}
body { background: var(--canvas); color: var(--text); }
.panel { background: var(--surface); }
.panel p { color: var(--text-secondary); }
.action { background: var(--accent); color: var(--on-accent); }Esta paleta é um ponto de partida, não uma certificação da interface inteira. O exemplo fixa as cores de texto e fundo para que você possa reproduzir as verificações.
Confira estes pares de texto e fundo
No nível AA das WCAG, texto normal geralmente precisa de 4,5:1 e texto grande de 3:1. Gráficos significativos e a informação visual necessária para reconhecer controles geralmente precisam de 3:1 em relação às cores adjacentes. Separadores decorativos não estão automaticamente sujeitos ao mesmo requisito.
Adapte a paleta à sua interface
- Gere tons a partir de #93C5FD e compare os estados de foco e de passagem do cursor.
- Use superfícies mais claras para separar seções quando fizer sentido. O modo escuro não exige preto puro nem proíbe branco puro.
- Confira texto, links e os limites necessários para identificar controles nos fundos reais. Teste novamente quando mudar cores ou transparências.
- Visualize a página real em diferentes tamanhos e com as preferências de tema do usuário. Acrescente rótulos e outras indicações às cores de estado.
Posso apenas inverter uma paleta clara?
A inversão pode alterar o significado das cores de estado e produzir destaques de baixo contraste. Escolha as cores por função, preserve o significado e meça os pares reais.
Texto branco puro é proibido no modo escuro?
Não. As WCAG não proíbem texto branco nem fundo preto. Escolha uma combinação adequada ao conteúdo e permita o uso do tema preferido. O contraste, sozinho, não resume o conforto de leitura.
Uma taxa alta de contraste torna todo o tema acessível?
Não. A verificação de contraste cobre pares de cores, não a navegação por teclado, os rótulos, a visibilidade do foco ou o restante da interface. Confira o produto final junto com seus tokens.
Continue com suas cores
Compare combinações prontas
Veja uma paleta escura para dashboards com estados identificados por texto, ou experimente azuis para uma interface noturna. Os exemplos incluem os códigos e os pares de contraste.