Crie uma paleta de 6 passos (50, 100, 300, 500, 700, 900) com HEX a partir de uma cor base. Copie um tom ou tudo em variáveis CSS.
Tudo acontece localmente no seu navegador. Nada é enviado ou transmitido.
A cor base é o passo 500. Os passos mais claros (50, 100, 300) interpolam em direção ao branco; os mais escuros (700, 900) interpolam em direção ao preto, em espaço HSL.
Sistemas de design raramente usam uma única cor: usam uma rampa de tons relacionados para fundos, bordas, acentos, estados ao passar o cursor e texto. Este gerador constrói essa rampa a partir de uma cor base interpolando em espaço HSL (matiz, saturação, luminosidade), onde "mais claro" e "mais escuro" se comportam como o nosso olho espera.
Sua cor base vira o passo 500. Os três passos mais claros (50, 100, 300) são feitos interpolando em espaço HSL em direção ao branco — a luminosidade sobe e a saturação diminui proporcionalmente. Os dois passos mais escuros (700, 900) interpolam em direção ao preto — a luminosidade cai enquanto matiz e saturação são mantidos. O resultado é uma rampa suave e previsível ao redor da sua cor base.
A maioria dos sistemas de design só precisa de alguns pontos por cor: um tom quase branco, um tom claro, um acento suave, a cor principal, um estado mais escuro ao passar o cursor e um tom quase preto para texto. Os passos 50, 100, 300, 500, 700 e 900 cobrem exatamente essas funções sem o ruído de uma escala de 10 ou 12 passos.
500 para ações principais e acentos, 700 para o estado ao passar o cursor e o estado ativo, 50 ou 100 para fundos e preenchimentos sutis, 300 para bordas e estados desabilitados, e 900 para texto sobre fundos claros. É a mesma divisão de papéis que a maioria dos sistemas de tokens (como o do Tailwind) usa.
Não. Um valor de cor é apenas três números. Tudo — a conversão HSL, a interpolação, a saída HEX e a geração de variáveis CSS — acontece em JavaScript dentro do seu navegador. Nada é armazenado ou transmitido.
Não diretamente — a rampa inteira é derivada da cor base para que os passos fiquem consistentes entre si. Para mudar um tom, escolha uma cor base diferente (ou ajuste-a) no seletor e a paleta inteira é regenerada instantaneamente.
Se você acabou de usar Gerador de paletas de cores, os próximos passos naturais são Conversor de cores, Verificador de contraste de cor, Gerador de gradientes CSS, ou explore todas as ferramentas de Ferramentas de arquivos.