CSS: OKLCH color

what is OKLCH color

OKLCH is a CSS color function that defines colors in the Oklab color space using cylindrical coordinates: Lightness (L), Chroma (C), and Hue (H). It offers superior perceptual uniformity compared to older models like RGB, HSL.

Why Use OKLCH?

• Perceptual uniformity: Adjusting lightness keeps the perceived hue and saturation consistent.
• Intuitive like HSL: Lightness, chroma (similar to saturation), and hue are easy to tweak.
• Wider color gamut: specify colors outside sRGB.

Syntax

oklch(lightness chroma hue)

• lightness → 0% (black) to 100% (white), or 0 to 1.
• chroma → A positive number (0 to 3.75 are in sRGB). Represents color intensity/saturation. 0 means gray.
• hue → 0 to 360 or an angle unit. [CSS: Angle Units (deg rad grad turn)]

opacity

oklch(lightness chroma hue / opacity)

• opacity → 0 to 1 or 0% to 100%.

Examples

.x {
 color: oklch(0.6 0.18 180);

 /* equivalent to */

 color: oklch(60% 0.18 180);
}

.x {
 /* with opacity */
 color: oklch(0.6 0.18 180 / 0.50);
 /* or */
 color: oklch(0.6 0.18 180 / 50%);
}

Relative Colors

:root {
  --primary: oklch(60% 0.25 260);
}

.primary-light {
  background: oklch(from var(--primary) 80% c h); /* Lighter */
}

.primary-dark {
  background: oklch(from var(--primary) 40% c h); /* Darker */
}

.primary-saturated {
  background: oklch(from var(--primary) l calc(c * 1.5) h);
}

color examples

OKLCH color samples

browser support

supported by all major browsers since 2024.