RGB vs HSL vs LAB vs CMYK: Which Color Model Should You Use, and When

Every color you've ever placed on a screen has been described by a number — but not always by the same kind of number. RGB, HSL, LAB, and CMYK are four different languages for describing color, each invented to solve a different problem. Choosing the wrong one doesn't just cause syntax friction; it produces real, visible mistakes: washed-out brand colors in print, gradients with dead gray bands in the middle, and "identical" colors that render differently across devices.

Here's what each model actually is, and when it deserves your attention.

RGB: the model of screens

RGB describes a color as three amounts of light — red, green, and blue — mixed additively from black. Your monitor physically works this way, so RGB is the native language of every display, camera, and scanner.

In CSS you'll write it as rgb(9, 132, 227) or its hexadecimal shorthand #0984e3 (HEX is just RGB with different notation — more on that below).

Use RGB when:

• You're styling anything that lives on a screen — this is the default.
• You're doing programmatic color math like blending or alpha compositing; the channels map directly to light.

Where RGB falls short: human perception isn't linear. Doubling the R value does not make a color feel twice as red, and equal numeric steps don't look equally spaced. That perceptual gap is exactly why the other models exist.

HSL: RGB made human

HSL takes the same RGB gamut and re-expresses it as Hue (0–360° position on the color wheel), Saturation (0% = gray, 100% = pure hue), and Lightness (0% = black, 100% = white). The color it describes is identical; only the mental model changes.

That difference matters enormously in day-to-day design work. Need a hover state 10% darker than hsl(204, 93%, 46%)? Change one number: hsl(204, 93%, 36%). Try doing that in RGB and you're adjusting three unrelated values by trial and error. Building a palette ramp — eight shades of one hue from pale to near-black — is a five-minute job in HSL and an afternoon in RGB.

Use HSL when:

• You're building palettes, ramps, or state variants (hover, active, disabled).
• You want CSS variables like --brand-h: 204 that let an entire theme shift by editing one value.

The caveat: HSL fixes the ergonomics problem but not the perception problem. Its lightness channel lies: yellow at L=50% looks far brighter than blue at L=50%, because HSL ignores how strongly the human eye weighs each primary. Gradients interpolated in HSL between distant hues can pass through surprisingly muddy territory.

Modern CSS addresses this with oklch() and hsl()'s newer cousins (hwb(), lab(), lch()), but classic HSL remains the pragmatic sweet spot for interface work today. Our image color picker displays every picked pixel simultaneously in RGB, HSL, CMYK, LAB, and more — a fast way to build intuition for how the models relate.

HEX is RGB in a trench coat

Worth clearing up, because it's a common interview question: HEX is not a separate model. #0984E3 is literally R=09, G=84, B=E3 written in base 16. There is no color HEX can express that RGB cannot.

Why does it dominate then? Compactness, history, and copy-paste safety. Design tools, style guides, and Slack messages standardized on six-character codes decades ago, and they survive because they're unambiguous and short. Keep using HEX for documentation and handoffs; switch to HSL when you need to manipulate.

CMYK: the model of ink

CMYK is subtractive rather than additive: it describes how much cyan, magenta, yellow, and black (K) ink to lay down, with white coming from the paper itself. Print shops live in CMYK because presses work in ink coverage, not light.

Three things bite designers who ignore CMYK:

1. Gamut mismatch. Screens can display vivid, luminous colors (especially saturated blues and oranges) that physical ink simply cannot reproduce. Convert a neon UI accent straight to print and it lands duller and darker than expected.
2. Rich black vs plain black. Text set as C0 M0 Y0 K100 prints fine, but large black areas printed with K-only often look washed out. Print designers use "rich black" (e.g., C60 M40 Y40 K100) for big fills.
3. Conversion surprises. RGB→CMYK conversion is where brand guidelines get violated, usually right before a trade show.

Use CMYK when: you're preparing assets for offset or digital printing, ideally working inside a CMYK document profile from the start rather than converting at the last minute.

LAB and LCH: the model of human vision

CIELAB (usually just "LAB") was designed by scientists asking a deceptively hard question: how do we describe color the way humans see it?

LAB uses three axes:

• L* — lightness, from 0 (black) to 100 (white)
• a* — green ↔ red
• b* — blue ↔ yellow

The crucial property is that LAB is perceptually uniform: a change of the same numeric size looks like the same visual difference no matter where in the space you make it. Neither RGB nor HSL can say that. This uniformity is why LAB underpins serious color work everywhere — Photoshop's color engine internally converts everything to LAB, and the modern web's oklch() color space (used by Tailwind v4 and many design systems) is a corrected descendant of it.

Use LAB/LCH when:

• You're interpolating gradients and want smooth, even transitions without the gray dead-zone HSL sometimes produces.
• You're computing perceptual color distance (delta-E) — e.g., "which catalog color is closest to our brand swatch?"
• You're building accessibility tooling; contrast math is fundamentally a lightness calculation, and LAB's L* tracks perceived lightness far better than HSL's.

The catch: LAB numbers are unintuitive. Nobody senses what lab(52% 68 45) looks like. It's a machine-native model — brilliant for computation, awkward for conversation.

A decision table you can bookmark

| Scenario | Best model | Why | | --- | --- | --- | | Everyday CSS | HEX or rgb() | Ubiquitous, unambiguous | | Palette ramps & theme variants | HSL | One-number adjustments per property | | Modern design systems (2025+) | OKLCH | Perceptually even scales, wide-gamut ready | | Smooth gradients between distant hues | OKLCH / LAB | No muddy midpoints | | Print production | CMYK | Matches ink behavior and press profiles | | Color-distance math, QA automation | LAB (delta-E) | Perceptual uniformity |

How they fit together in practice

A realistic pipeline looks like this: pick and refine colors in HSL (or OKLCH if your stack supports it) → store and share them as HEX → verify contrast and gradient behavior computationally in LAB → export a CMYK variant through a proper profile only when something goes to print.

You don't need to convert manually. Every color picked in our image picker is shown in all major formats at once, and palettes built with the generator can be exported as Tailwind configs, CSS custom properties, or JSON via the exporter.

The deeper takeaway: color models aren't competing standards, they're different projections of the same object. Fluency means knowing which projection makes the current problem trivial — and reaching for it without ceremony.