PRACTICAL GUIDE
HEX, RGB and HSL: Which Colour Format to Use and When
The three ways to write a colour on the web, what the numbers mean, and why HSL is the one to reach for when you need to adjust a shade by hand.
Last updated
They describe the same colours differently
HEX, RGB and HSL are three notations for the same underlying thing: how much red, green and blue light a pixel emits. Converting between them is lossless and mechanical. Nothing is gained or lost by choosing one — but each is much easier to work with for a different task.
HEX is compact and universal. RGB is the same numbers in decimal, with an obvious place to put transparency. HSL rearranges them into terms a human can reason about.
HEX: compact and everywhere
A hex colour is three pairs of hexadecimal digits, one each for red, green and blue, ranging from 00 to FF — that is 0 to 255 in decimal. So #FF0000 is full red, #000000 is black and #FFFFFF is white. The three-digit shorthand doubles each digit, so #F00 is identical to #FF0000. A modern four or eight digit form adds an alpha channel on the end. Its advantage is brevity and the fact that every design tool speaks it.
RGB: the same thing in decimal
rgb(255 0 0) is the same red. The values are more readable than hex once you are calculating rather than copying — doubling a channel is obvious in decimal and fiddly in hex — and the alpha variant is well supported. In practice teams choose between hex and RGB on style rather than substance.
HSL: the one you can actually reason about
HSL splits a colour into hue, an angle from 0 to 360 around the colour wheel; saturation, from grey to fully vivid; and lightness, from black through the colour to white.
This is what makes it useful. A hover state is the same hue with lightness reduced by ten percent. A muted variant is the same colour with less saturation. A complementary accent is the hue plus 180 degrees. Doing any of that in hex means converting in your head or guessing, which is how palettes end up subtly inconsistent.
A practical way to work
Build the palette in HSL, where the relationships between colours are visible in the numbers, then convert to hex for handoff to designers and tools that expect it. Modern CSS also lets you keep the components in variables and recombine them, which gives you the HSL benefits without abandoning the rest of your stack.
Contrast is not a colour format problem
None of these notations tell you whether text will be readable. Accessibility guidance asks for a contrast ratio of at least 4.5 to 1 for normal text against its background, and that ratio depends on relative luminance, which is not simply the L in HSL — two colours with identical lightness values can have very different luminance. Check contrast with a dedicated checker rather than eyeballing the numbers.
What about the newer colour spaces
CSS now supports spaces such as OKLCH that cover a wider gamut and behave more predictably when you adjust lightness, because they are designed around how eyes actually perceive brightness. They are worth learning for new work. HEX, RGB and HSL are not going anywhere, since they describe everything a standard screen can display and every tool in the chain understands them.
Frequently asked questions
Is there any quality difference between hex and RGB?
None. They are two ways of writing the same 8-bit-per-channel values, and converting between them is exact in both directions.
Why does my colour look different in another application?
Colour management. The same RGB values are rendered differently depending on the colour profile assumed by the display and the software. Design tools often work in a wider profile than a browser assumes, which is why an export can look flatter than the original.
What is the difference between HSL and HSB or HSV?
They share the hue and saturation ideas but differ in the third component. In HSL, 50 percent lightness is the pure colour and 100 percent is white. In HSB, 100 percent brightness is the pure colour and there is no route to white without lowering saturation. Design tools tend to use HSB; CSS uses HSL.
Should I still use three-digit hex shorthand?
It is perfectly valid and compresses well, but it can only express 4,096 colours, so it constrains you to values where both digits of each channel match. For a considered palette, write the full six digits.