Online color converter
Web design constantly switches between color notations: a mockup gives you HEX, CSS wants HSL to tweak lightness, or code needs RGB values. This color converter converts HEX, RGB and HSL in real time with a live preview — change one and the other two update instantly.
How to use
- Enter a color in any field (HEX, RGB or HSL).
- The other two formats and the preview update instantly.
- Copy the format you need into your CSS or design tool.
Common use cases
- Turn a mockup's HEX into the HSL you want in CSS.
- Use HSL to fine-tune light/dark variants of one hue.
- Get RGB values for use in code.
Reach for HSL to tweak brightness — and mind the alpha
Working between CSS and design tools, you constantly need the same color in HEX, RGB, and HSL — the mockup hands you a HEX value, but your CSS wants rgba, or you need HSL to nudge the hue. Two practical tips. To lighten or darken a color, HSL is the intuitive choice: leave hue and saturation alone and just move the L (lightness) to get a tidy set of shades from one base color, which beats guessing at HEX digits. And don't forget transparency: an 8-digit HEX tacks two alpha characters onto the end, while rgba adds a separate 0–1 value — the two formats express it differently, so watch that you don't drop it in the conversion.
Why does dragging the hue slider on a grey do nothing?
The output of this page answers it directly. White #ffffff is 0, 0%, 100%, black is 0, 0%, 0% and mid grey #808080 is 0, 0%, 50% — all three report hue 0, but that 0 is not "red": it is undefined and reported as zero, because saturation is 0%. Compare pure red at 0, 100%, 50%: same hue number, completely different meaning. While saturation stays at zero, no amount of hue will tint anything.