For three decades, the web was trapped inside the sRGB color gamut—defined by standard RGB channels and hex codes. In modern display technology (OLED, P3 displays on Apple and Android hardware), sRGB only covers roughly 70% of colors the human eye can perceive. Enter OKLCH.

Why OKLCH Changes Everything

Traditional hsl() promised intuitive color manipulation, but it possessed a fatal flaw: lightness was not perceptually uniform. Pure blue at 50% lightness appeared dramatically darker than pure yellow at 50% lightness.

OKLCH solves this fundamentally:

  • L (Lightness): 0% (pure black) to 100% (pure white). Changing hue never alters perceived brightness!
  • C (Chroma): Color saturation / intensity. Reaches into high-chroma P3 spaces impossible with standard hex codes.
  • H (Hue): Angle from 0° to 360° on the perceptual color wheel.
/* Vibrant modern palette using OKLCH */
:root {
  --brand-primary: oklch(65% 0.24 270); /* Electric Violet */
  --brand-accent: oklch(72% 0.22 350);  /* Neon Rose */
  --brand-cyan: oklch(78% 0.18 210);    /* Vivid Cyan */
  --brand-surface: oklch(14% 0.03 260); /* Deep Space Indigo */
}

Crafting Fluid Mesh Gradients

By blending multiple overlapping radial gradients with low opacity and high blur, you can generate an organic "mesh" gradient that adapts gracefully between light and dark themes without heavy bitmap images.

Performance Benefit

CSS gradients render natively on the GPU at zero download weight. Replacing a 300KB background PNG with a 15-line CSS rule saves bandwidth and eliminates layout shift.

Accessibility and Color Contrast

Because OKLCH guarantees consistent perceptual lightness across all hues, generating accessible palettes (WCAG AAA 7:1 ratio) becomes mathematically deterministic: simply guarantee an absolute delta of 50% lightness between foreground and background tokens.