How to Use OKLCH in CSS

The syntax

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* with transparency */

• Lightness runs from 0% (black) to 100% (white).
• Chroma is how vivid the color is. 0 is gray, and most usable colors stay under about 0.37.
• Hue is the color’s angle on a wheel, from 0 to 360.

Try it with the OKLCH Color Picker, or convert your brand color with the HEX to OKLCH Converter.

Build a set of shades

Keep chroma and hue the same, and change only lightness:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Create hover states

Relative color syntax lets you derive one color from another:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

Relative colors are newer than oklch() itself, so check browser support for your audience.

Mix colors

Use color-mix() to blend two colors. Mixing in OKLCH usually gives cleaner midpoints than sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

You can test blends with the Color Mixer.

Add a fallback

Modern browsers support OKLCH. For very old ones, put a HEX value first. Browsers skip what they can’t read:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

The OKLCH to HEX Converter gives you that value.

Check contrast

Lightness makes contrast easier to predict, but it isn’t a guarantee. Always test text and background pairs with the Contrast Checker.