About Hex → Tailwind

Map a hex/rgb color to the nearest Tailwind class. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Mapping brand colors to the nearest Tailwind utility classes
• Converting Figma design tokens to Tailwind-compatible values
• Finding Tailwind equivalents during a CSS-to-Tailwind migration
• Ensuring color consistency when integrating third-party design assets

Tips

• Paste any hex code to find the closest Tailwind color class
• Compare the visual difference between your color and the match
• Use the result to stay within Tailwind's design system palette

Fun Facts

• Tailwind CSS was created by Adam Wathan and first released in November 2017, growing from a side project into one of the most popular CSS frameworks.
• Tailwind's default color palette contains 22 color families with 11 shades each (50-950), totaling 242 named color values.
• The Tailwind color palette was redesigned from scratch for v2.0 (2020) by Steve Schoger, using perceptually uniform color spacing for better aesthetics.

FAQ

Which Tailwind version?

v3.4 by default. Toggle for v2 (older color scale) or v4 (preview). Classes differ between major versions.

How exact is the match?

Best-fit in LAB color space. You get the closest Tailwind class; exact matches are rare unless you use Tailwind's palette directly.

Can I use arbitrary values instead?

If nothing matches well, use Tailwind's arbitrary value syntax: `bg-[#1a2b3c]`. The tool shows both options — mapped class and arbitrary-value escape hatch.

What about alpha?

Color match first, alpha applied as Tailwind's `/N` suffix: `bg-blue-500/75`. Round alpha to the nearest 5% for Tailwind's supported values.