Aura Mixer
Color Formats•7 min read

OKLCH: Modern Color for the Web

The perceptually uniform color space that fixes HSL's biggest problems.

Why OKLCH Matters

OKLCH is part of CSS Color Level 4 and is now supported in all major browsers. It solves fundamental problems with HSL that have frustrated designers for decades.

The Problem with HSL

HSL (Hue, Saturation, Lightness) seems intuitive, but it has a critical flaw: colors with the same "lightness" value don't actually look equally light.

Both colors below have HSL lightness of 50%:

Yellow L:50%
Blue L:50%

Yellow appears much brighter than blue, even though they have identical HSL lightness values. This makes creating consistent palettes frustrating.

How OKLCH Fixes This

OKLCH is "perceptually uniform" — colors with the same lightness value actually look equally light to human eyes. This is based on decades of color science research.

OKLCH Components

  • L (Lightness): 0% (black) to 100% (white) — perceptually accurate
  • C (Chroma): 0 (gray) to ~0.4 (most vivid) — color intensity
  • H (Hue): 0-360° — same as HSL hue, but more consistent
oklch(60% 0.15 250) /* 60% lightness, medium chroma, blue hue */

Practical Benefits

1. Consistent Color Scales

Create palettes where each step has genuinely equal visual lightness increments.

2. Predictable Contrast

When lightness is perceptually accurate, predicting WCAG contrast ratios becomes much easier.

3. Better Gradients

Gradients between OKLCH colors avoid the "muddy middle" problem common in RGB gradients.

4. Wider Color Gamut

OKLCH can represent colors outside the sRGB gamut, taking advantage of modern P3 displays.

Using OKLCH in CSS

Basic Syntax

.button {
background: oklch(60% 0.15 250);
color: oklch(98% 0 0); /* near-white */
}

With CSS Variables

:root {
--brand-l: 60%;
--brand-c: 0.15;
--brand-h: 250;
--brand: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
}

With Alpha (Transparency)

background: oklch(60% 0.15 250 / 50%); /* 50% opacity */

Browser Support

OKLCH is supported in all modern browsers as of 2023:

Chrome
111+
Firefox
113+
Safari
15.4+
Edge
111+

For older browsers, provide a fallback in HEX or RGB before the OKLCH value.

When to Use OKLCH

✓ Great For

  • • Creating consistent color scales
  • • Design systems & theming
  • • Dynamic color generation
  • • Accessibility-focused projects
  • • P3/wide-gamut displays

⚠ Consider Alternatives

  • • Legacy browser requirements
  • • Simple static colors (HEX is fine)
  • • Design tool compatibility
  • • Team unfamiliarity

Generate OKLCH-Ready Palettes

Aura Mixer exports palettes in OKLCH format alongside traditional HEX and RGB.

Create Your Palette