Chroma controls how vivid a color feels without changing its lightness or hue. In OKLCH, it measures distance from neutral gray: 0 produces grayscale, while values roughly up to 0.4–0.5 can produce highly saturated color, depending on hue and lightness. section 7.1.4
This makes chroma useful when a UI color has the right brightness but feels either too muted or too intense. Unlike an HSL hue rotation, OKLCH can change hue while maintaining perceived brightness, so a palette can remain visually even across different hues. section 7.1.4 section 7.8
Use chroma differently in common color tasks:
- Create a restrained-to-vivid scale by holding lightness and hue constant while increasing chroma. section 7.1.4
- Generate dark-theme counterparts by inverting lightness, reducing saturation or chroma, and optionally shifting hue before checking contrast. section 7.5.4
- Compute RGB chroma as the normalized channel range: C = max(R, G, B) − min(R, G, B). A result of 0 identifies grayscale. section 7.2.2
A chroma scale in CSS
Keep hue 350 and lightness 0.8 fixed, then raise chroma to move from subtle branding to an electric accent: .brand-subtle { background: oklch(0.8 0.05 350); } .brand-vibrant { background: oklch(0.8 0.2 350); } .brand-electric { background: oklch(0.8 0.4 350); } The three colors differ mainly in vividness. Check results on regular monitors when not specifically targeting Display P3, because some OKLCH values may not display as intended on less capable screens. section 7.1.4
Listing 7.2 Creating a color scale by varying chroma in the OKLCH color space
.brand-subtle { background: oklch(0.8 0.05 350); }
.brand-vibrant { background: oklch(0.8 0.2 350); }
.brand-electric { background: oklch(0.8 0.4 350); }
Compare fixed-lightness, fixed-hue swatches whose chroma values increase from 0.05 to 0.4. section 7.1.4
