OKLCH Color Specification

Learn about OKLCH color space and its advantages for modern web development, including syntax, benefits, and practical implementation examples.

Last updated:

Overview of OKLCH

OKLCH (Oklch) is a perceptually-based color space that enables more intuitive and consistent color specification compared to traditional HSL and RGB color models.

Pronunciation: O-K-L-C-H (various pronunciations exist)

L: Lightness
C: Chroma (saturation)
H: Hue

These components are optimized for modern display environments to provide “OK” (good) color representation.

Advantages of OKLCH

1. Perceptually Uniform

Colors with the same lightness value appear equally bright regardless of hue.

2. Predictable Color Adjustments

Lightness and chroma adjustments are intuitive and produce expected results.

3. Wide Color Gamut

Can express the rich colors that modern displays like Display P3 can render.

Basic Usage

/* OKLCH notation */
.primary-color {
  color: oklch(0.7 0.15 250);
  /* Lightness: 0.7, Chroma: 0.15, Hue: 250° */
}

/* With alpha transparency */
.primary-color-alpha {
  color: oklch(0.7 0.15 250 / 0.8);
}

/* Combined with CSS custom properties */
:root {
  --primary-l: 0.7;
  --primary-c: 0.15;
  --primary-h: 250;
}

.primary {
  color: oklch(var(--primary-l) var(--primary-c) var(--primary-h));
}

Design System Applications

Generating Color Variations

:root {
  /* Base color definition */
  --blue-h: 250;
  --blue-c: 0.15;
  
  /* Lightness variations */
  --blue-50: oklch(0.95 var(--blue-c) var(--blue-h));
  --blue-100: oklch(0.9 var(--blue-c) var(--blue-h));
  --blue-500: oklch(0.7 var(--blue-c) var(--blue-h));
  --blue-900: oklch(0.3 var(--blue-c) var(--blue-h));
}

Accessible Color Combinations

/* Combinations with sufficient contrast ratio */
.accessible-text {
  background: oklch(0.95 0.02 250);
  color: oklch(0.25 0.1 250);
}

Browser Support

OKLCH color model | Can I use

Support Status

  • Chrome 111+
  • Firefox 113+
  • Safari 15.4+

Fallback Methods

.color-element {
  /* Fallback */
  color: #4a90e2;
  
  /* For browsers supporting OKLCH */
  color: oklch(0.7 0.15 250);
}

/* Using @supports */
@supports (color: oklch(0 0 0)) {
  .modern-color {
    color: oklch(0.7 0.15 250);
  }
}

Practical Examples

Theme System

:root {
  --theme-primary-h: 250;
  --theme-primary-c: 0.15;
}

[data-theme="light"] {
  --bg: oklch(0.98 0.02 var(--theme-primary-h));
  --text: oklch(0.2 0.05 var(--theme-primary-h));
}

[data-theme="dark"] {
  --bg: oklch(0.15 0.02 var(--theme-primary-h));
  --text: oklch(0.9 0.05 var(--theme-primary-h));
}

Summary

OKLCH enables more accurate and predictable color specification in modern web development. With proper fallbacks, it can be practically implemented today.

References