Gerador de paleta para modo escuro
Gere uma paleta completa (fundos, superfícies, textos, destaque, estados) para uma interface em modo escuro coerente, a partir de uma simples cor de destaque. O cálculo dos tons é feito inteiramente no seu navegador.
Como funciona
Uma boa interface escura não se resume a inverter preto e branco: os fundos devem ficar levemente tingidos e nunca totalmente pretos, para evitar um contraste duro demais, e a cor de destaque precisa ser luminosa o bastante para continuar legível sobre fundo escuro. Esta ferramenta calcula essas nuances automaticamente a partir do matiz da sua cor de destaque, em HSL, para produzir um conjunto de cores coerente, pronto para colar na sua folha de estilo como variáveis CSS.
Por que evitar um fundo totalmente preto (#000000) no modo escuro?
Um preto puro combinado com texto branco puro cria um contraste extremo que cansa a vista e provoca um efeito de halo (vibração visual) em certas telas OLED. As interfaces escuras profissionais (macOS, Material Design) usam, em vez disso, cinzas muito escuros levemente tingidos, que é o que esta paleta reproduz.
Também é preciso adaptar a cor de destaque ao modo escuro?
Sim: uma cor de destaque que funciona bem sobre fundo claro pode parecer sem brilho ou escura demais sobre fundo preto. Esta ferramenta clareia levemente o destaque informado para que ele mantenha bom contraste e continue bem visível sobre os fundos escuros gerados.
Nenhuma cor ou preferência é enviada a um servidor: todos os cálculos de cor são executados localmente, no seu navegador.