Unlocking Vibrant Colors with OKLCH

Introduction

Web design has evolved significantly over the years, and so has the way we handle color. While RGB and Hex codes have been the standard for decades, a new contender has emerged to address their limitations: the OKLCH color model.

What is OKLCH?

OKLCH is a color space based on the Oklab color model, designed to be perceptually uniform. It solves many of the problems found in older models like HSL and RGB, particularly regarding how our eyes perceive lightness and saturation.

The name OKLCH stands for:

• L - Lightness
• C - Chroma
• H - Hue

The Components of OKLCH

Lightness (L)

Lightness controls how bright or dark the color is.

• 0% is absolute black.
• 100% is absolute white.

Unlike HSL, where 50% lightness can look vastly different depending on the hue (e.g., yellow vs. blue), OKLCH lightness is consistent. A value of 60% lightness will appear equally bright across all hues.

Chroma (C)

Chroma represents the intensity or purity of the color (similar to saturation).

• 0 is completely gray.
• 0.4 (approx) is the maximum for most sRGB colors.
• Values can go higher (e.g., 0.5 or more) for wide-gamut displays (P3, Rec.2020).

Hue (H)

Hue is the angle on the color wheel, similar to HSL.

• 0 - 360 degrees.
• 0 is roughly red, 120 green, 240 blue.

Why Use OKLCH?

1. Perceptual Uniformity

In HSL, changing the hue while keeping lightness constant can make the color visually brighter or darker. In OKLCH, the perceived brightness stays consistent, making it much easier to create accessible color palettes.

2. Access to Wide Gamut Colors

SRGB (used by Hex and RGB) can only display a limited range of colors. Modern monitors support P3 and Rec.2020, which can display much more vivid greens and cyans. OKLCH allows you to access these "super-saturated" colors that were previously impossible to specify in CSS.

3. Predictable Color Mixing

Because of its perceptual uniformity, creating gradients and mixing colors in OKLCH produces smooth, natural transitions without the "gray dead zones" often seen in RGB gradients.

Using OKLCH in CSS

Support for OKLCH is now available in all major modern browsers.

.my-element {
  /* A vivid pink */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* With alpha transparency */
  color: oklch(80% 0.1 120 / 0.5);
}

Conclusion

OKLCH is the future of color on the web. By providing a way to define colors that align with human perception and unlocking the full capabilities of modern screens, it gives designers and developers a powerful new tool for creating beautiful, accessible digital experiences.