HEX to Tailwind Converter

This is a HEX to Tailwind converter. It finds the closest default class by CIEDE2000. On v3, #3B82F6 is blue-500. Copy bg-, text-, border-, ring- or bg-[#hex].

Examples

Close alternatives

Full Tailwind palette

Convert several colors at once. One per line, or commas such as #3B82F6, #FF573380. Fill example loads three rows and the table below.

HEX to Tailwind Converter

This is a HEX to Tailwind converter: paste a HEX and it finds the closest class in the default palette by CIEDE2000 (how the colors look), not raw RGB. Toggle v4 (official OKLCH) or v3. On v3, #3B82F6 is exactly blue-500. You can also type bg-blue-500 to get the HEX back.

How to use

  1. Paste HEX, pick a color, use Random, click an example swatch, or (where the browser allows) sample a pixel on screen.
  2. Choose v4 or v3. Read the nearest class, its HEX, and the ΔE00 score.
  3. Copy bg-, text-, border-, ring-, fill- or an arbitrary value like bg-[#1D9BF0].
  4. If the best match is not quite right, click a close alternative. The grid is the full default palette for the version you selected.
  5. Show example uses #3B82F6. Copy result copies the class (with the prefix you selected). Batch accepts HEX or class names.

Reading ΔE

ΔE ≤ 1 is effectively the same color. ΔE ≤ 2 is fine for UI. ΔE ≤ 5 is close enough for backgrounds. Above that, prefer an arbitrary value such as bg-[#hex] so the brand color stays exact.

Notes

Default palette only (slate…rose, 50–950, plus black and white). Custom theme colors are not in the list. v4 values come from Tailwind’s official OKLCH theme, converted to HEX. WCAG contrast is not on this page — use Color Converter. Related: HEX to RGB.

Where to use it

Turning a mockup HEX into a Tailwind class, checking whether a brand color has a usable twin, comparing v3 vs v4 before an upgrade, copying utilities without opening the docs.

Questions

Is this Tailwind v3 or v4?

Both. The default is v4. Switch to v3 if your project still uses the older HEX palette. The same HEX can land on different class names in each version.

What if two classes are equally close?

The smaller ΔE wins. If ΔE ties, palette order wins.

What if nothing is close enough?

Copy the arbitrary chip, for example bg-[#1D9BF0]. That keeps the exact HEX inside Tailwind syntax.