Tailwind Color Converter
Match any HEX to the closest Tailwind color class, and convert a class back to HEX instantly
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Match any HEX color to the perceptually closest class in Tailwind CSS's default palette (22 color families × 11 shades, 242 colors in all). Conversely, pick a color family and shade to instantly see and copy that class's exact HEX and RGB values.
How to use
- On the 'HEX → Class' tab, set a color using the color picker or the HEX input.
- Check the closest Tailwind class, candidate colors, and the Δ (color distance), then copy the class, HEX, or bg- utility.
- On the 'Class → HEX' tab, select a color family and shade to display the HEX and RGB values.
- Use the copy button next to the value you need and paste it straight into your code.
FAQ
- Why does the matched class color differ slightly from my actual color?
- Tailwind's default palette has only a fixed set of 242 colors, so it can't perfectly equal an arbitrary HEX. This tool picks the most similar color using perceptual (redmean) color distance—the smaller the Δ shown, the closer it is to your original.
- Can I still use this with Tailwind v4?
- The default palette's color values are essentially identical between v3 and v4, so most of them carry over directly. That said, if your project redefines theme colors with custom values, you should follow that configuration.
- Is the color I enter sent to a server?
- No. All conversion happens entirely in your browser, and no data is transmitted or stored. Treat the resulting class name as a reference and cross-check it against your actual design system values.