Tool · HEX to HSL

HEX to HSL converter.

Paste a HEX code and get hue in degrees, saturation and lightness in percent, ready to paste as CSS hsl(). HSL converts back to HEX in the same box.

3, 6 or 8 digits, with or without the hash.

Nearest named color: Sapphire
HSL out
225, 79%, 50%
hsl(225, 79%, 50%)
HSL is the easiest format to adjust by hand: change one number to make a color lighter, darker or less saturated. Its lightness is not perceptual, so for scales and themes use the OKLCH converter, which keeps steps visually even.

What is the hex to hsl?

HEX to HSL converts a hex color into hue (0 to 360 degrees), saturation and lightness (0 to 100 percent), the CSS format that is easiest to adjust by hand. It also converts HSL back to HEX, and RGB to HSL.

Why use HSL

To make a HEX color lighter, darker or less saturated you have to guess at three channels. In HSL you change one number. That is why HSL is common in CSS variables, theming and hover states. The limitation is that HSL lightness is not perceptual (a yellow and a blue at 50 percent lightness look very different), which is where OKLCH comes in; the converter shows both.

HEX to HSL FAQ

How do I convert HEX to HSL?

Paste the HEX. Hue, saturation and lightness appear in CSS hsl() syntax with a copy button.

What is #FF0000 in HSL?

hsl(0, 100%, 50%). Pure red is hue 0, fully saturated, at middle lightness.

Can I convert HSL to HEX?

Yes, the reverse field on this page takes hsl() or three numbers.

Related color tools

Learn more