HEX to HSL Converter
Type a HEX value and get HSL straight away. Everything runs in your browser — nothing is sent to a server.
How the conversion works
The HEX is first converted to RGB, then to hue (0–360°), saturation and lightness. The gap between the largest and smallest channel sets saturation; their average sets lightness.
HEX
HEX is the same red-green-blue triplet as RGB, just written in base 16 so each channel fits in two characters. It survives everywhere — CSS, design tools, config files — because it is short and unambiguous. Case does not matter, and #abc is shorthand for #aabbcc. An eight-digit HEX adds alpha as a final pair, which is why #FF000080 is half-transparent red.
HSL
HSL rearranges the same color into axes people can actually steer: hue as an angle from 0 to 360°, saturation as a percentage, lightness as a percentage. Want a lighter version of the same color? Raise the lightness and leave the rest alone. The catch is that its lightness is arithmetic, not perceptual — yellow at 50% lightness looks far brighter than blue at 50%.
HEX to HSL, step by step
Worked through with #FF6347. Every number comes from the same engine the converter above uses.
-
Split into pairs
#FF6347 → FF · 63 · 47 -
Read each pair as base 16
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
Scale each channel to 0–1
R 1 G 0.388 B 0.278 -
Largest and smallest channel
max 1 min 0.278 max−min 0.722 -
Lightness
L = (max+min)/2 = 0.639 = 63.9% -
Saturation
S = (max−min)/(1−|2L−1|) = 100% -
Hue angle
H = 9.1° -
Result
hsl(9, 100%, 64%)
HEX to HSL examples
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 |
hsl(0, 100%, 50%) |
| Tomato | #FF6347 |
hsl(9, 100%, 64%) |
| Orange | #FFA500 |
hsl(39, 100%, 50%) |
| Gold | #FFD700 |
hsl(51, 100%, 50%) |
| Limegreen | #32CD32 |
hsl(120, 61%, 50%) |
| Teal | #008080 |
hsl(180, 100%, 25%) |
| Dodgerblue | #1E90FF |
hsl(210, 100%, 56%) |
| Royalblue | #4169E1 |
hsl(225, 73%, 57%) |
| Blueviolet | #8A2BE2 |
hsl(271, 76%, 53%) |
| Hotpink | #FF69B4 |
hsl(330, 100%, 71%) |
Common questions
Why does the hue jump around for grays?
A gray has no dominant channel, so the hue angle is undefined and conventionally reported as 0. Any hue works because saturation is 0 — the number is there to fill the slot, not to mean something.
Can I round the HSL numbers before using them?
Rounding the hue to a whole degree is safe. Rounding saturation and lightness to whole percents can shift the color by a step or two, which shows up if you convert back and compare HEX strings.
Is HSL lightness the same as the contrast checker uses?
No. Contrast ratios use relative luminance, which weights green far more than blue. A color can sit at 50% HSL lightness and still fail contrast against white.