Color Models Explained: HEX, RGB, HSL, CMYK and LAB

A single color on your screen can be written six different ways and still be the same color. #3B82F6, rgb(59 130 246) and hsl(217 91% 60%) all light the same pixels. They differ only in what they ask you to think about. That is the whole point of having more than one color model: each one makes a different question easy to answer.

This guide walks through the models you will actually meet — RGB and its HEX shorthand, HSL, HSV, CMYK, and LAB — and says plainly where each one earns its place.

RGB: how screens actually work

Every pixel on a display is three tiny lights: one red, one green, one blue. RGB describes a color by saying how hard to drive each of them, on a scale from 0 to 255. All three off is black. All three at 255 is white. Red at 255 with the others off is the most saturated red the display can produce.

This is additive mixing — you are adding light. It is why red and green light make yellow, which surprises anyone who remembers mixing paint at school. Paint is subtractive; screens are not.

RGB is the honest, native description of what the hardware does, and that is its strength. It is also why RGB is a poor language for design decisions. If a client asks for "the same blue but a bit lighter", RGB gives you no obvious lever. You would have to raise all three channels by an amount you have to guess at, and if you get the proportions wrong the hue drifts.

HEX is RGB in disguise

A HEX code is not a different model. It is the same three RGB numbers written in base 16 and glued together. #3B82F6 splits into 3B, 82 and F6 — that is 59, 130 and 246 in decimal. Nothing is lost and nothing is gained; it is a compact, copy-pasteable spelling of the same thing.

Two conventions are worth knowing. Three-digit shorthand like #F80 expands by doubling each character, giving #FF8800. And an eight-digit code adds a fourth pair for alpha, so #3B82F680 is that blue at roughly 50% opacity. Our HEX to RGB converter handles all three forms, and the RGB to HEX converter goes the other way.

HSL: the model you should design in

HSL rearranges the same information into three questions a human actually asks:

• Hue — which color is it? An angle from 0 to 360 degrees around the color wheel. Red near 0, green near 120, blue near 240.
• Saturation — how intense is it? 0% is grey, 100% is as vivid as the hue gets.
• Lightness — how bright is it? 0% is black, 100% is white, and the pure hue sits at 50%.

Because those three move independently, "the same blue but lighter" becomes a single edit: raise the lightness, leave hue and saturation alone. The result is unmistakably the same blue. That property is what makes HSL the natural model for building a UI color ramp — a topic covered in more depth in our color harmony guide.

One caveat worth internalising: HSL lightness is not perceived brightness. hsl(60 100% 50%) is a searing yellow and hsl(240 100% 50%) is a deep blue, and both claim 50% lightness. Your eye disagrees strongly. Yellow at 50% is far brighter than blue at 50%, because human vision is much more sensitive to green and red wavelengths than to blue. This is exactly why contrast checking uses a luminance formula rather than the L value — see the accessible color guide for how that calculation actually works.

HSV: the model in your color picker

HSV shares hue and saturation with HSL but replaces lightness with value, meaning brightness. The practical difference is at the top of the scale. In HSL, pushing lightness to 100% always gives you white regardless of hue. In HSV, pushing value to 100% gives you the most vivid version of the hue, and you get white only by also dropping saturation to zero.

That behaviour maps neatly onto the square-and-slider picker in almost every design tool: the square is saturation against value, the slider is hue. If you have ever wondered why the picker in Photoshop or Figma feels different from writing HSL by hand, this is why. Our color wheel is HSV-based for the same reason — it matches the mental model people already have from their design software.

Use HSV when you are picking. Use HSL when you are systematically adjusting. The RGB to HSL converter shows both side by side so you can see the difference on a real color.

CMYK: for ink, not for screens

CMYK describes color as percentages of cyan, magenta, yellow and black ink laid on paper. It is subtractive: each ink removes wavelengths from the white light bouncing off the page. The K channel exists because mixing the three colored inks to make black produces a muddy brown and wastes expensive ink, so printers add a dedicated black.

The important practical fact about CMYK is that its gamut is smaller than your screen's. Bright saturated blues, vivid oranges and neon greens simply cannot be reproduced with ink. Any converter — including ours — gives you the nearest printable approximation, not an equivalent. If a color matters for print, get a physical proof. No amount of on-screen conversion substitutes for ink on the actual stock.

Treat any CMYK value you generate on the web as a starting point to hand to a printer, never as a final specification.

LAB: built to match human perception

LAB (formally CIELAB) was designed so that a fixed numerical distance corresponds to roughly the same perceived difference anywhere in the space. Its three axes are lightness from 0 to 100, an a axis running green to red, and a b axis running blue to yellow.

That perceptual uniformity is the point. In RGB, two colors twenty units apart might look identical in one part of the space and obviously different in another. In LAB the gap is far more consistent, which is why LAB underpins color-difference measurement, print matching, and the palette-generation algorithms that need evenly-spaced steps rather than evenly-spaced numbers.

You will rarely author a color in LAB by hand. You benefit from it indirectly, in tools that use it to decide what "one step lighter" should mean.

Choosing, in one paragraph

Store and share colors as HEX, because everything accepts it. Reason about adjustments in HSL, because it is the only model where the change you want maps to the number you edit. Pick in HSV, because that is what your picker gives you. Convert to CMYK only when a printer asks, and expect a shift. Let LAB work quietly inside the tools that need perceptual accuracy.

If you want to see all of this on one real color at once, open the image color detector, drop in any picture and click a pixel — every model above is listed together, computed in your browser, and each one is one tap from your clipboard.