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.
