Glossary
Plain English
Cross-linked to tools

OKLCH

Also known as: OKLCH color space, oklch() CSS color function

OKLCH is a perceptually uniform color space — built on the OKLab perceptual model — that lets designers reason about colors using lightness, chroma, and hue values where equal numeric changes correspond to equal perceived changes. Modern CSS exposes it via the oklch() color function.

Overview

Older color spaces have a perceptual problem. In HSL, two colors with the same numeric lightness can look very different — yellow at L=50% reads as much lighter than blue at L=50%. That makes it hard to build palettes where every step feels evenly spaced. OKLCH fixes this: a lightness ramp from L=0.2 to L=0.9 in OKLCH actually steps evenly through perceived brightness.

CSS Color Module Level 4 added oklch() so designers can specify colors directly in this space. Browsers do the conversion to the underlying display profile. The shape is oklch(L C H / A) where L is lightness (0–1), C is chroma (0 to roughly 0.4), H is hue in degrees (0–360), and A is optional alpha.

Common questions about OKLCH

Should I migrate my palette from HSL to OKLCH?
If perceptual uniformity matters — accessible contrast ramps, dark-light theme pairs, multi-step interaction states — yes. If you have a small set of brand colors with fine-tuned visuals, the migration is rarely worth the churn.
What browsers support oklch()?
Every modern evergreen browser (Chrome, Firefox, Safari, Edge) supports oklch() in recent versions. For older browsers, ship a fallback in a more widely-supported format using @supports.
How is OKLCH different from LCH?
LCH (from CIELAB) and OKLCH (from OKLab) both describe a polar coordinate around a perceptual color space. OKLab is a newer model that fixes some of CIELAB's known perceptual non-uniformities, so OKLCH ramps look smoother than LCH ramps in practice.

Tools that work with OKLCH

Color Converter

Convert colors between HEX, RGB, HSL, and OKLCH.

CSS Flexbox & Grid Playground

Visually compose Flexbox and Grid layouts and copy the CSS.

External references