Shades Generator
Turn any base color into a systematic 50–950 shade scale, ready for design systems, Tailwind configs and CSS variables.
What is a shade scale?
A shade scale is a set of colors derived from one base color by varying lightness. The convention of labelling these steps 50, 100, 200 … 950 comes from design systems that wanted a numeric shortcut for “how light or dark is this color.” Lower numbers are lighter, higher numbers are darker, and the base color typically sits near the middle (500 or 600).
Why standard steps matter
- Designers and developers share a common vocabulary — “bg-primary-100” is instantly understood.
- Light/dark mode theming becomes simpler: swap the token, not the value.
- Scales are consistent across the product — a 300 is always a 300.
- Automation and code generation become trivial.
How this generator builds the scale
The generator uses a fixed lightness map for each step (50 → 97%, 950 → 14%) and blends it with the base color’s own lightness. Saturation is scaled so lower numbers appear softer and higher numbers retain more of the base hue. The result is a scale that behaves consistently across hues — a yellow 500 and a blue 500 are visually comparable.
Frequently asked questions
Can I use my own step values?
The current interface uses the standard 50, 100, 200 … 950 steps. If you need custom steps, the underlying engine (which powers this tool) accepts arbitrary arrays of step numbers — the UI may expand to expose that in the future.
Why does 500 sometimes look brighter than expected?
Yellow and other high-lightness hues naturally sit at higher lightness than blues or purples. The generator nudges values so a yellow 500 doesn’t become nearly white, but the perceptual difference between hues remains visible. This is intentional and matches how human color vision works.
Does the scale pass WCAG on its own?
No scale guarantees WCAG compliance by itself. To check, compare the specific foreground and background pair you plan to use with the contrast checker.
Does the tool work offline?
Yes. The scale is computed entirely in your browser — no network request is made during generation.