Tailwind palette
Tailwind Color Converter - Find Closest Class
Convert any Hex, RGB or HSL color to the nearest Tailwind CSS palette color and copy bg, text, border and ring class names.
Closest Tailwind colors
How to use this tool
Paste a brand or design color and find the closest Tailwind palette match. The tool ranks nearby Tailwind colors, shows distance, and produces utility class names you can copy into markup.
- 1 Enter a color from your design.
- 2 Compare the closest Tailwind palette matches.
- 3 Copy bg, text, border or ring utility classes.
Frequently asked questions
Is the match exact?
Only when the input equals a Tailwind palette value. Otherwise the tool returns the nearest available Tailwind colors.
How are Tailwind matches ranked?
Colors are compared in perceptual OKLab space, which usually feels closer to human color judgment than raw RGB distance.
Can I use this with custom brand colors?
Yes. Use the nearest Tailwind match for quick prototypes, or copy your original color into a custom Tailwind theme token.
Which Tailwind classes are generated?
The tool generates common bg-, text-, border- and ring- utility classes for the closest palette color.