Nearest Tailwind Colour
Finds the closest Tailwind palette entry to any colour and shows the perceptual distance.
Finds the Tailwind palette entry closest to a colour you have, measured as ΔE in OKLab rather than distance in RGB. It also answers the different and often more useful question of which family your colour belongs to.
Your colour
How this is measured
Distance is ΔE in OKLab, not Euclidean distance in RGB. RGB says navy and pure blue are 128 apart and two mid-greys sixteen apart are four times closer — for a difference that is far more visible. OKLab was built so that straight-line distance in it approximates perceived difference, which is exactly the question here.
- ≤ 0.001 — Identical — this is the Tailwind colour.
- ≤ 0.02 — Below the just-noticeable difference. A safe swap.
- ≤ 0.05 — Visibly different side by side, close enough in isolation.
- ≤ 0.1 — A noticeable change. Fine for a background, not for a brand mark.
- > 0.1 — A different colour. Tailwind has nothing near this — extend the theme instead.
Palette read from Tailwind 4.3.3 as installed, and checked against it by a test on every run.
Closest match
indigo-600
#4f39f6Visibly different side by side, close enough in isolation.
ΔE OKLab
0.0319
Tailwind value
oklch(51.1% 0.262 276.966)
Next closest
- indigo-700
#432dd7ΔE 0.0545 - blue-700
#1447e6ΔE 0.0580 - blue-600
#155dfcΔE 0.0698 - indigo-500
#6260ffΔE 0.0745 - violet-700
#7008e7ΔE 0.0810 - violet-600
#7f22feΔE 0.0925 - violet-800
#5d0ec0ΔE 0.1010
Nearest families
- indigobest step 600ΔE 0.0319
- bluebest step 700ΔE 0.0580
- violetbest step 700ΔE 0.0810
- purplebest step 700ΔE 0.1132
- skybest step 700ΔE 0.1415
A different question from “the nearest colour”, and often the more useful one: which family your brand colour belongs to, scored on its best step.
If nothing here is close enough, the answer is to extend the theme rather than accept the nearest — generate a full 50–950 ramp from your colour and paste it into @theme.
How to use it
Enter your colour
Usually a brand hex somebody sent you. The closest token, its hex and the ΔE appear immediately.
Skip the neutrals if you are matching a hue
slate, gray, zinc, neutral and stone win every near-grey query, which is correct and rarely the answer you wanted.
Read the family list
Each family scored on its best step. "Your brand colour is an indigo" is more actionable than "the nearest swatch is indigo-600".
Common questions
Why ΔE rather than RGB distance?
Because RGB distance does not match what you see. It puts navy and pure blue 128 apart while calling two mid-greys sixteen apart four times closer — for a difference that is far more visible. OKLab was built so straight-line distance approximates perceived difference.
What is a good ΔE?
Under about 0.02 in OKLab is effectively the same colour; up to 0.05 is a match nobody will query; past 0.1 you are choosing a different colour and should say so out loud. The thresholds are listed on the page.
Why is one entry marked as outside sRGB?
Because Tailwind defines its palette in OKLCH now, and some entries land outside what sRGB can show. The hex is a gamut-mapped approximation; using the `oklch()` value keeps the extra saturation on a P3 display.
Nothing is close enough. Now what?
Extend the theme rather than accept the nearest. Generate a full 50–950 ramp from your colour and paste it into `@theme` — a brand colour approximated to the nearest stock swatch stops being the brand colour.
Feed it from
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Contrast Checker
Scores a foreground and background pair against WCAG 2 and APCA and suggests the nearest passing colour.
Next
These accept what this tool produces, so the result can go straight in.
Colour Format Converter
Converts a colour between HEX, RGB, HSL, HWB, LAB, LCH and OKLCH and names the nearest known colour.
Tint & Shade Scale
Generates a 50–950 lightness scale from one colour with perceptually even steps, ready as design tokens.
CSS Token Extractor
Pulls colours, spacings, radii and fonts out of a stylesheet and proposes a custom-property set.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
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.