About the Colour Shades Generator
This colour shades generator expands a single base colour into the eleven-step ramp that modern design systems are built on, from a barely-there 50 tint through to a near-black 950. It preserves the base hue and saturation and varies only lightness across fixed steps, so every shade reads as the same colour rather than as eleven separate decisions. A saturation shift slider compensates for the washed-out mid-tones that pure lightness interpolation tends to produce, and the output arrives as named CSS custom properties you can paste directly into a token file.
How to use the Colour Shades Generator
- 1
Choose a Base colour with the colour field.
- 2
Set a Token name — it becomes the prefix on every generated custom property, defaulting to brand.
- 3
Adjust the Saturation shift slider by a few points if the mid-tones look flat.
- 4
Copy the CSS variables block or download it as a .css file for your token layer.
What people use it for
Bootstrapping a design system palette
One brand colour becomes eleven tokens covering backgrounds, borders, hover states and text, which is enough structure to build an entire interface on.
Creating light and dark theme pairs
A theme typically uses 50 to 200 for light-mode surfaces and 800 to 950 for dark-mode ones, so generating both ends at once keeps the two variants aligned.
Extending a palette to a new accent
When a product adds a status or category colour, running it through the same eleven steps guarantees it sits alongside the existing scales consistently.
Generating Tailwind-compatible tokens
The 50 to 950 labels match Tailwind's naming exactly, so the output drops into a theme extension with no renaming at all.
Why palettes number 50 to 950
The convention comes from Google's Material Design, which introduced numbered colour steps, and was popularised in its current form by Tailwind CSS. The numbers are an ordinal lightness scale rather than any measured quantity: 50 is the lightest tint, suited to page backgrounds and subtle fills; 500 sits near the pure base colour and is the shade most people mean when they name the colour; and 900 is the darkest practical text shade. Tailwind added 950 in version 3.3 specifically because dark themes needed a step below 900 for deep surfaces. The value of a shared numbering scheme is portability — a developer moving between codebases can guess correctly that a 100 is a background wash and a 700 is body text, without reading the token file. This generator maps the eleven labels to fixed HSL lightness values from 97 percent at step 50 down to 11 percent at step 950, with the spacing tightening in the middle where the eye is most sensitive to change.
The washed-out mid-tone problem
Interpolating lightness in HSL while holding saturation constant does not preserve apparent colourfulness. As lightness rises above 50 percent the maximum achievable chroma at that lightness falls, so the colour is squeezed towards white and the same saturation number produces a visibly duller result — a 200 or 300 step frequently comes out chalky rather than as a genuine light version of the hue. The same effect appears in reverse at the dark end, where deep shades drift towards a flat near-black rather than staying recognisably coloured. This is why the saturation shift control exists: nudging it up a few points restores the chroma that the lightness change removed. Design systems built by hand usually solve this by varying hue slightly as well, warming light tints and cooling dark shades, which is why professionally hand-tuned palettes look richer than any single-axis interpolation. Generating in OKLCH avoids most of the problem because its lightness axis is perceptually uniform, though it requires clamping shades that fall outside the sRGB gamut.
Tips
- Use 600 to 800 for text on light backgrounds and 200 to 400 on dark ones, then verify the pairing hits 4.5:1.
- Hand-tune the two or three steps nearest your brand colour so the exact brand value appears somewhere in the ramp.
- Generate a neutral grey ramp alongside your brand ramp — most tokens in a real interface are neutral, not coloured.