Tailwind Color Finder
Find the closest Tailwind palette color for any HEX value.
Overview
The Tailwind Color Finder takes any hex code and returns the closest swatch from the default Tailwind CSS palette — for example blue-500, emerald-400, slate-900. It reports the colour family, shade number, exact hex, and the perceptual distance so you can see whether the match is tight or just the nearest available.
It is a quick way to migrate a brand colour onto Tailwind, find the canonical Tailwind class for a screenshot, or check whether a custom CSS value can be replaced with a stock utility class. Engineers shipping Tailwind v3 or v4 codebases reach for it during PR review to keep the colour surface tidy.
How it works
The full default Tailwind palette — twenty-two colour families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) × eleven shades (50, 100, 200…900, 950) — is stored as a fixed lookup. Each entry is precomputed in OKLab.
A query converts the input hex to OKLab and ranks every palette entry by Euclidean distance. OKLab gives a perceptually meaningful "closest match" rather than the often-misleading nearest-RGB answer, and the top three candidates are surfaced for cases where the gap between matches is small.
Examples
#3b82f6 → blue-500 (exact)
#10b981 → emerald-500 (exact)
#94a3b8 → slate-400 (exact)
#ff8c00 → orange-500 (#f97316, ΔE 3.1) or amber-500 (#f59e0b, ΔE 6.2)
FAQ
Which Tailwind version does this match?
The default v3 / v4 palette, which uses OKLCH-spaced shades. Older Tailwind v2 had slightly different greys; if you are still on v2, double-check the slate and gray ramps.
What about custom palettes in tailwind.config.js?
The finder uses the stock palette. For project-specific tokens, paste your config palette into the saved-palettes tool and use the color-list-sorter for a sorted overview.
Why does the finder sometimes return two equally close matches?
Tailwind's families overlap at the edges — orange-500 and amber-500, for example, sit close in OKLab. The top-three view makes the tie visible so you can pick the family that fits your design system semantically.
Does it handle the new v4 OKLCH values?
Yes. v4 expresses palette values in OKLCH but the displayed hex is the same colour. The finder works in OKLab regardless of how the source palette is stored.
Can I find the closest Tailwind shade for a Material colour?
Yes — run the Material hex through the finder. The two palettes overlap significantly so most Material tokens have a close Tailwind cousin.