A single colour can be written a dozen different ways: #3DDC84, rgb(61, 220, 132), hsl(151, 68%, 55%), a CMYK ink mix, or a set of LAB coordinates. They all point to the same green — so why do so many systems exist? Because each was designed to answer a different question, and picking the right one makes a task that is fiddly in one model effortless in another.
This guide maps the colour-space landscape: what each model measures, what it is good at, and when to reach for it. When you need to actually convert between any two, the colour converters handle every pairing instantly in your browser.
The big split: light vs. ink
Before the individual models, one distinction explains half the confusion. There are two physically opposite ways to make colour:
- Additive (light) — start from black and add red, green and blue light. More light = brighter; all three at full = white. This is how screens, projectors and your eyes work. RGB and HEX live here.
- Subtractive (ink/paint) — start from white paper and subtract light by layering pigment. More ink = darker; the inks are cyan, magenta and yellow (plus black). This is how printing works. CMYK lives here.
Because they are inverses, a colour mixed from light and the same colour mixed from ink never match perfectly — the root cause of “it looked different when I printed it,” covered in CMYK vs RGB.
RGB and HEX: how screens think
RGB describes a colour as three numbers — how much red, green and blue light, each 0–255. HEX is the exact same three numbers written in base-16 as a #RRGGBB string, the form CSS and design tools use. They are the native language of every screen, which is why all other models are ultimately converted to RGB to be displayed. The full mechanics — why 255, how hex digits map to values, and the alpha variants — are in RGB & HEX Explained.
rgb(61, 220, 132) 20% lighter but keep the same hue. Hard in RGB; trivial in HSL. That gap is exactly why the next model exists.HSL and HSV: how designers think
HSL (hue, saturation, lightness) and the closely related HSV rearrange the same colours around how people describe them: hue is the colour itself (an angle on the colour wheel, 0–360°), saturation is how vivid versus grey it is, and lightness is how bright. This makes everyday edits intuitive — spin the hue to recolour, drop the saturation to mute, raise the lightness to tint — which is why colour pickers and design tools use it. The difference between HSL and HSV, and when each is handier, is in HSL & HSV Explained.
CMYK: how print works
CMYK (cyan, magenta, yellow, key/black) is the ink model. Anything destined for a physical printer — business cards, packaging, magazines — is ultimately CMYK. The catch is gamut: ink can reproduce fewer colours than a screen can emit, so the most vivid screen colours shift to the nearest printable equivalent. Designing with that limit in mind avoids unpleasant surprises at the print shop. See CMYK vs RGB.
Perceptual models: LAB, LCH, OKLab, OKLCH
RGB and HSL have a hidden flaw: equal numeric steps do not look like equal visual steps. A gradient that is mathematically even in RGB can look lumpy — bunched in some hues, washed out in others — because the maths does not match human vision. The perceptual models fix this. LAB and the modern OKLab/OKLCH are built so that the same numeric distance looks like the same amount of colour change everywhere.
That property is quietly powerful: smooth gradients, colour palettes with even visual spacing, and — because lightness is meaningful — far more reliable contrast and accessibility calculations. OKLCH in particular is now in CSS for exactly these reasons. The why and how is in Perceptual Colour: LAB & OKLCH.
Which model for which job
| Task | Reach for |
|---|---|
| Storing / specifying an exact colour in code | HEX or RGB |
| Tweaking a colour by hand (lighter, more muted, shift hue) | HSL / HSV |
| Anything going to a physical printer | CMYK |
| Smooth gradients & evenly-spaced palettes | OKLCH / LAB |
| Checking text contrast for accessibility | Perceptual lightness (OKLCH/LAB) |
Converting between them
You rarely pick just one model — you move between them constantly: design in HSL, ship HEX, proof in CMYK, build gradients in OKLCH. Every one of those conversions is a button press. The colour-converter tools translate any model to any other instantly and locally, and the Contrast Checker uses perceptual lightness to verify accessibility. Read on into the deep-dives to understand exactly what each set of numbers means.
Frequently asked questions
Why are there so many color models?
Each model answers a different question. RGB and HEX match how screens emit light. HSL and HSV match how people reason about colour (hue, then how vivid, then how bright). CMYK matches how ink absorbs light for print. The perceptual models (LAB, OKLCH) keep equal number changes looking like equal visual changes, which matters for gradients and accessibility.
Are RGB and HEX the same thing?
Effectively yes — a hex code like #3DDC84 is just the red, green and blue values (61, 220, 132) written in base-16. Both describe the same colour the same way; hex is simply a compact text form used in CSS and design tools.
Which color model should I use for a website?
Use RGB/HEX for fixed colours, HSL when you want to tweak a colour by hand (lighten it, shift the hue), and a perceptual model like OKLCH for gradients and for generating accessible colour scales. All of them ultimately render as RGB on screen.
Why does a colour look different when printed?
Screens make colour by adding red, green and blue light; printers make it by layering cyan, magenta, yellow and black ink, which absorbs light. Some bright screen colours simply cannot be reproduced with ink (they are "out of gamut"), so they shift to the nearest printable colour.