Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
Builds a 50 to 950 ramp from one colour, the way a design system wants it. The lightness targets are the mean of Tailwind’s own chromatic families, measured from the installed package rather than picked by hand, so the result lands where your eye already expects each step to be. A slider moves between that familiar curve and an evenly spaced one.
Base colour
Its hue and chroma seed the ramp; its lightness decides which step is marked as the one you picked.
Ramp
The lightness targets are the mean of Tailwind's own chromatic families, measured from the installed package rather than chosen here.
Dark mode
Step 50 becomes step 950, 100 becomes 900, and so on. The token names keep their meaning — 500 is still the mid-tone — and a component written against the scale needs no change at all.
Light
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Export
Looking for a set of hues rather than one hue's ramp? The palette generator builds harmonies. To find the closest Tailwind token to any of these, the nearest-colour lookup measures it in ΔE.
How to use it
Put the base colour in
Its hue and chroma seed the ramp. Its lightness decides which step gets the ring around it — the step closest to the colour you brought.
Decide how familiar you want the curve
At 100% the steps sit where Tailwind puts them, which is what everyone on the team already has in their head. At 0 the ramp is a straight line from 0.97 to 0.25 — more evenly spaced, and less familiar. There is no right answer; matching an existing product is the usual reason to stay at 100%.
Add hue drift if the dark end looks off
Real families drift: Tailwind red runs from 17° at step 50 to 26° at 950, because a dark red reads better slightly warmer. A few degrees is usually enough; the slider goes to 40 in either direction.
Decide whether to stay inside sRGB
On, every step is a colour any screen can show and the hex is exact. Off, the mid steps of a saturated hue keep their chroma, a P3 display shows them, and the hex becomes an approximation — the steps that overflow are marked.
Export as variables, a Tailwind theme, or JSON
The prefix is yours. The JSON form also carries the lightness anchors, which is useful if something downstream needs to rebuild the same ramp.
Common questions
My brand hex is not anywhere in the ramp. Is that a bug?
No, and it is the honest behaviour. The ramp is built from lightness targets, not threaded through your colour, so unless your colour happens to sit exactly on one of the eleven targets it will not appear verbatim. The ringed step is the closest one. If the exact hex has to be in there, use it directly for that token and let the ramp supply the rest.
Are these Tailwind colours?
No. What comes from Tailwind is the *shape* of the curve — the eleven lightness values, averaged across its chromatic families. The hue and chroma are yours. To find which Tailwind token is nearest to a colour you have, the nearest-colour lookup measures that in ΔE.
Does "perceptually even" mean every step differs by the same amount?
Only at 0% anchoring. At 100% the ramp deliberately follows Tailwind’s curve, which is not evenly spaced — it bunches the light end so there are enough usable background tints. What OKLCH buys either way is that the numbers mean something perceptually, so two families built this way step in step with each other.
Do the steps pass WCAG against each other?
This page does not check that, beyond the proof panel on the dark-mode tab. Equal lightness steps are not equal contrast steps, because WCAG contrast is computed on relative luminance and OKLCH lightness is not a linear function of it. Take the pair you actually intend to use to the contrast checker.
Feed it from
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
Palette Generator
Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.
Next
These accept what this tool produces, so the result can go straight in.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
Dark Mode Palette
Builds a 50–950 ramp from one colour and mirrors it into a dark one, so each token pair keeps its contrast.
Palette Generator
Builds a harmonious palette from a base colour using complementary, triadic and analogous rules.
Nearest Tailwind Colour
Finds the closest Tailwind palette entry to any colour and shows the perceptual distance.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.