HEX Isn't the Whole Rainbow: Modern CSS Color Spaces (OKLCH, Lab, HSL) Explained

You pick a color, copy the #A34B7C hex code, and assume that's the color. It is — on your screen, in your browser, today. But that six-digit code is quietly lying to you: it's locked to one specific color space called sRGB, which covers only a slice of the colors your eye can actually see, and a much smaller slice than a good monitor can display. That's why the same hex can look muted on one device and vivid on another, and why a whole generation of CSS color functions has appeared over the last few years. Here's what the new ones do and why you should care.

HEX, RGB, and the Gamut Problem

A hex code is just a compact way of writing three numbers — red, green, blue, each 0 to 255 — in the sRGB space. sRGB was designed in the 1990s to match typical CRT monitors, so it's a compromise from birth. Colors outside its gamut — the vivid cyan of a modern phone screen, the deep greens of a high-end laptop — simply can't be expressed in hex. This is the same story as our guide to CMYK vs RGB in print: every color space is a slice, and the only real question is which slice you're drawing from. The difference now is that web standards have caught up with hardware.

What OKLCH and Lab Fix

The newer functions — oklch, oklab, lab, lch — attack two problems at once. First, they're wider: they can represent more of what modern displays show. Second, and sneakier, they're perceptually uniform: in oklch, a change of 0.1 in lightness looks like the same step whether you're at the dark end or the light end. With hex, a 20-point jump in lightness looks huge on a dark color and barely visible on a light one, which is exactly why evenly-spaced hex palettes keep looking wrong. OKLCH spells colors as lightness, chroma, and hue — oklch(0.7 0.15 30) — which lets you adjust "how saturated" and "how warm" as real dials instead of guessing at RGB numbers.

How to Convert Without Losing Your Mind

The counter-intuitive part: you don't need to memorize OKLCH math to benefit from it. You need a converter that shows the same color across spaces and a reason to switch. Start by converting your brand hexes to oklch and checking whether any are outside sRGB's reach, then adjust chroma down until they're honest for the weakest screen you support. Pair it with a color contrast checker so your "more saturated" red still passes on white, and run the final CSS through a CSS minifier so the longer function names don't bloat the file you ship. Use the color converter to flip between formats for your design tokens. Modern color is a bigger rainbow than your hex picker showed you — and now the CSS knows it too.