Adaptador de cores para modo escuro

• Geração instantânea do modo escuro: cole sua paleta de modo claro e receba os equivalentes de modo escuro em tempo real. Ajuste o modo e as configurações e veja todas as cores atualizarem imediatamente.
• Seguro e privado: todos os cálculos de cor rodam 100 % no lado do cliente, no seu navegador. Os dados da sua paleta nunca são enviados a um servidor, então você pode adaptar com segurança cores de marca proprietárias.
• Verificação de contraste WCAG: cada cor adaptada é verificada automaticamente em relação ao fundo escuro para conformidade WCAG AA (4,5:1) e AAA (7:1). As cores que reprovam são ajustadas até passarem.
• 100 % grátis para sempre: totalmente grátis, sem cadastro, sem limites de uso e sem anúncios bloqueando a interface. Adapte quantas paletas precisar.

• Adicionar modo escuro a apps existentes: converta seus tokens de design de modo claro em equivalentes de modo escuro em segundos. Exporte como propriedades personalizadas de CSS e insira na sua folha de estilos atual.
• Temas em React e Next.js: gere os tokens de cor do modo escuro para sua configuração do Tailwind ou objeto de tema CSS-in-JS. A exportação do Tailwind está pronta para colar em tailwind.config.js.
• Manutenção do design system: mantenha suas paletas clara e escura sincronizadas conforme o sistema evolui. Rode o adaptador novamente sempre que atualizar uma cor de modo claro.
• Adaptação de cores de marca: adapte cores de marca para interfaces em modo escuro preservando matiz e saturação. O modo perceptual mantém tons médios e destaques visualmente consistentes.
• Conformidade de acessibilidade: verifique se todas as cores do modo escuro atendem ao contraste WCAG AA sobre o fundo escuro. As que reprovam são ajustadas automaticamente.
• Variáveis e tokens CSS: exporte as paletas clara e escura como propriedades personalizadas de CSS com um clique. A saída usa os seletores data-theme="dark" e .dark para máxima compatibilidade.

Um adaptador de cores para modo escuro converte uma paleta de modo claro em equivalentes adequados ao modo escuro ajustando a luminosidade de cada cor no espaço HSL. Inverter simplesmente as cores (100 − L) costuma dar resultados ruins: cores muito claras ficam muito escuras e tons médios ficam lamacentos. Nosso adaptador usa três algoritmos mais inteligentes (perceptual, inversão e deslocamento) para gerar cores de modo escuro visualmente consistentes e acessíveis. Todo o processamento roda na hora no seu navegador, sem envio a servidores.

1. Insira sua paleta de modo claro: adicione cada cor com um nome (usado como nome da variável CSS) e seu valor HEX. Use os botões predefinidos para carregar uma paleta de exemplo na hora.
2. Escolha as configurações de adaptação: selecione um modo (perceptual, inversão ou deslocamento), defina a luminosidade do fundo escuro, ajuste a saturação e o índice mínimo de contraste WCAG. As cores do modo escuro atualizam em tempo real.
3. Exporte CSS ou configuração do Tailwind: copie as propriedades personalizadas de CSS geradas (com seletores :root e .dark) ou o trecho de configuração do Tailwind direto para o seu projeto.

• Modo perceptual: usa um mapeamento em curva S que preserva as relações de contraste relativas entre as cores. Cores claras (L alto) ficam levemente brilhantes em fundos escuros; cores escuras (L baixo) ficam bem mais claras. É o modo recomendado para a maioria dos design systems.
• Modo inversão: espelha a luminosidade em torno de 50 % (escuro = 100 − claro). Simples e previsível, mas pode gerar resultados lavados nos tons médios. Melhor para paletas minimalistas de alto contraste.
• Modo deslocamento: desloca todas as cores para a extremidade clara da faixa do tema escuro. Cores escuras recebem um impulso maior que as claras. Bom para paletas com muitos tons escuros.
• Aplicação do contraste: após a adaptação, cada cor é verificada em relação ao fundo escuro pela fórmula de contraste WCAG. As cores abaixo da razão mínima são deslocadas para maior luminosidade até passarem.