Tools › Tailwind Converter

Find the Tailwind class
for any color

Enter any HEX color and instantly find the nearest Tailwind CSS class. Click any color in the palette to see its class.

Enter color
—
—
Usage examples
text- — copy
bg- — copy
border- — copy
ring- — copy
Nearest matches
Full Tailwind CSS palette

How search works

The algorithm compares your color with all ~220 colors in the Tailwind CSS v3 palette and finds the nearest one by Euclidean distance in RGB space. The result is the exact class name.

When you need this

When you receive a color from a designer in HEX and need to quickly find the corresponding Tailwind class. Or when you want to verify your color exists in the standard Tailwind palette.

Tailwind CSS v3

The tool uses the full Tailwind CSS v3 palette — including slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose.

FAQ
What if my color is not in Tailwind?
The tool will find the nearest color. If the difference is large, you can add a custom color in tailwind.config.js via the extend.colors section using the exact HEX you need.
Is Tailwind v4 supported?
Currently uses the Tailwind v3 palette. In v4 the color system changed, but the basic color names remain compatible.
How do I use the class in my project?
For a blue color the tool will give class blue-500. Use it as text-blue-500, bg-blue-500, border-blue-500 etc. — ready examples are shown in the card on the left.
Is this tool free?
Yes, completely free with no limits. No registration required, everything runs in your browser.