HEX to HSL

HSL is the one you can reason about

#b8380f tells you nothing until you render it. hsl(14.6 84.9% 39%) tells you it is a red-orange, strongly saturated, on the dark side — and, more usefully, tells you what to change.

• Hue 0–360 around the colour wheel: 0 red, 120 green, 240 blue.
• Saturation 0–100%: grey to fully saturated.
• Lightness 0–100%: black through the pure hue at 50% to white.

Want a lighter version of the same colour? Raise the lightness. In hex you would have to convert, adjust three numbers and convert back.

Building a palette from one colour

This is what HSL is genuinely good for.

• A tint or shade: keep hue and saturation, change lightness only.
• A complementary colour: add 180 to the hue.
• An analogous pair: ±30.
• A muted version: drop saturation, leave the rest.

Every one is a single-number edit, which is why design systems tend to be defined in HSL even when they ship as hex.

Lightness is not brightness

50% lightness is the pure hue — not “half as bright as white”. Pure yellow and pure blue are both 50% lightness in HSL, and yellow is visually far brighter.

HSL is a convenient transformation of RGB, not a perceptual model. If you need “equally bright”, that is LAB or OKLCH, not HSL.

Nothing is uploaded

Converted in this page.