These are not different colours. They are three ways of writing the same number, and only one of them lets you predict what a change will do.
The same colour, three notations
A colour on screen is three numbers: how much red, green and blue light. Everything else is presentation.
HEX writes those three numbers in base 16, two digits each. RGB writes them in base 10. HSL writes the same point in a different coordinate system — hue as an angle, saturation and lightness as percentages — but it resolves to the same three channel values.
| Notation | The colour | Best for |
|---|---|---|
| HEX | #B4442A | Fixed values in CSS; compact, copy-pasteable |
| RGB | rgb(180, 68, 42) | Computing channels, alpha compositing |
| HSL | hsl(11, 62%, 44%) | Deriving variants; readable by a human |
Converting is lossless in every direction, with one caveat: HSL percentages round. Round-tripping HEX → HSL → HEX can land a channel one value off, which is invisible but will fail an exact string comparison in a test.
Why HSL is the one you can think in
Look at #B4442A and try to name a colour 20% lighter. You cannot, without a tool. The three channels do not move together in any way you can do mentally.
Look at hsl(11, 62%, 44%) and the answer is hsl(11, 62%, 64%). Hue stays, saturation stays, lightness moves. That is the entire reason HSL exists.
- A hover state is usually the same colour 8–12% lighter or darker.
- A disabled state is the same hue at much lower saturation.
- A palette is one hue at several lightness steps, or several hues at one lightness.
- A complementary colour is the hue plus 180.
All four are one-number changes in HSL and guesswork in HEX. This is why design systems store hue, saturation and lightness as separate tokens and compose them, rather than storing forty hex values that drift apart the first time someone adjusts one.
Where HSL lies to you
One important caveat, because HSL is often oversold.
HSL lightness is not perceived lightness. hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue — the same stated lightness, and the yellow is dramatically brighter to the eye. Human vision is far more sensitive to green than to blue, and HSL does not model that at all.
The practical consequence: a palette built by holding lightness constant across hues will not look evenly weighted. If that matters, the modern answer is OKLCH, which is perceptually uniform — equal lightness numbers genuinely look equally light. Browser support is now good, and it is the right choice for new work. HSL remains fine for deriving variants of a single hue, where the perceptual problem does not arise.
Alpha and the fourth value
All three notations take an alpha channel now, and the syntax has settled into something simpler than it used to be.
Modern CSS accepts #B4442A80, rgb(180 68 42 / 50%) and hsl(11 62% 44% / 50%). The older comma-separated rgba() and hsla() functions still work and are not deprecated, but the space-separated form with a slash is the current syntax and reads better.
Eight-digit hex is the least readable of the three — nobody looks at 80 and thinks 50%. It is compact, which matters in a minified stylesheet and nowhere else.
What to actually do
- Store HSL or OKLCH components as custom properties — hue, saturation and lightness separately — so variants compose rather than being hand-written.
- Write HEX for one-off fixed values where nothing derives from it.
- Use RGB when you need the channels, which in practice means alpha compositing and canvas work.
- Check contrast after every change, not at the end. A lightness tweak that looks harmless can drop a text pair below 4.5:1, and you will not see it by eye.
The Color Converter moves between all three and shows the values side by side, and the Contrast Checker tells you whether the result is still legible — which is the check that actually decides whether a colour choice ships.
Frequently asked questions
Is there any quality difference between HEX, RGB and HSL?
No. All three describe the same point in sRGB and conversion is lossless. The only caveat is that HSL percentages round, so a HEX → HSL → HEX round trip can land one channel value off — invisible to the eye but enough to fail an exact string comparison.
Which should I use in CSS?
HEX for fixed one-off values, HSL or OKLCH for anything you derive other colours from, RGB when you need to compute a channel. Storing hue, saturation and lightness as separate custom properties is what lets hover and disabled states be generated rather than hand-written.
Why does HSL lightness not look consistent across hues?
Because HSL lightness is mathematical, not perceptual. Yellow and blue at the same stated lightness look nothing alike, since human vision is far more sensitive to green than blue. OKLCH fixes this and is the better choice for new palettes.
Should I use OKLCH instead?
For new work, yes. It is perceptually uniform, so equal lightness values genuinely look equally light, which makes cross-hue palettes work. Browser support is now good. HSL is still fine for deriving variants of a single hue.
Is rgba() deprecated?
No, and it still works everywhere. But modern CSS prefers the space-separated form with a slash — rgb(180 68 42 / 50%) — which reads more clearly and is consistent across rgb, hsl and the newer colour functions.
How do I make a colour lighter or darker reliably?
Convert to HSL and change only the lightness. In HEX there is no way to do it without a tool, because the three channels do not move together in any predictable way. That single fact is the main argument for HSL.