HEX, RGB or HSL — which one should you use?
All three describe exactly the same colours. #4f46e5,
rgb(79 70 229) and hsl(243 75% 59%)
are one indigo written three ways. They are not, however, equally easy to work with — and the
difference shows up the moment you need a second shade.
What each one is actually saying
HEX — #4f46e5
Three pairs of hexadecimal digits: red, green, blue, each 00–FF. Compact, universally supported, and completely opaque to a human — nobody looks at #4f46e5 and thinks "indigo".
RGB — rgb(79 70 229)
The same three numbers in decimal. Slightly more readable, and the format you need when a value has to be computed rather than written.
HSL — hsl(243 75% 59%)
Hue as an angle on the colour wheel (0–360), then saturation and lightness as percentages. The only one of the three whose numbers correspond to how people describe colour.
The case for HSL, in one example
Take that indigo and make a darker hover state. In HEX you guess, check, and guess again — there is no arithmetic that gets you there, because the three channels do not map onto "darker" in any useful way.
In HSL you subtract from the third number:
One number changed, three times. A whole palette from one hue is the same trick: keep the hue, vary the lightness. This is why design systems that are built in HSL tend to look coherent and ones assembled from hand-picked HEX values often do not.
So when is HEX still right?
More often than the previous section implies.
- Brand colours. A brand guideline gives you a HEX value. Storing it as anything else invites a rounding error to creep in between formats.
- Anywhere outside CSS. Design tools, email templates, SVG attributes and most APIs speak HEX and sometimes only HEX.
- Fixed one-off values. A colour that will never have variants gains nothing from being HSL.
A workable rule: HEX for the values you are given, HSL for the values you derive.
Alpha, and the mistake it causes
rgba() and
hsla() add
transparency, and modern CSS also accepts eight-digit HEX where the last pair is alpha —
#4f46e580
is that indigo at 50%.
The mistake is using transparency to make a lighter shade. A 20%-alpha indigo looks like a pale indigo on white and like a muddy dark one on a dark background, and it picks up whatever is behind it in between. If you want a lighter colour, raise the lightness. Reserve alpha for things that are genuinely meant to be see-through: overlays, shadows, and hover tints that should pick up the surface underneath.
Whichever you pick, check the contrast
None of the three formats tells you whether text will be readable on the colour. WCAG asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text, and a mid-lightness brand colour with white text on it frequently fails. It is a two-second check and it is the difference between a palette that looks good in a mockup and one that works for the people using it — including the roughly one in twelve men with some form of colour vision deficiency.