Gerador de Tons de Cor
Gere uma escala de tons a partir de uma cor base.
Uma escala de luminosidade 50–950 pronta para design systems e temas de UI.
Todas as conversões de cor são feitas localmente no seu navegador — nada é enviado, armazenado ou registrado.
Como funciona
- 1 Escolha uma cor base.
- 2 Veja a escala de tons de 50 a 950.
- 3 Copie o HEX de que precisa.
- 4 Exporte todos os tons como variáveis CSS.
Casos de uso comuns
- Criar uma rampa de cores para um design system.
- Escolher os estados hover/ativo a partir de uma única cor.
- Estilizar superfícies claras e escuras de forma consistente.
- Gerar etapas de cor no estilo do Tailwind.
Perguntas frequentes
Os meus dados de cor são enviados para algum lugar?
Não. Cada conversão e cálculo é executado inteiramente no seu navegador — nada é enviado, armazenado ou registrado.
O que significam os números?
São etapas de luminosidade (50 = o mais claro, 950 = o mais escuro) que seguem a convenção usada por muitos design systems, de modo que a escala se encaixa diretamente nos temas de interface.
Como cada tom é calculado?
O matiz e a saturação da cor base são mantidos enquanto a luminosidade é ajustada para cada etapa, de modo que toda a escala compartilha um matiz consistente.
É realmente grátis?
Sim — grátis, sem cadastro, sem marca d'água e sem limites.