Free Developer Tool - runs 100% in your browser
HEX / RGB / HSL Converter
Edit any field - the other two and the preview update instantly.
Scroll down to learn more about this tool
Convert colors between HEX, RGB and HSL
This color converter translates any CSS color between its three most common notations -HEX (#58ded6), RGB (rgb(88, 222, 214)) andHSL (hsl(176, 67%, 61%)) - with a live swatch so you always see what you're working with. Type in any field, use the native color picker, and copy the format your stylesheet needs.
HEX vs RGB vs HSL - which should you use?
- HEX - the most compact and universally recognized; ideal for design handoffs and brand palettes. Supports shorthand (
#fff) and alpha (#ffffff80). - RGB - maps directly to how screens emit light;
rgba()makes per-color transparency easy. - HSL - the most human-friendly: hue picks the color, saturation its intensity, lightness its brightness. Perfect for generating hover states (same hue, lower lightness) and full palettes programmatically.
How the conversion works
HEX is just RGB in hexadecimal - 58 = 88, de = 222, d6 = 214. HSL is a cylindrical remapping of the same values: hue is the angle on the color wheel (0–360°), saturation the distance from gray, lightness the distance from black to white. All conversions are exact and computed locally in JavaScript.
Building a theme? Pair this with the HTML preview to test your palette in real markup.