Color Converter
Convert colors between HEX, RGB, HSL formats and find the nearest Tailwind CSS class instantly.
indigo-500
Nearest Tailwind color class
Convert Colors Between HEX, RGB, HSL and Tailwind Instantly
Jumping between color formats is a constant friction point when building UIs. Zolkit's Color Converter handles HEX, RGB, and HSL in both directions and even finds the closest Tailwind CSS color class — so you can go from a design tool hex code to a utility class in one step.
Three Formats at Once
Edit any format — HEX, RGB, or HSL — and all others update instantly. Change one number and every representation stays in sync.
Tailwind Color Matching
Automatically finds the nearest Tailwind v3 color class from the full 22-family palette using RGB Euclidean distance.
Live Color Swatch
A large color picker gives you an immediate visual preview of the selected color as you adjust values.
Copy Any Format
One-click copy for each format card — copy the HEX string, the rgb() function, the hsl() function, or the Tailwind class name.
100% Private
All color math runs locally in your browser. No data is sent to any server.
Free Forever
No account, no limits, no paywalls. Color conversion is always free.
How to Convert Colors
- 1
Click the color picker or type a value into any format field (HEX, RGB, or HSL).
- 2
All other format fields update automatically. The Tailwind card shows the nearest matching utility class.
- 3
Click the Copy button on any card to copy that format to your clipboard.
Frequently Asked Questions
What color formats does this tool support?
HEX (6-digit, e.g. #3b82f6), RGB (0–255 per channel), HSL (hue 0–360°, saturation and lightness 0–100%), and Tailwind CSS class names. You can edit any format and the rest update immediately.
How does the Tailwind color matching work?
The tool compares your color against all ~242 colors in the Tailwind v3 palette (22 color families × 11 shades each) using Euclidean distance in RGB space. The closest match is returned as the utility class name, e.g. 'blue-500'.
Will the Tailwind match always be exact?
Not always. If your color is exactly a Tailwind color the match is perfect. For arbitrary colors it returns the nearest neighbor, which may not be visually identical. The color swatch next to the class name lets you compare.
What version of Tailwind is the palette from?
The lookup table uses the Tailwind CSS v3 default palette, which includes all 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) across 11 shades (50 through 950).
Can I enter an HSL value directly?
Yes. Click into any of the three HSL number inputs (H, S, L) and type a value. The hue is 0–360 degrees, saturation and lightness are 0–100 percent. The HEX and RGB fields will update as you type.
Does this work offline?
Yes, once the page is loaded. All conversion math and the Tailwind lookup table are bundled in JavaScript — no network requests are made during color conversion.