Color in CSS: Modern Color in the Browser

The original CSS color model was simple and small: named colors, #rrggbb hex, and rgb() - all of it locked inside the sRGB gamut and all of it numeric. If you wanted a color 10% lighter, you did the arithmetic yourself or reached for a preprocessor like Sass. If you wanted a color your screen could show but sRGB could not name, you were out of luck.

CSS Color Level 4 and 5 changed all of that, and the features have quietly shipped across every major browser. You can now compute with color directly in the stylesheet: mix two colors in a color space of your choosing, build a new color from the channels of an existing one, address wide-gamut displays, and specify color in spaces - lab(), lch(), oklab(), oklch() - that match how people actually see. CSS stopped being a list of crayons and became a small color engine.

Before the verbs (mixing, deriving) come the nouns - the color notations themselves. Modern CSS accepts a whole family, and knowing which space each one lives in is the key to using them well. They fall into three groups: legacy sRGB, ergonomic cylinders, and perceptual spaces.

The mental model: sRGB notations describe a device; Lab/OKLab notations describe a perception. When you compute with color - interpolating, lightening, building scales - you almost always want to do it in a perceptual space and only convert back to a device color at the very end.

color-mix() takes two colors, a percentage, and - crucially - a color space to mix in: color-mix(in oklch, #2f6df6 60%, #f6c12f) means "60% of the blue, 40% of the gold, interpolated through OKLCH." The space is not a detail; it changes the path the blend takes. Mix blue and yellow in srgb and you pass through a dead gray midpoint; mix the same pair in hsl and you swing through green; mix in oklch and you get an even, controlled transition. Try all three.

color-mix() blends toward another color; relative color syntax lets you reach inside a color and rewrite its channels. The shape is oklch(from <color> L C H): the from keyword exposes the source's channels as the keywords l, c, and h, which you can pass through untouched or wrap in calc(). Want the brand color but 10% lighter? - oklch(from var(--brand) calc(l + 0.1) c h). Keep lightness and hue, halve the chroma for a muted version? - oklch(from var(--brand) l calc(c / 2) h). Adjust the channels and read the generated rule.

Most phones and laptops sold today have Display-P3 screens - a gamut roughly 25% larger than sRGB, with noticeably more saturated reds and greens. sRGB hex literally cannot name those colors. The color() function can: color(display-p3 1 0 0) is a P3 red far more vivid than #ff0000. You can even guard it with @media (color-gamut: p3) to serve the punchy version only where it will show.

The flip side is gamut mapping. When you ask for a color the target display can't produce - say a very high-chroma oklch() on an sRGB screen - the browser has to bring it back into range. The naive approach clips each RGB channel independently, which shifts both hue and lightness. The CSS spec instead reduces chroma while holding lightness and hue, which preserves the color's identity. See the difference.

Here is the single most useful thing to internalize about modern CSS color: hsl() lightness is a lie, and oklch() lightness is honest. In HSL, every hue claims the same "50% lightness," yet hsl(60 100% 50%) (yellow) is blinding while hsl(240 100% 50%) (blue) is nearly black. Build a palette by sweeping HSL hue at fixed lightness and it lurches between bright and dark. Do the same in OKLCH and every swatch holds the same perceived lightness - so contrast stays predictable and the set looks like a family.

The new functions are powerful, but they reward a little discipline. A handful of habits keep a modern-color stylesheet predictable across browsers, gamuts, and themes.

Six questions on color-mix(), relative color syntax, wide gamut, gamut mapping, and oklch(). Instant feedback, no scores recorded - a wrong answer comes with a short explanation.

Modern CSS color is the practical front end of a deeper stack - the perceptual models behind it, the gamuts it targets, and the systems it builds.