Tailwind Color Finder
FreeInput any color and find the nearest Tailwind CSS class match
tailwindcolorfindmatchcss
All Color ToolsRelated tools
How it works
1
Enter
Input any color value in HEX, RGB, or HSL format.
2
Match
The tool compares your color against the full Tailwind CSS color palette and finds the closest matches.
3
Copy
Copy the Tailwind class name or the exact HEX value of the matched color.
Frequently asked questions
Which version of Tailwind CSS colors does this use?+
It uses the default color palette from Tailwind CSS v3, which includes all standard color families and their shade scales from 50 to 950.
How does it determine the closest color?+
It calculates the perceptual distance between your input color and every Tailwind color using the CIEDE2000 formula, which accounts for how humans perceive color differences.
Is the matching done in my browser?+
Yes. The entire Tailwind palette is embedded in the tool and all distance calculations run locally in your browser with no server calls.
What if no Tailwind color is close to my input?+
The tool always returns the nearest match, but it also shows the distance score. If the distance is large, you may want to use an arbitrary value like bg-[#hex] instead of a named class.
Can I use this to migrate a design to Tailwind CSS?+
Yes. Enter each color from your existing design and the tool will suggest the closest Tailwind equivalent, making it straightforward to map a custom palette to Tailwind classes.