How the Tint-to-Shade Scale Is Generated
The base hex color is converted to HSL (hue, saturation, lightness), then a new lightness value is computed for each step while hue and saturation stay fixed, sweeping from a very light tint (95% lightness) down to a very dark shade (around 10% lightness). Keeping hue and saturation constant is what makes the resulting steps read as one coherent color family rather than a set of unrelated colors, the same technique used by Tailwind CSS's own default palette and most other color-scale generators.
The Six Export Formats
Hex, RGB, and HSL each output a plain list of step-name to color-value pairs in that respective format, useful for quick reference or pasting into a design tool. CSS variables wraps the scale in a :root { --color-500: #...; } block ready to paste directly into a stylesheet. SCSS produces $color-500: #...; declarations for a Sass-based codebase. Tailwind config produces a colors.custom object shaped for pasting directly into a tailwind.config.js theme extension, letting you reference the scale as bg-custom-500 and similar utility classes.
Choosing a Good Base Color
A base color that's already reasonably saturated and roughly mid-lightness (similar to what a typical "500" step would look like) produces the most usable scale, since the generator sweeps lightness around that hue and saturation rather than trying to guess an ideal starting point. An already very light or very dark base color still generates a full scale, but the result may compress more steps into a narrower visually distinct range near one end.
Common Uses
Building a design system's color tokens from a single brand color is the most common use, generating the full light-to-dark range a UI needs (backgrounds, borders, hover states, text) from one starting hex value instead of hand-picking each shade. The same scale also covers dark-mode variants (typically using the lighter steps for dark-mode text and the darker steps for dark-mode surfaces, roughly inverted from their light-mode roles) and gives a starting point for finding an accessible text-and-background pairing within one color family, though contrast should still be verified separately.
Step Count and Naming Conventions
The default 9-step scale follows the widely-used 100-900 naming convention (100 lightest, 900 darkest), the same numbering Tailwind CSS and most design systems use for a 9-step color scale. Choosing a different step count (3 to 12) switches to simple sequential naming (100, 200, 300, ...) as well, scaled to however many steps are generated. As a tailwind color generator, it works as a color shade generator, a hex color palette generator, a tint and shade generator, a css color variables generator, and a general color scale generator, producing tailwind colors from hex input with a proper 100 to 900 color scale, essentially a color palette from hex code tool.