OKLCH is a cylindrical way to describe color using perceptual lightness (L), chroma (C) and hue (H). It is based on Oklab, a color space designed so similar numerical changes more closely resemble similar visual changes.
.button {
background: oklch(62% 0.18 305);
color: oklch(98% 0.01 305);
}The three coordinates
| Coordinate | Typical CSS form | What it controls |
|---|---|---|
| L — lightness | 0% to 100% | Perceived dark-to-light position. |
| C — chroma | 0 upward | Distance from neutral gray. The usable maximum depends on L, H and gamut. |
| H — hue | 0deg to 360deg | Position around the hue circle. Angles wrap. |
| Alpha | 0 to 1 after “/” | Opacity; it is not part of the underlying color coordinates. |
Why OKLCH ramps differ from HSL ramps
HSL lightness is a transform of encoded RGB channels, not a perceptually uniform measure. Setting several HSL colors to the same lightness can still produce visibly unequal brightness. In OKLCH, holding L while changing H is usually a more controlled experiment.
A useful mental model
“More uniform” does not mean perfectly uniform for every observer, display or viewing condition. It means the coordinates are better aligned with visual differences than common device-oriented models such as RGB and HSL.
OKLCH in CSS
MDN marks OKLCH as widely available across modern browsers. A resilient token can still place a HEX fallback before the OKLCH declaration:
:root {
--brand: #7651bd;
--brand: oklch(58% 0.17 305);
}OKLCH is not a gamut
OKLCH can describe coordinates that do not fit sRGB or Display P3. A production tool therefore needs both a color model and a delivery target. The W3C CSS Color specification describes reducing chroma while preserving lightness and hue as part of perceptual gamut mapping. This generator exposes the target and reports the change as ΔEOK.
Build a first palette
- Choose a middle role color whose meaning is already clear.
- Create a ramp by varying lightness and shaping chroma away from the extremes.
- Map to the display gamut your product supports.
- Check foreground/background pairs rather than individual swatches.
- Export both raw values and semantic role names.
Learn by moving one coordinate.
The generator accepts OKLCH, HEX, HSL and RGB input.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.