What is OKLCH?

OKLCH is the polar form of Oklab, a perceptual color space published by Björn Ottosson in 2020. Colors are written as oklch(L C H): L is perceived lightness from 0 (black) to 1 (white), C is chroma, how colorful the color is, from 0 (gray) up to roughly 0.37 for the most vivid colors screens can show, and H is the hue angle in degrees. An optional alpha follows a slash: oklch(0.53 0.215 283 / 0.28). All current major browsers support it, and Tailwind CSS v4 defines its default palette in it.

Why it matters

In HSL, lightness is a formula, not a perception. hsl(60 100% 50%) yellow and hsl(240 100% 50%) blue share a lightness of 50%, yet the yellow looks far brighter. OKLCH lightness tracks what people see, which makes several jobs straightforward.

• Palettes. Keep chroma and hue, step lightness, and you get an even scale. Keep lightness and chroma, rotate hue, and you get sibling colors of matching weight, useful for status colors and charts.
• Dark mode. Raise lightness and slightly reduce chroma to adapt an accent for dark backgrounds without its hue drifting.
• Reasoning about contrast. Lightness correlates with contrast, so text colors are easier to plan. Still verify the actual WCAG ratio, which uses a different luminance formula.
• Wide gamut. OKLCH can express colors beyond sRGB, such as the Display P3 colors modern screens show.

Example

:root {
  --accent: oklch(0.53 0.215 283);
  --accent-hover: oklch(0.48 0.215 283); /* darker, same hue and chroma */
  --accent-soft: oklch(0.53 0.215 283 / 0.09);
}
.dark {
  --accent: oklch(0.7 0.165 285); /* lighter and calmer for dark surfaces */
}

Common pitfalls

Not every combination of L, C and H exists on a given screen. High chroma at very high or very low lightness often falls outside sRGB or even P3, and the browser maps it back into gamut, which can shift the color you see. Keep chroma moderate near the ends of the lightness range, and check colors on both a wide-gamut and a standard display. OKLCH hue angles also differ from HSL hue angles, so copying an HSL hue into OKLCH will not give the same color.

When mixing or animating colors, name the interpolation space: color-mix(in oklch, var(--accent) 22%, transparent) blends perceptually, where sRGB mixing can pass through muddy midpoints.

How MiniDev UI uses it

Every MiniDev token is written in OKLCH, including the violet brand at hue 283 and status colors tuned to equal perceptual weight. Build your own scale with the OKLCH palette generator, convert existing brand colors with the hex to OKLCH converter, and read OKLCH colors in Tailwind CSS v4 for the full workflow. Color picker gives users a swatch control in your UI.