HEX vs RGB vs HSL

#E48267, rgb(228, 130, 103) and hsl(13, 68%, 65%) are the same colour. They are three notations for one point, and each one makes a different question easy to answer.

HEX: for recording

A hex code is red, green and blue written in base 16, two digits each, from 00 to FF. #E48267 is 228 red, 130 green, 103 blue. Three-digit codes are the same thing abbreviated — #F00 is #FF0000, each digit doubled.

Hex wins on being short, unambiguous and universally accepted. It is the right format for writing a colour down, pasting it into a field, or handing it to someone else. It is close to useless for reasoning about a colour: nothing about #E48267 tells you it is a soft terracotta.

RGB: for mixing

The same three numbers in base 10, which makes them easier to do arithmetic on. RGB is what you want when a colour is being computed rather than chosen — a blend between two values, a gradient step, an alpha channel via rgba().

It has the same problem as hex for human reasoning. Doubling every channel does not make a colour twice as bright, and adjusting one channel changes the hue as a side effect.

HSL: for adjusting

Hue, saturation and lightness. Hue is a position on the colour wheel from 0 to 360, where 0 is red, 120 is green and 240 is blue. Saturation is how far the colour is from grey. Lightness runs from black at 0% through the pure hue at 50% to white at 100%.

This is the one to use when you are changing a colour rather than recording it. A tint is the same hue and saturation with lightness raised. A shade is the same with lightness lowered. A muted version is the same with saturation dropped. Each of those is one number, and the colour stays recognisably itself.

Hex is for writing a colour down. HSL is for working out what it should have been.

Two things HSL is not

It is not perceptually uniform. hsl(60, 100%, 50%) — yellow — is far brighter to the eye than hsl(240, 100%, 50%) — blue — despite both being at 50% lightness. If you build a scale by stepping lightness across several hues, the steps will not look even.

And it is not a contrast measure. Two colours can be 40% lightness apart and still fail WCAG. Use the actual ratio for that.

What about LAB and OKLCH?

Both are perceptually uniform: equal numeric steps look like equal steps, across every hue. That makes them much better for generating scales and for measuring how different two colours are — which is exactly what Palettae uses LAB for internally when it decides whether two swatches are really the same colour. OKLCH now has real browser support and is worth learning if you build colour systems. For writing a colour down and getting on with your day, hex is still fine.