A colour scale is a single colour expressed as a range of lightness steps, labelled by number. It is the backbone of every design system, because it lets you say “the border is neutral-200 and the text is neutral-800” instead of hard-coding hex values everywhere.
Why 50 to 950
The numbering — 50, 100, 200, through to 900, 950 — is the convention Tailwind made standard, and it is worth following simply because everyone else does.
- 500 is the base, the colour the scale is built around.
- Lower numbers are lighter, up to 50 as a near-white tint.
- Higher numbers are darker, down to 950 as a near-black shade.
The round-number gaps are deliberate. If you later find you need a step between 200 and 300, you can add 250 without renumbering the whole scale. Sequential numbering (1, 2, 3) leaves no room to insert anything, which is exactly the problem the hundreds solve.
What a good scale needs
Even visual steps. Moving from 100 to 200 should feel like the same size jump as 700 to 800. This is the hard part, and where most hand-made scales fall down — see below.
Enough range at the ends. The 50 step should be light enough to use as a page background, and the 950 dark enough for text on that background. A scale that only spans the middle lightnesses gives you eleven similar colours and no usable contrast.
A consistent hue. All eleven steps should read as the same colour. It is tempting to shift the hue slightly at the extremes for richness, but do it carefully — a scale whose light steps drift warm and dark steps drift cool stops feeling like one colour.
The evenness problem
Generate a scale by stepping lightness evenly in HSL and the result looks wrong: the light end crowds together while the dark end lurches in big jumps, or the reverse.
The cause is the one covered in the format guide — HSL lightness does not match perceived lightness. Evenly-spaced HSL numbers are unevenly-spaced to the eye.
Two ways out:
- Generate in OKLCH, whose lightness is perceptual, so even numeric steps look even. This is what most current design systems do.
- Tune by eye. Place the steps where they look evenly spaced rather than where the maths says, which is what the older, hand-built Tailwind palettes effectively did.
This tool spaces its steps to look even across the range rather than stepping a single value mechanically, which is why the light end does not bunch up.
How many scales you actually need
The instinct is to generate a scale for every colour in the brand. Resist it.
Most interfaces run on:
- One neutral grey scale — doing the heavy lifting for text, borders, backgrounds and surfaces. This is the one that matters most; spend time on it.
- One primary — the brand colour, for buttons, links and emphasis.
- One or two semantic colours — success green, danger red, sometimes a warning amber.
That is four or five scales, not fifteen. A colour used in exactly one place does not need eleven variants; it needs one value. Generating scales you never reference is how a design system becomes bigger than the product it serves.
Naming past the numbers
The numbers describe lightness, not purpose. blue-600 tells you how dark it is, not what it is
for. Mature systems add a semantic layer on top — --colour-text-primary, --colour-border,
--colour-surface — that points at a step in the scale.
That indirection is what lets you retheme, or ship a dark mode, by repointing a handful of
semantic tokens instead of hunting down every blue-600 in the codebase. Build the numeric scale
first, then name its jobs.