Hex, RGB, HSL and CMYK: Colour Codes Explained Properly
Four ways of writing the same colour, and the one that makes building a palette easy. How to read a hex code by eye, why CMYK cannot match your screen, and what contrast actually requires.
Updated August 22, 20267 min read
Hex, RGB, HSL and CMYK are four notations for the same thing, in the way that a half, 0.5 and 50% are three notations for one quantity. Converting between the first three is exact arithmetic with nothing lost. The interesting part is not the conversion — it is that one of these models makes designing a palette almost mechanical, and most people never use it because hex codes are what they were handed first.
The four notations
| Notation | Example | What it says | Where you meet it |
|---|---|---|---|
| Hex | #3B82F6 | Red, green and blue in base 16 | CSS, design tools, brand guidelines |
| RGB | rgb(59, 130, 246) | The same three numbers, 0–255 | CSS, image editors, code |
| HSL | hsl(217, 91%, 60%) | Hue, saturation, lightness | Palette design, theming |
| CMYK | 76, 47, 0, 4 | Ink percentages for four plates | Print, and only print |
Hex and RGB are the same information written two ways. A hex code is six digits in three pairs — red, green, blue — each pair a number from 00 to FF, which is 0 to 255 in ordinary counting. So #3B82F6 is red 3B (59), green 82 (130), blue F6 (246). The hex to RGB converter does this instantly, but the structure is worth knowing because it lets you read a code approximately by eye.
Three-digit hex codes are a shorthand where each digit is doubled: #F60 means #FF6600. And an eight-digit code adds a fourth pair for alpha, so #3B82F680 is the same blue at 50% opacity. Both appear in real stylesheets and confuse people who are expecting six digits.
Why HSL is the one worth learning
RGB describes colour the way a screen produces it — three lights at three intensities — which is a description of the hardware, not of what you see. It is nearly useless for design decisions. Ask for a slightly darker version of #3B82F6 and RGB gives no obvious answer. Ask which of two colours is more saturated and you have to think.
HSL describes colour the way people talk about it. Hue is the position on the colour wheel from 0 to 360 degrees: red at 0, green at 120, blue at 240. Saturation runs from 0% (grey) to 100% (vivid). Lightness runs from 0% (black) through 50% (the pure colour) to 100% (white). Each is a separate dial, and each dial does exactly one thing.
- A darker shade of the same colour. Keep hue and saturation, lower the lightness.
hsl(217, 91%, 60%)becomeshsl(217, 91%, 45%)— a hover state, done. - A muted version for backgrounds. Keep hue and lightness, drop saturation to 15%. It will still read as belonging to the same family.
- A complementary accent. Add 180 to the hue. Add 30 for a neighbour that harmonises rather than contrasts.
- A full tint ramp for a design system. One hue, one saturation, lightness at 95, 90, 80, 65, 50, 40, 30, 20. That is an eight-step scale from a single decision.
- A palette that holds together. Pick three or four hues spaced evenly round the wheel and keep saturation and lightness constant. Colours chosen this way match automatically.
None of that is available in hex or RGB without conversion, which is the practical argument for running your brand colour through the RGB to HSL converter once and doing your thinking in that space. The palette generator applies the same hue-rotation logic — in a perceptual colour space, so lightness genuinely stays equal — if you would rather start from a result than from the arithmetic.
Hex, RGB, HSL and CMYK in every direction — converted on your device, with nothing sent anywhere.
Convert a colour codeCMYK is a different kind of conversion
The first three notations are interchangeable descriptions of the same thing. CMYK is not, and this is where colour genuinely gets lost rather than merely re-notated. RGB is additive: a screen emits red, green and blue light, and all three at full strength make white. CMYK is subtractive: cyan, magenta, yellow and black inks absorb light from white paper, and more ink means darker.
The consequence is that the set of colours ink can produce is smaller than the set a screen can emit, and the gap is largest exactly where designers like to work. Vivid blues, electric greens, hot oranges and anything neon exist on screen and have no ink equivalent. A conversion has to substitute the nearest printable colour, and on paper that looks flatter than what you approved on the monitor.
| Colour | On screen | Printed in CMYK |
|---|---|---|
Pure #0000FF blue | Electric, saturated | Noticeably duller and more purple |
Bright #00FF00 green | Vivid | Considerably darker and greyer |
| Neon and fluorescent shades | Glowing | Unreachable without a spot colour |
| Deep black text | Solid | Fine — but use rich black for large areas |
| Skin tones, earth tones, pastels | Normal | Reproduce very well |
Two practical habits follow. Check your key brand colours in the RGB to CMYK converter before committing to them for anything that will be printed, so you find out about a gamut problem at the design stage rather than at proof stage. And for large black areas, do not use pure K black — a rich black mixing in some cyan, magenta and yellow avoids the washed-out grey that single-plate black produces on a big fill.
Pulling colours out of an image
Often the colour you want already exists in a photograph, a screenshot of a competitor's site, or a logo somebody sent as a PNG with no brand guidelines attached. The palette generator has an eyedropper that reads the exact value of any pixel in an image you open; paste that code into the colour picker to get all four notations at once.
Two cautions about picking from photographs. JPEG compression alters colour subtly, especially at edges and in flat areas, so the pixel you sample may be a compression artefact rather than the true colour — sample from the middle of a large flat region rather than near a boundary. And a photograph carries the lighting it was shot under, so a brand red photographed in warm indoor light samples as orange. For a logo, ask for the vector file or the actual hex code; sampling is for when nothing better exists.
Contrast, and the numbers that matter
Whichever notation you use, colour choices are constrained by legibility. The accessibility guidelines express this as a contrast ratio between text and its background: at least 4.5:1 for normal body text, and 3:1 for large text — roughly 24px, or 19px when bold — and for the visual boundaries of controls such as buttons and form fields.
HSL helps here only as a rough guide, because the calculation is based on relative luminance — how bright a colour actually looks — not on HSL lightness. At the same HSL lightness, yellow is far brighter than blue: #FFFF00 against #0000FF is about 8:1. And two fully saturated colours at the same lightness — a pure red and a pure green at 50% — look violently different yet reach only about 2.9:1, which fails even the 3:1 minimum and is harder still for a viewer with red-green colour blindness. That single failure mode accounts for a good share of inaccessible interfaces; checking the actual ratio rather than trusting a difference in hue prevents it.
Frequently asked questions
How do I convert a hex code to RGB?
Split the six digits into three pairs and read each as a base-16 number from 00 to FF, which is 0 to 255. So `#3B82F6` is red 59, green 130, blue 246. A three-digit code like `#F60` is shorthand for `#FF6600`, with each digit doubled, and an eight-digit code adds a fourth pair for alpha transparency.
Is HSL better than RGB?
For describing a colour to a screen they are equivalent — every HSL value maps to exactly one RGB value. For making design decisions HSL is far better, because it separates hue, saturation and lightness into independent dials, so darker shades, muted variants and matching palettes each become a change to one number rather than a guess at three.
Why do my colours look different when printed?
Screens emit light and printers absorb it, and ink simply cannot reach some of the colours a screen can produce — vivid blues, bright greens and anything neon in particular. The conversion substitutes the nearest printable colour, which reads as duller. Checking key colours in CMYK before you commit avoids the surprise at proof stage.
What contrast ratio do I need for readable text?
At least 4.5:1 between text and background for ordinary body text, and 3:1 for large text of about 24px or 19px bold, as well as for the boundaries of interactive controls. The number is driven by relative luminance — how bright each colour actually appears — so two colours with different hues but similar brightness will fail no matter how different they look. HSL lightness is only a rough guide: a pure red and a pure green share 50% lightness yet reach only about 2.9:1.