Tailwind CSS Color Finder
Find the closest Tailwind CSS color name and shade for any color.
Closest Match
Related Guide
Tailwind CSS Color Finder: Match Any Color to the Right Shade
About This Tool
Free Tailwind CSS color finder — paste any HEX or RGB color and instantly get the closest matching Tailwind CSS utility class, like bg-blue-500 or text-rose-600, calculated by comparing your color against the full default Tailwind palette. No sign-up, no upload, entirely browser-based. Front-end developers building with Tailwind constantly need to translate a designer's exact color (from Figma, a brand guide, or a screenshot) into the nearest Tailwind shade instead of writing arbitrary values. This tool shows the matched swatch, the exact class name, and the HEX value of that Tailwind shade side-by-side with your input color so you can see how close the match is before using it in your markup.
How to Use
- 1
Enter a color
Paste a HEX code (e.g. #3B82F6) or pick a color visually.
- 2
See the closest match
The tool compares your color against the full Tailwind CSS palette and shows the nearest shade.
- 3
Copy the class name
Copy the Tailwind utility class (e.g. bg-blue-500) directly into your markup.