HEX, RGB & HSL Explained
Every colour on the web can be written three ways, and they all describe the same thing. Yet the one you choose has a real effect on how easily you can work with colour — because HEX and RGB tell you how a screen makes a colour, while HSL tells you what the colour actually is. That difference is worth understanding, and it makes building a palette dramatically easier.
How screens make colour
Every pixel on your screen is three tiny lights: red, green and blue. By varying their brightness, they can produce millions of colours. All three off is black; all three at full brightness is white.
This is additive colour mixing, and it is worth flagging that it is the opposite of the paint you learned as a child. Mixing paint removes light, so more mixing gets you closer to black. Mixing light adds it, so red + green makes yellow. This surprises people permanently.
HEX and RGB are two ways of writing down those three brightness levels.
RGB
The most direct notation. Three numbers, each from 0 to 255:
rgb(59, 130, 246) — a little red, a fair amount of green, a lot of blue. A pleasant blue.
Why 255? Because each channel is stored in one byte — eight bits — and 255 is the largest value eight bits can hold. Three channels × 256 possible values each gives about 16.7 million colours.
HEX
Exactly the same three numbers, written in hexadecimal and glued together:
#3B82F6 = 3B red, 82 green, F6 blue.
Each pair is one byte in hex, so each runs from 00 (zero) to FF (255). It is more compact than RGB, which is why it became the CSS default.
You can learn to read hex codes at a glance, and it is a genuinely useful skill. Just look at the relative size of the three pairs:
#FF0000— red at maximum, nothing else. Pure red.#FFFF00— red and green at maximum, no blue. Yellow.#888888— all three equal. Any colour with three equal pairs is a grey. That single rule is remarkably handy.#FF8800— full red, medium green, no blue. Orange.
Shorthand also exists: #FFF expands to #FFFFFF, each digit simply doubled.
HSL — the one designers should use
Here is the important part. HEX and RGB have a serious practical weakness: you cannot easily adjust them.
Suppose you want your blue #3B82F6 a little darker. Which numbers do you change, and by how much? Lowering just the blue channel does not darken it — it shifts the hue towards grey-green. To darken it properly you must reduce all three channels proportionally, and doing that in your head, in hex, is miserable.
HSL describes colour the way humans actually think about it — three intuitive properties:
- Hue (0–360°) — which colour, as a position on a colour wheel. 0 is red, 120 is green, 240 is blue, and 360 wraps back to red.
- Saturation (0–100%) — how vivid it is. 0% is grey; 100% is fully intense.
- Lightness (0–100%) — how light it is. 0% is black, 100% is white, and 50% is the pure colour.
Our blue is hsl(217, 91%, 60%). Now the adjustments become obvious:
- Darker? Lower the lightness.
hsl(217, 91%, 40%). - Muted? Lower the saturation.
hsl(217, 40%, 60%). - A different colour, same feel? Change the hue only.
Each property moves independently, which is exactly what you want and exactly what RGB does not give you.
Building a palette with HSL
This is where HSL stops being a convenience and becomes a genuine method.
Tints and shades. Keep the hue and saturation fixed, and vary only the lightness. This gives you a coherent family — hsl(217, 91%, 20/30/40/50/60/70/80%) — which is precisely how the colour scales in modern design systems are built. Trying to produce that same family by hand-picking hex codes gives you a set of colours that subtly clash.
Colour relationships become simple arithmetic on the hue:
- Complementary — add 180°. Directly opposite, maximum contrast.
- Analogous — ±30°. Neighbouring colours, naturally harmonious.
- Triadic — three colours 120° apart. Balanced and vivid.
You can build an entire coherent palette from one hue and some addition. In hex, this is essentially impossible without a tool.
Alpha: adding transparency
All three formats have a transparency variant:
rgba(59, 130, 246, 0.5)— the fourth value is opacity, 0 to 1.hsla(217, 91%, 60%, 0.5)— same idea.#3B82F680— an 8-digit hex, where the last pair is the alpha byte.
A useful gotcha: a semi-transparent colour is not the same as a lighter colour. A 50% transparent blue changes appearance depending on what is behind it. If you want a consistently lighter blue regardless of background, raise the lightness — do not lower the opacity.
Contrast and accessibility
Worth knowing, because it is a legal requirement in many contexts. Text must have sufficient contrast against its background — the WCAG standard asks for a ratio of at least 4.5:1 for normal text.
A trap: lightness in HSL is not the same as perceived brightness. Pure yellow hsl(60, 100%, 50%) and pure blue hsl(240, 100%, 50%) have identical lightness values, yet the yellow looks dramatically brighter to the eye. Our eyes are far more sensitive to green light than to blue.
So you cannot judge contrast by comparing HSL lightness numbers. Measure the actual contrast ratio.
Frequently asked questions
Which format should I use in CSS? All three work identically. Use HSL when you are designing or generating a palette; hex is fine for a fixed value.
How do I make a colour lighter? In HSL, raise the lightness. In hex, you would need to convert first — which is the whole argument for HSL.
Why do three equal hex pairs give grey? Equal red, green and blue means no colour dominates, so there is no hue left — only brightness.
Is HSL supported everywhere? Yes, in every browser, for many years.
Convert colours now
Use our Color Converter to translate any colour between HEX, RGB and HSL with a live preview — pick visually or type a code. To understand the hex notation itself, read binary, decimal and hex explained.