A Tailwind scale from your own colour

A Tailwind scale from your own colour

The same 50–950 ramp, in the shape Tailwind expects, for both v3 and v4. Multiple colours at once, each named.

Why a measured ramp beats picked swatches

The usual way a palette gets built is by eye: choose a brand colour, then pick lighter and darker versions until they look about right. It produces steps that are perceptually uneven — two that are nearly identical, a gap somewhere in the middle — and the unevenness only shows up later, when 600 and 700 turn out to be interchangeable and nothing sits where you need it.

Generating the ramp against a perceptual model instead means each step is a genuine, even change in lightness. The practical payoff is predictability: if 600 on white clears the contrast requirement for body text, 700 and 800 will too, and you can reason about a whole family from one measurement rather than checking every pairing.

What the numbers are for

The 50–950 convention is a rough map of roles rather than an arbitrary index. The lightest steps, 50 and 100, are surfaces — a tinted panel, a hover state on a white row. The middle, around 400 to 600, is where a colour is saturated enough to carry a brand, which is where buttons and accents live. From 700 upward the colour is dark enough for text on a light background.

The reason to keep to the convention even when you generate your own is that it survives handover. Someone reading bg-slate-50 and text-slate-800 knows the intent without looking either colour up, and that stays true across projects.