How do I find the closest Tailwind color for a HEX code?

Paste your HEX code and the tool calculates perceptual color distance to every Tailwind color, then shows the closest match with its exact class name.

Which Tailwind version is supported?

Tailwind CSS v3 and v4, including all shades from 50 to 950.

What if my color has no close match?

The tool always returns the closest match by delta-E distance and shows the distance value so you can judge how close it is.

Does it show bg-, text-, and border- classes?

Yes. All major Tailwind class variants are shown for the matched color.

Yes, completely free with no signup required.

HEX to Tailwind Color Finder

Paste any HEX color and instantly find the closest Tailwind CSS color class using perceptual color matching. Copies bg-, text-, and border- classes with one click.

100% FreeNo Signup RequiredFiles Never Leave Your Device

Enter HEX Color

Try Examples

Closest Tailwind Colors

Best MatchPerfect

blue-500

Tailwind HEX: #3B82F6

blue-600Fair

#2563EB

indigo-500Fair

#6366F1

blue-400Fair

#60A5FA

sky-500Fair

#0EA5E9

indigo-400Approximate

#818CF8

Uses weighted color distance (human perception model) to find the visually closest Tailwind color - not just the mathematically nearest value. All 220+ Tailwind v3 colors included.