Ir para o conteúdo
TextArray1.87.0
Totalmente local

Gerador de paleta para tema escuro

Transforma cores de um tema claro numa paleta noturna com contraste verificado.

Entrada
30
Saída
Ferramentas relacionadas
Gerador de paleta de coresGeradores aleatórios
Verificador de contrasteFerramentas de desenvolvedor
Extrator de variáveis de cor CSSFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
SQL para JSONFerramentas de desenvolvedor
Gerador de paleta para tema escuro
Cole as cores de um tema claro — uma por linha — e esta ferramenta gera um equivalente escuro para cada uma, pronto para inserir na sua folha de estilos. Foi criada para o caso comum de implementar tema escuro depois que o tema claro já existe: forneça suas cores de fundo, superfícies e acentos e ela devolve o mesmo conjunto, invertido para uma interface noturna.
Nomeie cada linha como uma propriedade CSS personalizada ("background: #ffffff", "--accent: #3366cc") ou simplesmente cole um valor hexadecimal simples. A cor de fundo do tema escuro define o fundo da página sobre o qual a paleta é construída, e o contraste de cada cor é verificado contra ele. O contraste alvo escolhe WCAG AA (4.5:1) ou AAA (7:1) — acentos (as entradas mais saturadas, destinadas a texto, ligações e ícones) são ajustados para essa razão, enquanto superfícies neutras são reportadas honestamente mas nunca forçadas, já que o fundo de um cartão não é lido como texto. Desaturar suaviza cores que de outro modo brilhariam em saturação completa no escuro, Preservar tom do acento mantém a cor e intensidade de uma marca intactas, e Mapeador de níveis de elevação cria uma escala suave de tons neutros acima do fundo, como um cartão acima da página por trás dele.
Uma linha que a ferramenta não consegue ler como cor — um comentário perdido, um cabeçalho vazio — é ignorada em vez de quebrar o resto da lista, e a contagem aparece no resumo ao lado de quantas cores foram geradas e quantos acentos atingiram o contraste alvo. Listas muito longas e finais de linha Windows ou Unix são ambas tratadas sem configuração extra.
Tudo funciona localmente no seu navegador: cores nunca são carregadas ou enviadas para nenhum lugar. Copie o resultado, descarregue como arquivo .txt, ou envie o resultado diretamente de volta para a entrada para continuar refinando a paleta.
FAQ
Que formato de entrada ela espera?
Uma cor por linha, como valor hexadecimal. Nomeie-a como uma variável CSS ("primary: #3366cc") para um nome de variável legível, ou cole um código hexadecimal simples e a ferramenta o nomeia automaticamente.
Como ela decide quais cores são acentos?
Uma cor com saturação notável é tratada como acento — destinada a texto, ligações ou ícones — e é ajustada para seu nível de contraste escolhido. Uma cor próxima de cinzento é tratada como superfície e segue o mapeamento de elevação.
Por que nem todas as cores atingem o contraste alvo?
Apenas acentos são ajustados para o alvo, porque essa razão é uma regra de contraste de texto. Fundos de superfície não são texto, então seu contraste é reportado no resumo mas não é forçado.
O que faz "Mapeador de níveis de elevação"?
Ela avança suas cores neutras e de baixa saturação a partir do novo fundo escuro em pequenos incrementos uniformes, em vez de espelhar sua claridade original — o mesmo efeito em camadas que um cartão acima de um fundo de página.
Minha lista de cores é enviada para algum lugar?
Não. A paleta é gerada inteiramente no seu navegador e nunca sai do seu dispositivo.