RGB to HSL
Convert red, green and blue channels into hue, saturation and lightness, the form that says what a colour actually is.
- 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.
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.
Related tools
HSL to RGB
Convert hue, saturation and lightness into the red, green and blue channels a screen actually uses.
RGB to HEX
Turn red, green and blue channel values into the hex code stylesheets expect, with alpha where you need it.
HEX to HSL
Convert a hex colour into hue, saturation and lightness — the form that makes a colour easy to lighten, darken or desaturate by hand.
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.
Opens your mail app with the page and tool already filled in.