What is Tailwind Color Finder?

Tailwind Color Finder takes any color value — hex, rgb(), hsl(), or a CSS color name like teal — and instantly finds the closest matching Tailwind CSS utility class. Instead of eyeballing color palettes, paste a value from your design tool and get the exact class name to drop into your markup.

Matches use the perceptual ΔE distance in CIE Lab space, not raw RGB subtraction, so the result tracks what looks closest to the eye rather than what's numerically nearest. The full default Tailwind v3/v4 palette is searched, every family from slate through rose, shades 50 to 950, plus black and white. The top ten matches come back with their distance scores so you can pick the trade-off between hue and lightness.

How to use

1. Enter a hex color code from your design mockup or pick a color using the color picker.
2. The tool instantly shows the closest Tailwind CSS color class with a visual side-by-side comparison.
3. Copy the Tailwind class name (e.g., bg-blue-500) directly into your code. View the color distance to judge how close the match is.

When to use

• Translating brand or Figma hex codes into Tailwind classes for a fresh build.
• Auditing an old stylesheet with raw hex values and porting it to utility classes.
• Picking the closest semantic shade (red-500 vs rose-500) when a designer hands you a single hex.

Result

Your designer hands you a brand color #2563EB. Paste it in and the tool shows it matches blue-500 exactly. For #3A7BC8, it finds sky-600 as the closest match with a distance score showing how close it is.

FAQ

How does the tool decide which Tailwind color is closest?

It converts both hex values to CIE Lab and measures ΔE76, a perceptual distance that approximates how different two colors look to the eye. ΔE under 1 is essentially indistinguishable; ΔE above 5 is a noticeable shift in hue or lightness.

Which Tailwind version's palette is used?

The default v3/v4 palette: 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) at shades 50–950, plus black and white. Custom theme colors aren't included.

Why does my hex match a shade I wouldn't have guessed?

Lab distance balances hue, saturation, and lightness together. A dim teal can land closer to a slate shade than to a vibrant teal because the lightness gap dominates. Scan the full top-ten list when the first pick feels off and pick by hue family instead.

Can I copy the result as a CSS variable instead of a Tailwind class?

The detail panel shows both the class name (bg-blue-500) and the underlying hex. Copy the hex and wrap it in your own var(--brand) if you're using a CSS custom-property workflow rather than utility classes directly. And when nothing in the palette lands close enough, the tool surfaces the arbitrary-value class (bg-[#hex]) built from your exact color, so you can stay pixel-accurate without touching your theme.

Can I paste rgb(), hsl(), or a CSS color name instead of hex?

Yes. The input parses hex (#2563EB or 2563EB, 3- or 6-digit), rgb()/rgba(), hsl()/hsla() with degrees or unitless hue, and the full set of CSS named colors (teal, rebeccapurple, cornflowerblue, and so on). Alpha channels are ignored — the match runs on the opaque RGB equivalent.

Related Tools