Modern CSS color: hex, rgb(), hsl(), lab(), oklch() and color-mix()

By the 000098 editorial team · Updated September 30, 2026 · 8 min read

CSS now supports far more than hex codes. Modern browsers understand perceptual color spaces and can mix colors natively. Here is what each format is good for.

Hex and rgb()

#000098 and rgb(0 0 152) describe the same sRGB color. Modern syntax drops commas and accepts alpha with a slash: rgb(0 0 152 / 50%). Use these for compatibility and for values copied from design tools.

hsl()

hsl(240 100% 29.8%) is the same color again, expressed as hue, saturation and lightness. HSL is easy to tweak by hand, but its lightness is not perceptual: a yellow and a blue at 50% lightness look very different in brightness.

lab() and lch()

CIE Lab and its polar form LCh are designed around human perception. Equal numeric changes look roughly equal. They also describe colors outside sRGB, useful for wide-gamut displays.

oklch(): the practical choice for design systems

OKLCH is a refinement of LCh with more even hue behaviour. #000098 is roughly oklch(30.7% 0.213 264). Because lightness is perceptual, you can build a scale by stepping L while keeping chroma and hue fixed, and get visually even steps. It is supported in all current major browsers.

:root {
  --brand-l: 30.7%;
  --brand: oklch(var(--brand-l) 0.213 264);
  --brand-soft: oklch(92% 0.04 264);
}

color-mix()

color-mix() blends two colors in a chosen space, which is perfect for hover states and tints without hard-coding values:

.button:hover {
  background: color-mix(in oklch, var(--brand) 85%, white);
}

Mixing in OKLCH avoids the grayish midpoints you sometimes get when mixing in sRGB.

Fallbacks

For older browsers, declare a hex fallback first and the modern value second; browsers ignore what they do not understand.

color: #000098;
color: oklch(30.7% 0.213 264);

Get the values

Every color page on 000098 lists HEX, RGB, HSL, Lab, LCh and OKLCH with copy buttons, and the converter accepts any of them as input.