Tailwind Color Converter

Find the closest Tailwind CSS class to any HEX color.

Enter a color

#3B82F6
Your color — we'll find the nearest class in the Tailwind palette by perceptual distance.

Closest Tailwind color

blue-500
·
Copy class Copy HEX

Other close Tailwind colors click any to load it

Full Tailwind palette click any swatch to match it

About the Tailwind Color Converter

What is the Tailwind color converter?

Tailwind CSS ships with a beautiful default palette — 22 color families, each in 11 shades from 50 to 950 — and most projects look best when they stick to it. But designs arrive as HEX codes: a mockup says #1D9BF0, a brand guide says #E11D48, and you're left squinting at the docs wondering which blue-* or rose-* that is. This tool answers it instantly: paste the HEX and get the closest Tailwind class, scored by perceptual CIE Lab distance so "closest" means closest to the eye, not just to the math.

You get the best match with its exact ΔE distance, twelve runners-up, and the entire palette laid out below to browse and click. A toggle switches between the Tailwind v4 palette (rebuilt in OKLCH, the current default) and the classic v3 hex palette, because the two differ subtly in many shades. Everything runs in your browser; your colors never leave the page.

How to Use This Tool

  1. Enter your color. Type or paste a HEX code, use the system picker, or grab any pixel on screen with the eyedropper.
  2. Pick your Tailwind version. v4 is the default; switch to v3 if your project hasn't migrated yet.
  3. Read the match. The nearest class appears with its HEX, RGB and a ΔE score that tells you how faithful the swap is.
  4. Copy the class. Choose a utility prefix like bg- or text- and copy the ready-to-paste class name.
  5. Or browse. Click any swatch in the full palette or the runner-up cards to inspect it.

Reading the ΔE score

  • ΔE ≤ 1 (identical): your color is effectively a Tailwind color — swap with confidence.
  • ΔE ≤ 2 (excellent): indistinguishable in normal UI use.
  • ΔE ≤ 5 (very close): fine for backgrounds and accents; check side by side for brand-critical marks.
  • ΔE > 10 (approximate): nothing in the palette is truly close — consider an arbitrary value like bg-[#1D9BF0] instead.

Common Use Cases

  • Implementing designs: Translate mockup HEX values into palette classes instead of scattering arbitrary values.
  • Adopting Tailwind: Map an existing site's colors onto the nearest palette entries during a migration.
  • Brand alignment: See whether your brand color has a usable Tailwind twin, and how far off it is.
  • v3 to v4 upgrades: Compare what a shade maps to in each palette before switching versions.
  • Quick lookups: Forgot what emerald-600 looks like? Find it in the palette browser and copy its HEX.

Working with the raw formats instead? Try the HEX to OKLCH converter — the format Tailwind v4 defines its palette in — or browse all our free color tools.

Frequently Asked Questions

How does it find the closest Tailwind color?

Your color and every palette entry are converted to the CIE Lab color space, and the tool measures the ΔE (Delta-E) distance between them — the standard way to quantify how different two colors look, rather than how far apart their RGB numbers are. The palette entry with the smallest ΔE wins, and the score is shown so you know how good the match really is.

Why do v3 and v4 sometimes give different answers?

Tailwind v4 rebuilt the entire default palette in OKLCH for perceptual consistency, which nudged most shades slightly — some visibly. A HEX code can therefore sit closest to sky-500 in one palette and blue-400 in the other. The toggle lets you match against the palette your project actually uses.

What if no Tailwind color is close enough?

Use an arbitrary value: Tailwind accepts any color inline, like bg-[#1D9BF0] or text-[#E11D48]. That's the right call for brand-critical colors when the best match shows a ΔE above 5 or so — you keep the exact color and stay within Tailwind's utility syntax.

Are these the official palette values?

Yes. The v3 palette is taken from Tailwind's published colors module, and the v4 palette from the framework's official theme definitions, converted from their OKLCH values to HEX with the same math browsers use. Both include all 22 families across shades 50–950, plus black and white.

Does it work with custom Tailwind themes?

The matcher covers the default palette that ships with the framework. If your project extends the theme with custom colors, the closest default class is still shown, which is usually the most useful starting point — but your own additions won't be in the list.

Is this tool free and private?

Completely. The matching runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the tool keeps working offline once the page has loaded.