Last updated 3 September 2026
Why so many notations exist
HEX and RGB describe the same thing in different bases — three channels of light, nothing more. HSL and HSV rearrange those channels into hue, saturation and lightness, which is far easier to reason about when you want a colour that is the same but darker, or the same but less intense. CMYK belongs to a different world entirely: it describes ink on paper, where colours subtract light rather than add it, which is why a vivid screen colour often cannot be printed and the CMYK figure here should be treated as an approximation rather than a promise. The luminance value shown is the one contrast ratios are built from, and it is what decides whether black or white text sits more readably on top.
Related guide: How to build a brand colour palette that works
Why the formats exist
HEX and RGB describe the same thing in different notation — three channels from 0 to 255. HSL is a genuinely different model, describing a colour as a hue angle on a wheel, a saturation percentage and a lightness percentage, and that difference is what makes it useful for design work.
Building a colour scale illustrates it. In HEX you would have to guess values and check each one visually. In HSL you hold the hue and saturation and vary only the lightness, producing a set of tints and shades that are demonstrably related. Making a colour 10% lighter is a single number change in HSL; in HEX it is trial and error across three channels.
Alpha, and the newer colour spaces
Transparency appears as an eight-digit HEX value, where the last pair is the alpha channel, or as the fourth value in rgba() and hsla(). Modern CSS also accepts a slash form — rgb(58 123 213 / 50%) — which is now widely supported and is the syntax the specification prefers.
One limitation worth knowing about HSL: its lightness value is a mathematical figure, not a perceptual one. Two colours at 50% lightness with different hues will not look equally bright, because human sensitivity varies strongly across the spectrum — yellow reads much lighter than blue at the same nominal value. Newer CSS colour spaces such as OKLCH were designed to fix this, keeping perceived lightness consistent across hues, which makes them a better basis for palettes and for accessible contrast work. HEX, RGB and HSL remain the formats you will meet most often.
Common questions
Which format should I use in CSS?
Any of them work. HEX is the most common and the most compact, but HSL is often easier to work with by hand because adjusting lightness or saturation is a single number change rather than recalculating three.
Why is the CMYK value approximate?
CMYK describes ink, and the conversion depends on the paper, the press and the colour profile in use. The figure here is a straightforward mathematical conversion, which is close enough for a rough idea but not for print production.
What is relative luminance?
A weighted measure of how bright a colour appears, with green counting for more than red and red for more than blue, because human eyes are more sensitive to green. It is the basis of every WCAG contrast calculation.
Can I paste a colour in any format?
Yes. HEX with or without the hash, three or six digits, rgb() and hsl() are all recognised and converted the moment they parse.
When should I use HSL instead of HEX?
Whenever you are creating variations of a colour. Holding the hue and saturation while changing only lightness produces a coherent set of tints and shades in one number change, which in HEX would mean guessing across three channels.
How does transparency work in these formats?
As an eight-digit HEX value where the last pair is the alpha channel, or as the fourth value in rgba() and hsla(). Modern CSS also accepts a slash form such as rgb(58 123 213 / 50%), which is the syntax the specification prefers.
Why do two colours at the same HSL lightness look different in brightness?
Because HSL lightness is mathematical rather than perceptual, and human sensitivity varies across the spectrum — yellow appears much lighter than blue at the same value. Newer spaces such as OKLCH were designed specifically to keep perceived lightness consistent.