No Login Data Private Local Save

Color to Tailwind Class Converter - Online Map Hex to closest

18
0
0
0

Color to Tailwind Class Converter

Find the closest Tailwind CSS color class for any HEX, RGB, or HSL color.

Input Color
Shade Variations

Enter a color to see the closest Tailwind shade palette.

All Tailwind Colors

Frequently Asked Questions

It converts any CSS color (HEX, RGB, HSL) into the closest Tailwind CSS color class. This helps you quickly find the right utility class for backgrounds, text, borders, and more.

We calculate the Euclidean distance between your input color and every Tailwind CSS default color in the RGB space. The color with the smallest distance is presented as the best match, along with a similarity percentage.

The tool uses the default color palette from Tailwind CSS v3.3+, which includes extended shades (50–950) for all colors.

You can enter colors as HEX (#ff0000 or ff0000), RGB (rgb(255, 0, 0)), or HSL (hsl(0, 100%, 50%)). The tool parses them automatically.

Currently the tool works only with the default Tailwind palette. For custom colors, you would need to extend the color set manually. We may support custom imports in the future.

We use simple RGB Euclidean distance, which is fast and works well for most use cases. While not as perceptually accurate as Delta-E, it reliably finds the visually closest Tailwind color in practice.
🔧 Related Tools