What the numbers mean
The 50-to-950 scale is a lightness ladder, not a saturation or brightness one. 50 is the palest tint, 950 the deepest shade, and 500 sits roughly in the middle where the colour is most itself.
The convention came from Tailwind and has spread well beyond it, largely because it solves a naming problem. "Light blue" and "dark blue" stop scaling the moment you need a third and fourth step; numbers do not.
The [msm_tool slug="tailwind-shades"] generates all eleven steps from one colour by holding the hue and saturation and replacing the lightness with a fixed target per step.
Why lightness rather than mixing
The obvious way to make a tint is to mix toward white, and the obvious way to make a shade is to mix toward black. Both desaturate as they go, and the pale end drifts toward grey.
Working in lightness keeps the hue and saturation intact, so step 100 still reads as recognisably the same colour as step 900. That is what makes the family cohere. Two small corrections stop the ends going flat: shades lighter than 80 lightness gain a little saturation back, and the darkest end loses a fraction.
Your colour keeps its exact value
The step whose target lightness sits closest to your input keeps your colour exactly and is marked. The scale is built around what you supplied rather than replacing it with the nearest target.
One consequence worth knowing: if your brand colour is very light or very dark, it lands near one end and the scale is lopsided around it. A pale mint might land at 200, leaving only two steps above it and eight below. That is accurate rather than broken, but it means you have fewer light steps to work with than the numbering suggests.
Contrast is not checked
The scale is generated from lightness alone, and lightness is not contrast.
Whether step 500 can carry white text differs by hue: a yellow at a given lightness is far brighter than a blue at the same one, so a yellow-500 will fail with white text where a blue-500 passes comfortably. There is no step number that is universally safe.
The practical approach is to check each step you intend to use as a background and record which ones take white text and which take dark. Do that once per palette and it stops being a question.
Even steps are not even perception
The lightness targets are evenly spaced. Human vision is not evenly sensitive across the range — we notice change more in the mid tones than at the extremes.
The gap between 500 and 600 therefore reads as larger than the gap between 50 and 100, despite the arithmetic being regular. Hand-tuned palettes such as Tailwind's own account for this, which is why a generated scale and a designed one differ even when both look reasonable in isolation.
Hue is held constant, and that is a choice
Holding the hue is what makes the scale read as one colour. Hand-built palettes often shift the hue slightly toward the ends — warming the light tints, cooling the dark shades — because it mimics how pigment behaves and looks richer.
That refinement is worth making by eye afterwards if the palette matters. Start with the generated family, then nudge the two extremes.
Assigning steps to roles
A workable default, adjusted per palette:
- 50–100 — page and card backgrounds, subtle fills, hover states on light surfaces.
- 200–300 — borders, dividers, disabled states.
- 400–600 — the colour proper: buttons, links, icons. 500 or 600 is usually the primary.
- 700–800 — hover and active states for the above, and text on light backgrounds where the brand colour must appear as text.
- 900–950 — dark surfaces, and text in dark mode.
The value of assigning roles rather than picking shades by eye each time is that changing the brand colour re-derives the whole interface. Picking by eye does not.
Which output format
Custom properties for plain CSS, or a config fragment that extends a Tailwind theme. Neither is better; use whichever your project reads. If you are on Tailwind, the config form means the classes generate themselves.