HEX, RGB, HSL and CMYK: which colour format should you use?

Four ways to say the same colour

The colour your browser displays can be written as #47003A, rgb(71, 0, 58), hsl(326, 100%, 14%) or cmyk(0, 100, 18, 72) — four notations, one identical hue on screen. They are not different colours, they are different vocabularies, and each one was designed around a different job. The format you reach for should be chosen by the job, not habit.

That framing settles most format arguments immediately. Storage, editing, print and perceptual scaling each have a natural fit, and the mismatch — using a perceptual format for storage, or a print format for CSS — is where the practical pain comes from.

HEX: compact storage, opaque meaning

#47A248 is six hex digits in three pairs that are literally R, G and B written in base-16. It is the CSV of colour: compact, unambiguous, pasteable anywhere, and nearly impossible to reason about. You cannot look at a hex value and know whether the colour is dark or saturated — the encoding hides the meaning.

Use hex as the interchange format. It is what design tools, brand guidelines and code exports share. It is also precisely the format you should avoid editing by hand, because editing a value you cannot read is guessing.

RGB: channels you can feel

rgb(71, 0, 58) is the same colour written for the additive physics of a screen: each channel 0–255, mixed like light. The model is intuitive at the channel level — raise the red, the colour warms — and it is the honest representation of how a monitor actually works.

But channel intuition breaks the moment you want qualitative edits. Making a colour 'darker' is not subtracting a constant from every channel; that shifts the hue. RGB is the vocabulary of hardware, not the vocabulary of design intent.

HSL: built for editing

hsl(326, 100%, 14%) is the first format designed around how humans describe colour: hue around a circle, saturation as a percentage, lightness as a percentage. 'Take the hue and make it lighter' is a one-variable edit. This is why colour pickers and design tools let you work in HSL instead of channel triplets.

The catch is perceptual unevenness: a 10% lightness step near the dark end feels much larger than the same step near the middle. HSL is a brilliant editor's vocabulary and a mediocre scaler's vocabulary. For scaling, you want the next format.

CMYK: beloved only by printers

cmyk(0, 100, 18, 72) is subtractive ink percentages — cyan, magenta, yellow, key (black) — and it exists because paper subtracts light instead of adding it. It is indispensable for print: business cards, packaging and brand collateral are specified in CMYK because inks mix differently from pixels.

On screen it is a translation, not a native language. No CSS property, design system or web colour conversation uses CMYK directly, but you will still need to read it when a print designer hands you a brand value in inks. Convert it to hex — that is the version your code and your design system actually consume.

Why OKLCH matters more than all of them

OKLCH is the perceptual answer to HSL's unevenness: its lightness axis matches how humans actually judge brightness, so equal steps are equal to the eye. That is why ChromaBrew derives its entire 50–950 scale in OKLCH — a 700 that is 'one perceptible step' from 600, instead of a number that happens to be 100 apart.

For daily work you still convert into hex to communicate, but you should generate and scale in a perceptual space and translate at the boundary. There is more depth on the trade-offs in our earlier guide.

Convert without losing the colour

Every format in this post is a different spelling of the same hue, and converting should never change the colour. Our colour converter parses any recognisable colour and emits every format side by side — hex, RGB, HSL, CMYK and OKLCH — live, with one-click copy. The same #47003A reads across all five vocabularies:

HEX:  #47003A
RGB:  rgb(71, 0, 58)
HSL:  hsl(326, 100%, 14%)
CMYK: cmyk(0, 100, 18, 72)
OKLCH: oklch(0.162 0.111 324.1)