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.

More color tools

Color PickerUpload a photo and click anywhere — get HEX, RGB, HSL and color name Palette from ImageExtract 5–8 dominant colors from any image Palette BuilderGenerate N colors with guaranteed text readability Color HarmoniesComplementary, analogous, triadic and split-complementary Color VariationsLighter, darker, more saturated, paler, warmer, cooler Gradient GeneratorCreate beautiful gradients and copy the CSS code WCAG ContrastCheck AA and AAA accessibility — free Color Blindness SimulatorHow colors look to people with protanopia, deuteranopia and other types Color ConverterHEX ↔ RGB ↔ HSL ↔ CMYK instantly, with one-click copy Color by NameFind HEX by name — "terracotta", "indigo", "azure" CSS Filter for SVGRecolor SVG icons to any color via CSS without a code editor Color PalettesCurated palettes by theme — click a color to copy HEX