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.
Build a Tailwind theme from one colour
A Tailwind colour scale and theme config generated from a single brand colour.
- HEX to Tailwind Color you are hereFind the nearest Tailwind colour to the one you have.
- Tailwind Color Palette GeneratorGenerate a full 50-950 scale around it.
- Tailwind Theme Generator (v3 config + v4 @theme)Assemble the scale into a theme config.
