Hex to Tailwind
Paste a hex code, or an RGB, HSL or OKLCH color, and get the closest Tailwind class. Matches are ranked by ΔE in OKLab, the color space Tailwind 4 uses, against the v4 palette or v3.
Closest Tailwind colors
Need the exact color? Use an arbitrary value:
Next closest
- 2 ΔE 6.4 Visible difference
- 3 ΔE 7.3 Visible difference
- 4 ΔE 8.6 Visible difference
- 5 ΔE 8.8 Visible difference
How the matching works
Tailwind CSS 4 defines every color in OKLCH. To find the closest class, the tool converts your color to OKLab, the same space without the polar coordinates, and measures the straight-line distance to each Tailwind color. The smallest distance wins. That distance, times 100, is the ΔE you see.
Comparing in OKLab instead of RGB matters. RGB numbers say how much light a screen emits, not how a color looks, so an RGB match can pick a shade that is visibly lighter or more saturated. In OKLab, equal distances look like equal differences.
Reading ΔE
| ΔE | What you see |
|---|---|
| Under 0.5 | The same color |
| 0.5 to 2 | Practically identical, even side by side |
| 2 to 5 | Close; a trained eye sees it side by side |
| 5 to 10 | A visible difference |
| Over 10 | A different color: use an arbitrary value or add it to your theme |
v4 or v3?
Pick the palette your project uses. The two share family names and steps, but v4's colors are more vivid and defined in OKLCH, so the same class can be a slightly different color. Matching against v4 compares with each color as it shows on an sRGB screen, the same hex codes listed on the Tailwind colors page.
Questions
How do I find the Tailwind class for a hex code?
Paste the hex code into the field above. The tool compares it with all 286 colors in the Tailwind CSS 4 palette (plus black and white) and lists the five closest, nearest first. Click a class name to copy it. Switch to v3 if your project still uses Tailwind CSS 3.
What does the ΔE number mean?
ΔE is the distance between two colors in OKLab, the color space Tailwind 4 is built on, multiplied by 100. Below 2 most people cannot see a difference side by side. Between 2 and 5 the colors look alike but a careful eye can tell. Above 10 they are clearly different colors.
Why OKLab instead of comparing RGB values?
RGB distance does not follow how we see color: two colors can be close in RGB numbers and look different, or the other way round, especially in blues and greys. OKLab is designed so that equal distances look like equal differences, which makes the closest match the one that looks closest.
Why does #3b82f6, Tailwind 3's blue-500, not match v4 exactly?
Tailwind 4 redrew the palette in OKLCH. The v4 blue-500 is oklch(62.3% 0.214 259.815), which is #2b7fff in sRGB, so the old #3b82f6 sits ΔE 1.9 away from it: practically the same color. With v3 selected, #3b82f6 matches blue-500 exactly.
Can I use my exact color in Tailwind instead?
Yes. Use an arbitrary value such as bg-[#3b82f6] for a one-off, or add the color to your theme with @theme { --color-brand: #3b82f6; } and use bg-brand, text-brand and the rest everywhere.
Which color formats can I paste?
Hex with or without the # (3, 6 or 8 digits; alpha is ignored), rgb() and rgba(), hsl() and hsla(), and oklch(). An OKLCH color outside sRGB is gamut mapped first, the way browsers do it.
Browse the free themes and AirControl, built on this palette.
Browse the library