Gerador de tons de cor

Dê uma cor de marca e ele monta dez degraus, mais claros (tints) e mais escuros (shades). A saída sai no formato 50 · 100 · … · 900 que o Tailwind e a maioria dos design systems esperam.

🎨 Tudo roda no seu navegador. Sem instalar nada, sem cadastro.

Cor base (a da sua marca)

Onde cada degrau se usa

· 50~200 Fundos, realces suaves, estados desativados
· 400~600 Botões e links — a cor de marca em si
· 700~900 Estados pressionados e texto sobre fundos escuros
A nota à direita de cada linha diz se o texto branco ou preto passa do limite de acessibilidade (4,5:1) sobre aquele fundo.

O que esta ferramenta faz

Dez degraus do 50 ao 900
HEX e HSL em cada degrau
Indica se lê melhor texto branco ou preto
Copie o conjunto como variáveis CSS

Outras ferramentas de cor

Gerador de paletas de coresTire as cores que combinam com uma cor base, por regra Misturador de coresEncontre a cor que fica entre duas Gerador de cores aleatóriasTrave as que você gostar e sorteie o resto de novo Verificador de contrasteVerifique a legibilidade do texto pela WCAG

As cores podem aparecer um pouco diferentes conforme a sua tela e o perfil de cor dela.