Gere uma escala completa de tons (50 a 950) a partir de qualquer cor. Estilo Tailwind CSS, perceptualmente equilibrada. Exportar como CSS variables, Tailwind, SCSS ou JSON.
| HEX | RGB | HSL |
|---|
A escala usa interpolação HSL perceptual. A ferramenta cria 11 passos variando a luminosidade de forma não-linear e ajustando a saturação. Compatível com as convenções Tailwind CSS (50, 100…950).
Importe as CSS variables ou a config Tailwind no seu projeto. O tom 500 corresponde à sua cor principal, 50-200 para fundos e estados hover, 600-900 para textos e estados ativos. Convenção seguida pelo Tailwind, Material Design e a maioria dos design systems modernos.