CalConverters

Hex to HSL Converter

Paste a hex colour like #ff6347 or #f00 and get the matching hsl() value instantly, plus the same colour in RGB, HSV and CMYK if you need it.

Files never leave your device
hslhsl(9, 100%, 64%)
hex#ff6347
rgbrgb(255, 99, 71)
hsvhsv(9, 72%, 100%)
cmykcmyk(0%, 61%, 72%, 0%)

Hue, saturation and lightness, briefly

HSL describes a colour the way a person tends to describe it out loud: what colour is it, how vivid, how light or dark. Hue is degrees around a colour wheel — 0 is red, 120 is green, 240 is blue, and it wraps back to red at 360. Saturation is how far the colour sits from a neutral grey at that same lightness, from 0% (grey) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the purest version of the hue) to 100% (white). Hex and RGB store the same information as three channel intensities; HSL stores it as three separate, independently adjustable ideas. That separation is the whole reason to convert in this direction: hex and RGB are what a colour picker hands you, but HSL is what you want once the task changes from "record this colour" to "make a version of this colour that's a bit darker" or "pick something 30 degrees around the wheel from this one."

Converting #ff6347 by hand

Hex to HSL goes through RGB first. #ff6347 is rgb(255, 99, 71). Lightness is the average of the largest and smallest channel: the largest is 255, the smallest is 71, and (255 + 71) / 2 is 163, which as a share of 255 is about 64% — the l in hsl(9, 100%, 64%). Saturation compares how far apart the channels are (184, from 71 to 255) against how central that lightness is; here the two work out equal, giving 100%. Hue looks at which channel is largest — red, in this case — and how far green sits from blue relative to that spread, landing at 9 degrees, just past pure red toward orange.

Tip: You don't need to redo this arithmetic by hand day to day — that's what the converter above is for. Knowing the shape of it is what makes an HSL value readable on sight instead of a mystery triple of numbers.

Why you'd reach for HSL instead of hex

The payoff shows up the moment you want to adjust a colour rather than just record it. Take hsl(9, 100%, 64%), the tomato red above, and change only the lightness:

LightnessHex equivalentLooks like
20%#660f00Near-black maroon
40%#cc1f00Deep brick red
64%#ff6347The original tomato red
80%#ffa899Light salmon
95%#ffe9e5Barely-tinted white

Every row is the same hue and the same saturation — only lightness moved. Reaching the same five shades starting from hex would mean recomputing all three channel values five separate times, because hex has no channel that isolates "lighter" from "a completely different colour."

Tip: Building a hover or disabled state for a brand colour? Keep the hue and saturation fixed and shift lightness by 10–15 points — it reads as the same colour, just dimmer or brighter, which is usually exactly the effect a hover state wants.

A second example, and where saturation goes to zero

#2ecc71, a common UI green, converts to hsl(145, 63%, 49%) — a hue in the green third of the wheel, well saturated, and close to the midpoint lightness where hues look their most vivid. Compare that with #333333, which converts to hsl(0, 0%, 20%): saturation is 0%, because red, green and blue are all equal (51 each), so there is no colour to point a hue at. This tool reports 0 for hue in that case by convention — any number would do, since at 0% saturation the hue channel has nothing left to affect. It's worth remembering when you're scripting against HSL values pulled from real UI colours: a hue of 0 might mean "red," or it might mean "grey, hue is meaningless here," and only the saturation number tells you which.

Frequently asked questions

What do hue, saturation and lightness actually measure?
Hue is a position on a colour wheel, 0 to 360 degrees, running red, yellow, green, cyan, blue, magenta and back to red. Saturation is how far the colour sits from grey at that lightness, 0% to 100%. Lightness is how close the colour sits to black or white, 0% for black, 100% for white, 50% for the purest version of the hue.
How is lightness worked out from a hex value?
Convert the hex to RGB first, then average the largest and smallest of the three channels. For #ff6347, the channels are 255, 99 and 71 — the largest is 255, the smallest is 71, and their average is 163, which as a percentage of 255 is about 64%. That is the l in hsl(9, 100%, 64%).
Why does #ff6347 come out as exactly 100% saturation?
Saturation depends on how far apart the largest and smallest channel are relative to the lightness. #ff6347's channels span from 71 to 255, a wide gap relative to how light the colour is, which is what full saturation looks like — a colour with no grey mixed in at all.
What does hue mean for a grey like #333333?
Nothing, technically, and this tool reports it as 0 by convention. #333333 has equal red, green and blue — 51, 51, 51 — so there is no direction on the colour wheel to point to. Saturation is 0% for the same reason, and at 0% saturation the hue number has no visible effect at all.
If I only change the L in hsl(9, 100%, 64%), does the hue stay the same?
Yes — that is the entire point of the format. hsl(9, 100%, 20%) and hsl(9, 100%, 80%) are a darker and a lighter version of the same red as hsl(9, 100%, 64%), because only the third number moved. The same edit on a hex or RGB value would require recomputing all three channels.
Is HSL lightness the same thing as brightness in HSV?
No, and mixing them up is a common source of confusion. HSL lightness reaches 100% at pure white, so a fully lit, fully saturated colour sits at 50% lightness. HSV value reaches 100% at the fully lit colour itself, with no notion of mixing toward white built in.