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.

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)

HSL exists because hex is unreadable to a human eye. Nobody can tell at a glance that #4a7c2f is a muted green, but hsl(96 46% 33%) says it outright: green hue, moderately saturated, fairly dark. That is why HSL is the form to reach for when you want a lighter variant of a colour rather than a different one.

How it is calculated

L = (max + min) / 2, S = (max − L) / min(L, 1 − L), H from which channel is the maximum

Lightness sits halfway between the strongest and weakest channel. Saturation measures how far apart they are, scaled so that mid lightness allows the widest range. Hue comes from which channel wins and by how much, mapped onto a 360 degree circle.

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

Questions people ask

Why is my grey reported as hue 0?
A grey has no hue at all — every channel is equal, so the angle is undefined. The specification treats that as a missing component; this tool writes 0 rather than leaving the slot empty.
Is HSL lightness the same as perceived brightness?
No, and this trips people up. hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue; both claim 50 percent lightness, yet the yellow looks far brighter. OKLCH was designed to fix exactly this.
Can I use this to build a colour scale?
You can, but hold the hue and vary lightness rather than nudging all three. Scales built by changing saturation and lightness together tend to drift in hue and stop looking like one family.

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