OKLCH colors explained
OKLCH is the color format behind Tailwind v4 and modern CSS palettes. Here is what it is, why it beats HSL, and how to convert to it.
oklch(60% 0.244 358.6)Lightness 60% · chroma 0.244 · hue 358.6°The problem with HSL
HSL promises that “lightness 50%” means the same brightness for every hue. It doesn’t. Below, the top row is eight hues at the same HSL lightness; the bottom row is eight hues at the same OKLCH lightness. Switch to grayscale to see what your eyes (and the WCAG contrast formula) actually perceive.
HSL — same “lightness”, wildly different brightness
OKLCH — same lightness, same brightness
Numbers show the OKLCH lightness of each swatch. In the HSL row yellow sits far above blue; in the OKLCH row they match.
Why that matters for palettes
- Predictable contrast. Colors with similar OKLCH lightness have similar WCAG contrast against the same background, so you can make a set of accessible accent colors by fixing L and rotating H.
- Even shade scales. Stepping L gives ramps whose steps look equal — how the Tailwind shade generator works.
- No hue drift. Blues stay blue when lightened, unlike in CIE LCH where they drift purple.
- Wide gamut. oklch() can express Display P3 colors that hex cannot.
Reading an oklch() value
oklch(62.8% 0.258 29.2) is CSS red #FF0000. The first number is lightness (0% black to 100% white), the second chroma (0 is grey; about 0.37 is the most any sRGB color reaches), the third hue in degrees (roughly 30 red, 70 orange, 110 yellow, 145 green, 195 cyan, 265 blue, 330 magenta). Add opacity with a slash: oklch(62.8% 0.258 29.2 / 50%).
Pick colors directly in OKLCH with the color picker, or convert codes with hex to oklch.
Frequently asked questions
What is OKLCH?
OKLCH is a color space defined by Björn Ottosson in 2020 as the polar form of OKLab. L is perceived lightness (0–100%), C is chroma (colourfulness, roughly 0–0.37 for sRGB colors) and H is hue in degrees. It is designed so equal numeric changes look like equal visual changes.
Is oklch() supported in browsers?
Yes. oklch() is part of CSS Color Module Level 4 and is supported in Chrome and Edge 111+, Safari 15.4+ and Firefox 113+. Tailwind CSS v4 uses it for its entire default palette.
What happens if an OKLCH color is outside the screen gamut?
Browsers gamut-map it to the nearest displayable color. OKLCH can describe Display P3 and Rec. 2020 colors, so on wide-gamut screens you get more vivid colors than hex can express. This site’s tools reduce chroma to fit sRGB so every hex is exact.
OKLCH vs LCH vs HSL?
HSL is a simple reshuffle of RGB and is not perceptual. CIE LCH is perceptual but distorts blues (they shift toward purple as you change lightness). OKLCH fixes that hue shift, which makes it the best choice for generating shades.