RGB to HSL

Convert red, green and blue channels into hue, saturation and lightness, the form that says what a colour actually is.

HSLhsl(238.73 83.53% 66.67%)
HEX
#6366f1
RGB
rgb(99 102 241)
HSL
hsl(238.73 83.53% 66.67%)
OKLCH
oklch(0.5854 0.2041 277.12)

Three channel numbers tell you how a screen makes a colour, not what the colour is. rgb(74 124 47) means nothing at a glance; the same colour as hsl(96 45% 34%) reads immediately as a dark, medium-saturated green. This conversion is what colour pickers do internally when you drag a hue slider.

How it is calculated

L = (max + min) / 2, S = (max − L) / min(L, 1 − L), H from the winning channel × 60°

The channels are first scaled to 0..1. Lightness is the midpoint of the largest and smallest, saturation measures their spread relative to how much room that lightness leaves, and hue is found from which channel is largest and how far the other two trail behind.

Source: W3C CSS Color Module Level 4 §7.2 — converting sRGB colors to HSL, with hue as degrees 0..360 and saturation and lightness in reference range [0,100]

Questions people ask

Why do equal channels give hue 0?
Because equal channels are a grey and a grey has no hue. The angle is undefined, so it is reported as zero rather than left blank.
Does this change the colour?
No. HSL is another way of writing the same sRGB colour, not a different space. Convert back and you get the channels you started with.
Why does the spec mention negative saturation?
It can appear for colours far outside the sRGB gamut. The algorithm handles it by rotating the hue by 180 degrees and taking the absolute value, which lands on the same colour.

Found a problem, or want more?

A number that disagrees with its source is a defect, not a rounding preference.

What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.

Write to us

Opens your mail app with the page and tool already filled in.

Related tools