Find the Tailwind palette color closest to any hex value β top five matches ranked by perceptual OKLab distance, with side-by-side swatches and an honest "keep your exact color" fallback.
Settings
Generated locally in your browser β your settings and results never leave this page.
“Which Tailwind color is closest to our brand blue?”
The daily question, answered measurably: pick your color and get the five nearest palette colors ranked by OKLab distance β the perceptual metric where numeric closeness matches visual closeness (RGB distance notoriously does not). Side-by-side swatches let your eyes confirm what the numbers claim, and the verdict is honest: “visually near-identical” or “noticeably different β keep your exact color”.
Worked example
#2563ff β
1. blue-600 #2563eb distance 0.0119 β visually near-identical
2. blue-500 #3b82f6 distance 0.0466
3. indigo-600 #4f46e5 distance 0.0838
Use: bg-blue-600 text-blue-600 border-blue-600When the match is not close
- Keep exactness with an arbitrary value: bg-[#2563ff] β brand colors deserve precision.
- Or make the brand color a first-class citizen: the Palette Generator builds a full 50β950 scale from it.
Why adopt a palette color at all
- You inherit the neighbors: matching hover shades (blue-700), tints (blue-50) and dark-mode variants exist instantly, tested by thousands of sites.
Limitations
- Matches are against the v3 hex palette; v4’s OKLCH rebuild differs slightly β near matches remain near in both generations.
How to use the HEX to Tailwind Color
- Pick or paste your color.
- Read the top-five nearest palette colors with side-by-side swatches.
- Use the named class when the match is near-identical β or keep your exact color as an arbitrary value.
Frequently asked questions
How is "nearest" measured?
Perceptual OKLab distance β the space where numeric closeness matches what eyes see. RGB distance famously fails at this; two colors can be numerically close and visually different.
When should I NOT take the nearest match?
When the distance is large (the tool says "noticeably different") or the color is a brand asset that must be exact β keep bg-[#yourhex], or generate a full custom palette from it with the Palette Generator.
Which palette are the matches from?
The v3 palette (hex values, extracted from the official package). v4's palette is a rebuilt OKLCH version with slightly different values β near matches remain near in both.
