Perceptual Color in CSS (OKLCH)

OKLCH is a newer way to define color in CSS that aligns more closely with how people actually perceive lightness and color. Instead of adjusting colors by mixing red, green, and blue values, OKLCH separates brightness, intensity, and hue in a way that makes visual changes more predictable.

Why

As products scale, color systems often drift. Small adjustments can introduce contrast issues, break accessibility, or make themes feel inconsistent. OKLCH makes it easier to build and maintain color systems that stay visually balanced over time, especially across light and dark modes.

When

I reach for OKLCH when working on design systems, theming, or any interface where color communicates meaning, such as status indicators, dashboards, or charts. It’s particularly useful when accessibility requirements make manual color tuning fragile.

Example

A simple visual comparison of how HSL and OKLCH handle color progression, making differences in consistency and readability easy to see.

Trade-offs

Support and tooling are still evolving, so I introduce OKLCH gradually, usually at the design token or theme level, rather than converting everything at once.