CSS Color 4's oklch(): A Game Changer for Design Systems

2025-02-17
CSS Color 4's oklch(): A Game Changer for Design Systems

CSS Color Module 4 introduces oklch(), a new color notation defining colors using perceived lightness (L), chroma (C), and hue (H), optionally with alpha (a). This solves hsl()'s inconsistent lightness, making color manipulation and palette generation more predictable and improving accessibility. oklch() supports wide-gamut P3 colors, unlocking richer color possibilities on modern displays. While the oklch() ecosystem is still nascent, its advantages in code readability and color manipulation make it a strong contender for the future of CSS color.

Development Color Specification