How does hex to Tailwind conversion work?

Our converter uses the Delta E color distance algorithm to compare your input hex color against all 242 Tailwind CSS colors. It calculates perceptual color difference and returns the closest matches ranked by similarity.

What if there's no exact Tailwind match for my hex color?

The tool shows the closest matching Tailwind color along with a distance score. A distance of 0 means an exact match. Lower numbers indicate closer matches. We also show alternative matches so you can choose the best fit for your design.

Can I convert brand colors to Tailwind?

Yes! Enter your brand's hex color (like #FF5733) and get the closest Tailwind equivalent. This is perfect for mapping existing design systems to Tailwind CSS or finding Tailwind alternatives for Figma/Sketch colors.

What Tailwind classes can I copy?

For each matched color, you can copy bg-{color}-{shade} for backgrounds, text-{color}-{shade} for text color, border-{color}-{shade} for borders, and the raw hex value.

Instant Matching

Hex to Tailwind

Enter any hex color and instantly find the closest Tailwind CSS class. Copy-ready utilities in one click.

Your Color

Preview

#6366F1

Your color

#6366f1

Tailwind

#6366f1

indigo-500

Perfect

Exact

bg-indigo-500

text-indigo-500

border-indigo-500

#6366f1

Alternatives

Other close matches you might prefer

violet-500

#8b5cf6

Similar

indigo-600

#4f46e5

Similar

blue-500

#3b82f6

Similar

indigo-400

#818cf8

Similar

Pro Tips

Use the color picker for quick visual selection
Lower distance values mean closer matches
Distance of 0 means an exact Tailwind color
Check alternatives if the best match doesn't feel right