RGB, CMYK, HSL: which color mode you should actually design in

Color modes are not interchangeable descriptions of the same thing. They are different mathematical models for describing color, each built for a different output medium and workflow. RGB is additive — light mixed together. CMYK is subtractive — inks mixed on paper. HSL is perceptual — how designers actually think about color. Choosing the wrong mode for your context produces predictable problems: colors that look right on screen and wrong in print, brand colors that cannot be consistently replicated, and palette adjustments that are impossible to describe verbally to a developer. Understanding when to use each model — and how they relate to each other — is a foundational design skill.

Color Theory Workflow

Highlights

RGB describes additive color: red + green + blue light at full intensity produces white. This is physically correct for screens, which emit light. CMYK describes subtractive color: cyan + magenta + yellow + black ink absorbs light, and combining at full density produces near-black.

HSL (Hue, Saturation, Lightness) is the correct mode for design decisions because it maps directly to how designers describe color changes: 'make it warmer' (adjust hue), 'less saturated' (adjust saturation), 'lighter' (adjust lightness). RGB values provide no intuitive handle for these adjustments.

Not all RGB colors can be reproduced in CMYK. Highly saturated reds, oranges, and greens are often outside the CMYK gamut — they can be specified in screen design but cannot be accurately printed without gamut mapping, which changes the color.

RGB: the correct mode for screen design

RGB works by emitting red, green, and blue light at varying intensities. At (0,0,0), no light is emitted — black. At (255,255,255), all channels are at maximum — white. For screen design, RGB is the native color model of every display, browser, and operating system. CSS hex values (#3A86FF), rgb() functions, and HSL in code all ultimately render as RGB on screen. Design in RGB. Specify colors in RGB. Any color you specify in a design tool should be exported with an sRGB color profile — the web standard — to ensure that browser color management reproduces it correctly. The RGB model does not, however, provide an intuitive interface for making design decisions. Increasing the R channel while decreasing G and B to 'make a color warmer' is not a natural design operation.

CMYK: for print, with important limitations

CMYK describes the physical mixture of ink on paper. Cyan, magenta, and yellow are the primary subtractive colors; black (K, for 'key') is added to deepen shadows and reduce ink volume. The CMYK gamut is significantly smaller than the RGB gamut. Colors that are reproducible on a calibrated display — electric blue, neon orange, vivid green — often have no accurate CMYK equivalent. When you convert an RGB color to CMYK, the software performs gamut mapping to find the closest printable match. This is lossy. For brand work that will appear in both digital and print contexts, the correct approach is to establish Pantone (PMS) values as the color standard, then derive both RGB and CMYK approximations from those PMS values, rather than converting screen RGB to CMYK directly.

HSL: the correct model for design decisions

HSL represents color as three perceptual axes: Hue (the color angle on the wheel, 0–360°), Saturation (the intensity, 0–100%), and Lightness (the brightness, 0–100%). Unlike RGB, HSL maps directly to the way designers discuss and adjust colors. 'Make it more muted' = reduce saturation. 'Lighten the background' = increase lightness. 'Shift the temperature warmer' = rotate the hue angle toward yellow-orange. HSL is the correct model for palette building, for specifying design system color tokens, and for communicating color changes between designers and developers. It is also the model used internally by CSS (hsl() and oklch() both use perceptual axes). One limitation: HSL lightness is not perceptually uniform — a yellow at L:50% appears much lighter than a violet at L:50%. For advanced work requiring perceptual uniformity, OKLCH or CIELAB is the correct choice.

Newer issue

Color and typography: why your font color matters as much as your typeface

2027-06-10

Older issue

Color accessibility beyond contrast ratios: the full picture

2027-06-24