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.
- 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.
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.
Related tools
HSL to HEX
Turn hue, saturation and lightness into a hex code — useful when a colour was picked by feel and now has to go into a stylesheet or a design file.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.
HEX to OKLCH
Convert a hex colour to OKLCH, the perceptual colour space where equal changes in lightness actually look equal.
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.