Color codes explained: HEX, RGB, HSL and CMYK
Every colour picker hands you four or five codes for the same colour. Here’s what each one actually describes, and which one to paste where.
It starts with light versus ink
A screen is dark until tiny red, green and blue lights switch on. Mixing light adds: red plus green makes yellow, all three make white. A printed page is white until ink goes down, and each ink subtracts part of the light bouncing back. That one difference is why there are two families of colour codes — and why a colour can look perfect on screen and dull on paper.
Try the toggle: the same three overlapping circles behave in opposite ways. If you like learning this way, ahaboo has narrated interactive explainers on how everyday things really work, one “aha” at a time.
Light adds up, ink takes away
This is the single idea behind every colour code. Toggle between a screen and a printed page.
Additive. A screen starts black. Each pixel has red, green and blue lights; turning them up adds light. All three at full (255, 255, 255) make white. That’s RGB, and HEX and HSL are just other ways to write the same three numbers.
RGB: three numbers from 0 to 255
rgb(196, 20, 95) means red light at 196 out of 255, green at 20 and blue at 95. With 256 levels per channel there are 256³ = 16,777,216 possible colours. Web colours are assumed to be in the sRGB colour space, a standard from HP and Microsoft (1996) that nearly every screen and browser follows.
HEX: RGB written in base 16
#C4145F is exactly the same colour: C4 = 196, 14 = 20, 5F = 95. HEX is popular simply because it’s short and easy to copy. The HEX to RGB converter has an interactive breakdown of the digits.
HSL: the same colour, described like a person would
hsl(334, 82%, 42%) — a hue angle on the colour wheel, a saturation (how far from grey) and a lightness (0% black, 50% full colour, 100% white). It’s still sRGB underneath, just rearranged so that “lighter”, “less saturated” or “the same but green” are one-number changes. See it on a wheel on the HEX to HSL page.
CMYK: ink percentages for print
cmyk(0%, 90%, 52%, 23%) — how much cyan, magenta, yellow and black ink to lay down. Web converters use a simple formula; real printing uses ICC profiles that know the press, inks and paper, so treat online CMYK as a brief, not a proof. The RGB to CMYK page walks through the maths step by step.
OKLCH: the modern CSS option
oklch(51.2% 0.199 1.6) — lightness, chroma and hue in the OKLab space (Björn Ottosson, 2020), supported in all major browsers since 2023. Its big advantage: two colours with the same OKLCH lightness actually look equally light, which HSL can’t promise. ImageColor Pro uses OKLab behind the scenes for palette extraction and colour naming.
Which one should you use?
| You’re working in… | Use |
|---|---|
| CSS, Figma, Canva, Webflow, WordPress | HEX (or OKLCH in modern CSS) |
| Code, game engines, LED controllers | RGB |
| Building tints, shades and themes | HSL or OKLCH |
| A brief for a print shop | CMYK as a guide, plus the HEX |
Got a colour in an image and need its codes? The colour picker from image gives all of them with one click.
Questions people ask
What is the difference between RGB and CMYK?
RGB describes coloured light (red, green, blue) added together on a screen, starting from black. CMYK describes inks (cyan, magenta, yellow, black) printed on paper, which subtract light starting from white. Screens use RGB; printing presses use CMYK.
Are HEX and RGB the same thing?
Yes — a HEX code is the RGB values written in base 16. #FF8000 and rgb(255, 128, 0) are the same colour.
What is OKLCH?
A newer CSS colour format (lightness, chroma, hue) built on the OKLab colour space from 2020. Unlike HSL, equal steps in its lightness look equally different to the eye, which makes it good for building accessible colour scales.