HEX to Tailwind: Closest Tailwind Color
Enter a color — HEX, RGB, HSL or a CSS name — and get the five closest Tailwind classes, ranked by CIEDE2000 ΔE, with HEX, OKLCH and the CSS variable. Or paste a whole palette and copy one ready @theme block. Runs in your browser.
Your color
Closest Tailwind v4 colors
bg-blue-500Good · ΔE 1.24
- HEX
- ≈ #2B7FFF
- OKLCH
- oklch(62.3% 0.214 259.815)
- CSS
- var(--color-blue-500)
Wide-gamut color: an sRGB screen shows it as this approximate HEX.
bg-sky-600Distant · ΔE 7.85
- HEX
- ≈ #0084D1
- OKLCH
- oklch(58.8% 0.158 241.966)
- CSS
- var(--color-sky-600)
Wide-gamut color: an sRGB screen shows it as this approximate HEX.
bg-indigo-400Distant · ΔE 9.28
- HEX
- ≈ #7C86FF
- OKLCH
- oklch(67.3% 0.182 276.935)
- CSS
- var(--color-indigo-400)
Wide-gamut color: an sRGB screen shows it as this approximate HEX.
bg-blue-400Distant · ΔE 10.07
- HEX
- ≈ #51A2FF
- OKLCH
- oklch(70.7% 0.165 254.624)
- CSS
- var(--color-blue-400)
Wide-gamut color: an sRGB screen shows it as this approximate HEX.
bg-blue-600Distant · ΔE 12.50
- HEX
- #155DFC
- OKLCH
- oklch(54.6% 0.245 262.881)
- CSS
- var(--color-blue-600)
Browse the whole palette on Tailwind colors.
HEX to Tailwind examples
| HEX | Tailwind v4 | ΔE | Tailwind v3.4 | ΔE |
|---|---|---|---|---|
| #3B82F6 | blue-500 | 1.2 | blue-500 | 0.0 |
| #6366F1 | indigo-500 | 2.5 | indigo-500 | 0.0 |
| #10B981 | emerald-500 | 1.6 | emerald-500 | 0.0 |
| #F59E0B | amber-500 | 2.7 | amber-500 | 0.0 |
| #FF5733 | orange-600 | 6.1 | orange-600 | 7.6 |
| #1A1A2E | slate-900 | 3.6 | slate-900 | 3.9 |
How the match is found
Your color and every Tailwind color are converted to CIELAB and compared with CIEDE2000, the standard perceptual Delta E formula. The Tailwind v4 palette is read from the tailwindcss package itself: 286 colors in OKLCH. Matching uses what an sRGB screen shows for each one, so a color picked with an eyedropper from a Tailwind v4 site comes back with ΔE 0 and the right name. Colors that are identical, such as zinc-50, neutral-50 and mauve-50, are shown on one row.
Tailwind v4 colors and HEX
Tailwind v4 defines its colors only in OKLCH, and 95 of them are wider than sRGB. Their HEX here is an approximation: the nearest color an ordinary screen can show. On a wide-gamut display the class itself renders the fuller color, so use the class or the CSS variable, not the HEX, wherever you can.
HEX to Tailwind: questions
- How do I convert a HEX color to a Tailwind class?
- Enter the HEX code above and pick the class with the lowest ΔE. For example, #3B82F6 is closest to blue-500 in Tailwind v4 (ΔE 1.2). If no class is close — #FF5733 is ΔE 6.1 from orange-600 — use an arbitrary value such as bg-[#ff5733] or add your own color to the theme.
- Why does my Tailwind v3 HEX not match Tailwind v4?
- Tailwind v4 redefined its palette in OKLCH. Of the 242 colors that share a name in v3.4 and v4, 57 keep the same HEX; the others moved, most of them slightly. As an sRGB screen shows them, the biggest shift is orange-400 (ΔE 3.9). Switch the version above to match against the palette your project uses.
- What does ΔE mean in the results?
- ΔE (CIEDE2000) is the perceptual difference between your color and the Tailwind color. Below 1 the difference is not visible, 1 to 3 is a good match, 3 to 6 is noticeable but similar, and from 6 up the colors are visibly different — the tool then says there is no close Tailwind color.
- Why are some Tailwind v4 HEX values marked ≈?
- 95 of the 286 Tailwind v4 colors lie outside sRGB, the range HEX can describe. For those, the HEX shown is the nearest sRGB color found by CSS gamut mapping — what an ordinary screen displays. The OKLCH value is Tailwind's own.
- Can I convert a whole palette at once?
- Yes. Switch to «Paste a palette» and paste one color per line, optionally as «name: #hex». You get the nearest class for every line and one @theme block (or tailwind.config.js colors for v3) to copy into your project.
Tailwind CSS is made by Tailwind Labs Inc. This site is not affiliated with Tailwind Labs and does not use Tailwind itself; the palettes are listed as reference data.