Same color. Two coordinate systems.
OKLab uses lightness (L) and opponent axes (a, b). OKLCH describes the same space with lightness, chroma, and hue. Switching tabs converts the coordinates; it doesn’t pick a new color.
EXPERIMENT 01 · COLOR TOOLS
Color lab.
Explore OKLCH & OKLab. Find a color, understand its gamut, and take the CSS.
Checking display capabilities…
Hue × chroma
0°HUE360°
Hatched areas are outside the selected gamut. Plane colors use an sRGB preview.
%
BUILD A SCALE
A palette from your color
Even OKLCH lightness steps. Chroma is reduced where needed to fit the selected gamut.
CHECK READABILITY
Contrast, measured
WCAG 2 contrast for the sRGB-mapped color, composited onto each background when transparent.
——
——
Normal text: AA ≥ 4.5:1 · AAA ≥ 7:1. OKLCH lightness is not WCAG relative luminance.
COMPARE INTERPOLATION
Three paths between two colors
The same endpoints, sampled in each space with premultiplied alpha. OKLCH takes the shorter hue path.
A FEW USEFUL DETAILS
What the numbers mean
Wide gamut is not HDR.
A color outside sRGB may fit Display P3, or it may fit neither. That depends on the color, not a single chroma cutoff. A P3-capable display isn’t a promise of HDR, and lightness above 100% doesn’t unlock extra brightness.
Mapping is an approximation.
Mapped outputs use Culori’s OKLCH gamut mapping. The native preview uses your browser’s color rendering, which can differ from the mapped output. The plane is always an sRGB raster.