Lightness, chroma and hue
OKLCH is the polar form of Oklab, a color space Björn Ottosson introduced in 2020 to predict perceived lightness, chroma and hue well. In CSS you write oklch(L C H). L is lightness from 0% (black) to 100% (white). C is chroma, the amount of color: 0 is gray, and in practice it doesn't go past 0.5. H is a hue angle in degrees.
oklch(54.13% 0.2466 293.01) is the same violet as #7C3AED: lightness 54.13%, chroma 0.2466 and hue 293.01 degrees. The hue angles aren't HSL's. Pure red sits at 29.23 degrees here instead of 0, and the circle runs 90 toward mustard yellow, 180 toward greenish cyan and 270 toward sky blue.
Lightness you can trust
In HSL, pure blue and pure yellow have the same lightness. In OKLCH they don't: blue is 45.2% and yellow 96.8%, which matches how they look. That lets you make a scale of shades by changing only L and keeping C and H, and the steps look even.
Hue spacing is even too. CSS Color 4 compares two pairs of colors that are each 30 degrees apart in HSL. The first pair looks fairly similar and the second looks very different. In OKLCH the same pairs are 6.3 and 35.7 degrees apart, which fits what you see.
Still check text pairs with the Contrast Checker. The WCAG ratio is its own formula, and a good OKLCH lightness gap doesn't replace it.
Writing it in CSS
A full color with alpha looks like oklch(54.13% 0.2466 293.01 / 50%). Lightness takes a number from 0 to 1 or a percent. Chroma takes a number or a percent, where 100% equals 0.4. Hue takes a number or an angle.
Relative colors build one color from another: oklch(from var(--brand) calc(l + 0.15) c h) keeps the chroma and hue of --brand and raises its lightness by 0.15. MDN says oklch() has been available across browsers since May 2023. Check its compatibility table before you rely on the relative form.
Chroma and the edge of the screen
How much chroma a screen can show depends on the hue and the lightness, and sRGB covers only part of what OKLCH can describe. The pure red, green and blue of sRGB have chroma 0.2577, 0.2948 and 0.3132.
You can write a color the display can't show. The spec's example is oklch(76% 0.27 60), which falls outside even the Display P3 range. The browser doesn't fail on it. It maps the color to a similar one with less chroma that the screen can show.