Every mature design system — Google's Material Design, IBM's Carbon, Tailwind CSS's default palette — ships each brand color as a numbered ramp: a 50 (near-white) through a 900 (near-black) version of the same hue. This tool generates exactly that ramp from a single starting color.
Tints, shades and tones: terms that predate computing by centuries
The vocabulary is old: painters have distinguished a "tint" (color plus white), a "shade" (color plus black) and a "tone" (color plus gray) since at least the Renaissance, when pigment mixing was the only way to lighten or darken a hue. Digital design systems reinvented the same idea for UI in the 2010s — Google's Material Design guidelines, published in 2014, formalized the now-standard numbered scale (50 through 900) so that a "primary-500" button, a "primary-100" hover background, and a "primary-800" pressed state could all be derived predictably from one brand color instead of being separately hand-picked and prone to drifting out of sync.
How the ramp is generated
The tool converts your base color to HSL, then holds hue (and, in a refined version, saturation) roughly constant while stepping lightness across a fixed sequence of percentages — producing evenly spaced tints toward white and shades toward black. Keeping hue constant is what prevents the classic amateur mistake of a "shade" that visibly shifts color as it darkens, which happens when you naively multiply RGB channels instead of adjusting lightness directly.
Why interfaces need a full ramp, not just one color
- State variation — hover, focus, active and disabled states each typically use a different step of the same ramp rather than an unrelated color.
- Backgrounds vs. text — a light step (e.g. 50 or 100) works as a subtle background, while a dark step (700–900) provides accessible body text in the same hue family.
- Dark mode — many dark-theme implementations simply flip which end of the same ramp is used for backgrounds versus text, reusing the identical palette.
- Data visualization — a single-hue ramp is the standard way to represent a sequential (low-to-high) numeric scale on a choropleth map or heatmap.
Frequently asked questions
What's the difference between this and a random palette generator? A palette generator produces several distinct hues; a shades generator produces variations of one single hue — they solve different problems (a color scheme vs. a usable state system for one brand color).
Why do some steps look more saturated than others? Pure HSL lightness ramps can look slightly duller near the extremes because human perception of saturation interacts with lightness; some professional tools compensate using perceptual spaces like LCH, but plain HSL remains the most widely supported baseline.
How many steps should a ramp have? Ten (50, 100, 200 … 900) is the de facto standard set by Material Design and adopted by Tailwind CSS, though smaller systems sometimes use five or six.
Further reading
Material Design — The color system — Google's original specification for numbered tint/shade color ramps in UI design.
Wikipedia — Tints and shades — The traditional painting terminology this system digitizes.