CodeKitHubWhat Is This Tool?
A shade ramp is a series of variations of one color at different lightness levels, used throughout UI design for things like hover states, disabled states, borders, and backgrounds that need to relate to a brand color without being identical to it.
This tool converts your base color to HSL, keeps hue and saturation fixed, and steps lightness from about 95% (near-white tint) down to about 10% (near-black shade), with your original color placed at its natural position in the middle of the ramp.
Why Use It?
- Generates a design-system-style ramp (like Tailwind's 50/100/200.../900 scale) from any single color, not just a fixed preset palette.
- Choose 7, 9 or 11 steps depending on how fine-grained you need the ramp.
- Every step shows its exact HEX code and lightness percentage — click to copy.
- Keeps hue and saturation constant across the whole ramp, so all shades read as clearly related to the base color instead of drifting toward grey.
- Free, instant, and fully local.
How to Use
- Pick your base color using the color picker or by typing a HEX code.
- Choose how many steps you want in the ramp (7, 9 or 11).
- Read each shade's HEX code and lightness percentage directly on its swatch.
- Click any swatch to copy its HEX code.
Example
Input
#3B82F6 (a medium blue), 9 stepsOutput
9 shades from a near-white tint (~95% lightness) down to a near-black shade (~10% lightness), with #3B82F6 itself positioned as the middle stepHue and saturation stay fixed across all 9 steps — only lightness changes — so every shade reads as clearly part of the same color family.
Frequently Asked Questions
Is this the same system Tailwind CSS uses for its color scales?
It's the same underlying idea (fixed hue/saturation, varying lightness) but not an exact replica of Tailwind's specific palette — Tailwind's 50-900 scales were hand-tuned by designers, not generated by a single formula. This tool gives you a comparable structure generated from any color you pick, which is useful when your base color isn't one of Tailwind's presets.
Why does my color look almost the same at two adjacent steps?
That can happen near very light or very dark ends of the ramp, where perceived lightness changes more slowly than the numeric percentage suggests (a known property of human color perception, not specific to this tool). Choosing fewer steps (7 instead of 11) spreads the lightness values further apart and reduces near-duplicate swatches.
Can I use these shades directly as CSS custom properties?
Yes — copy each HEX code and paste it into your CSS variables (e.g. --color-brand-100 through --color-brand-900), matching the ramp position to whichever naming scale your project uses.
Should I use this or the Color Mixer?
If you're making lighter and darker versions of one color — hover states, subtle backgrounds, borders that relate to a brand color — use this shades generator. If you instead need the color between two different colors (say, a step between your primary blue and a secondary orange), use the Color Mixer, which interpolates two colors' RGB channels at any ratio rather than varying one color's lightness.
What happens if my base color is already very light or very dark?
The base color always sits in the middle row, with tints stepping up to about 95% lightness above it and shades stepping down to about 10% below it. If your base is already near-white, the tint half of the ramp gets compressed into a narrow lightness range (near-duplicate rows) while the shade half spreads widely — and vice versa for a very dark base. For the most evenly spaced ramp, start from a mid-lightness version of your color (roughly 40-60% lightness).
Can it generate tones (the color mixed with grey) as well?
No — this tool only varies lightness while keeping saturation fixed, which produces tints and shades but not tones. If you want a more muted ramp, desaturate your base color first (pick a greyer version of it in the color picker) and generate the ramp from that; every step will inherit the lower saturation.