1. Limpeza de entrada
A entrada hexadecimal é cortada, normalizada e expandida se necessário. Entradas inválidas não quebram a página, e a última paleta válida permanece visível até que a entrada seja corrigida.
Gerar uma paleta
Use uma cor base e ajuste o quanto a paleta se move em matiz, saturação e luminosidade. O gerador limita os valores com segurança, ajusta o matiz em 360 graus e arredonda os valores de exportação para números RGB inteiros e uma casa decimal para porcentagens HSL.
Resultados
A faixa de visualização mostra a paleta como uma sequência da esquerda para a direita. Cada amostra inclui uma recomendação de contraste para o texto em relação a essa cor específica.
Exportar
Use o seletor de formato para alternar entre propriedades personalizadas CSS e JSON. As ações de cópia são desativadas apenas se a API de área de transferência do navegador não estiver disponível.
HEX
RGB
HSL
CSS
JSON
Como funciona
O gerador converte a cor hexadecimal base para HSL, aplica intervalos de matiz baseados na regra de harmonia selecionada e, em seguida, ajusta a saturação e a luminosidade em toda a paleta de acordo com o valor de propagação.
2. Matemática da paleta
Os valores de matiz giram em torno da roda de cores. A saturação e a luminosidade são limitadas entre 0 e 100 para evitar saídas de cores inválidas.
3. Exportação para produção
As exportações incluem nomenclatura, valores arredondados e ordenação estável para que a saída possa ser usada diretamente em tokens de design, protótipos rápidos ou folhas de estilo.
As cores podem ser renderizadas de forma diferente em telas, navegadores e sistemas operacionais. Use esta ferramenta como um ponto de partida rápido para paletas e verifique as escolhas finais em seu ambiente de destino e fluxo de trabalho de acessibilidade.