How to convert HEX to HSL

Convert HEX to normalized RGB

Split the HEX value into red, green, and blue pairs, convert each pair to decimal, then divide by 255. For #336699:

• Red: 51 ÷ 255 = 0.2
• Green: 102 ÷ 255 = 0.4
• Blue: 153 ÷ 255 = 0.6

Calculate lightness

Find the largest and smallest normalized channels, then average them:

For #336699, maximum = 0.6 and minimum = 0.2. Lightness is 0.4, or 40%.

Calculate saturation and hue

Let delta equal maximum minus minimum. If delta is zero, the color is gray, saturation is 0%, and hue is conventionally reported as 0.

Otherwise, saturation depends on lightness:

For the example, delta = 0.4 and lightness = 0.4, so saturation is 0.5, or 50%.

Hue depends on which channel is largest. Blue is largest here, so the blue-channel branch produces 210 degrees. The result is hsl(210 50% 40%).

Preserve alpha when present

Four and eight-digit HEX include alpha in the final digit or pair. Convert it to a 0 to 1 value and return HSLA. Alpha does not change the underlying hue, saturation, or lightness, but it changes the color after compositing over a background.

Conversion may introduce small rounding differences. Keep more precision during calculation, then round the displayed HSL channels only at the end.

Convert with ToolPixels

The free HEX to HSL tool accepts short or full HEX, preserves alpha in HSLA output, and reports HSL channels to three decimal places.

Convert HEX to HSL