OKLCH Colors in CSS: A Complete Guide for Modern Web Design

Category: Color Theory · Published: 2026-08-04

In the history of web development, we have relied on color formats like HEX, RGB, and HSL. However, these older formats suffer from severe visual inconsistencies. Enter OKLCH.

1. What Is OKLCH?

OKLCH is a modern color space supported natively in all major web browsers since 2023. It represents colors in a perceptually uniform manner, which means that equal mathematical adjustments to lightness or intensity yield equal shifts in human visual perception.

2. What Do L, C, and H Mean?

The OKLCH syntax is defined as: oklch(L C H [/ A])

• Lightness (L): The perceived brightness, expressed as a decimal or percentage from 0 (0% - black) to 1 (100% - white).
• Chroma (C): The purity or saturation of the color. It ranges from 0 (completely gray) to a theoretical maximum of around 0.4 (intense vivid color).
• Hue (H): The angle on the color wheel (0-360). 0/360 is red-magenta, 90 is yellow, 140 is green, 270 is blue.

3. Why Designers Use OKLCH

The biggest problem with older color spaces like HSL is that they are not perceptually uniform. For example, in HSL, yellow (hsl(60, 100%, 50%)) and blue (hsl(240, 100%, 50%)) have the exact same HSL lightness value of 50%. Yet, to a human, the yellow color looks significantly brighter than the blue color. In OKLCH, lightness matches human vision. If you set a yellow and a blue color to the same OKLCH lightness of 0.7, they will appear equally bright, allowing you to build highly predictable color palettes and accessible systems automatically.

4. OKLCH vs RGB

RGB requires thinking in terms of pixel lights (how much red, green, and blue combine), which is extremely difficult to edit by hand. OKLCH separates lightness, chroma, and hue into separate channels that match visual intent.

5. OKLCH vs HSL

While HSL is intuitive, its brightness calculations are flawed because they do not account for the human eye's sensitivity to green wavelengths. OKLCH fixes this and includes support for Display P3 wide gamut colors, which HSL cannot access.

6. Creating Color Scales with OKLCH

Because OKLCH lightness is predictable, you can generate accessible scales for design tokens by keeping Chroma and Hue constant while stepping Lightness:

7. Using OKLCH in CSS

Defining an OKLCH color in CSS is simple:

8. OKLCH and Color Gamut (Display P3)

Modern phone and monitor screens can display a wider range of colors than sRGB, called Display P3. Older formats like HEX and HSL are locked to sRGB. OKLCH can reference colors outside the sRGB gamut, allowing you to render the most vibrant neon greens, pinks, and yellows that modern displays can produce.

9. Fallbacks for Older Browsers

To support users on older browsers, you can provide sRGB fallbacks using CSS @supports or double declarations:

10. Frequently Asked Questions