Gamut Bench
← All color guides

Design & development

OKLCH in CSS: edit lightness, chroma and hue

Understand OKLCH in CSS with labeled color scales, a CSS code example, and a workflow for checking sRGB output.

L 35%
L 45%
L 55%
L 65%
L 75%
Lightness changes from 35% to 75%. Chroma stays at 0.08 and hue at 250°. Equal steps help organize a scale; each text pair still needs a contrast test.

Read the three coordinates

In oklch(65% 0.08 250), 65% is lightness, 0.08 is chroma and 250 is the hue angle. An optional slash introduces alpha: oklch(65% 0.08 250 / 0.5) is half opaque. These coordinates describe a color; they are not RGB channel values.

Lightness lets you organize lighter and darker steps. Chroma controls distance from neutral. Hue selects the direction around the color space. At zero chroma the color is neutral, so changing hue has no visible effect.

Change one coordinate at a time

Start with a modest chroma and one hue. Adjust lightness to establish the range, then inspect the actual rendered colors before increasing chroma. This makes it easier to identify which change caused an unwanted result.

:root {
  --brand: oklch(55% 0.08 250);
  --brand-light: oklch(75% 0.08 250);
  --brand-dark: oklch(35% 0.08 250);
}

/* Check text against its actual background. */
.brand-surface { background: var(--brand-light); }

The strip above uses the same chroma and hue as this CSS. It is a parameter demonstration, not a finished theme: it has no approved foreground, hover treatment or semantic role mapping yet.

Check gamut before handoff

OKLCH can express colors outside sRGB. There is no single chroma limit that works for every lightness and hue. If the destination needs HEX or RGB, compare the converted output: a color outside that gamut cannot be preserved exactly in those formats.

  1. Open the color converter with your value and inspect the sRGB result and gamut feedback.
  2. Reduce chroma if necessary, then compare the result at the intended lightness.
  3. Use the shade generator to organize the scale. Do not assume equal lightness steps imply equal WCAG contrast.
  4. Test the chosen text/background pairs, then copy values into the target browser and component. Check the shipped CSS, not just the design swatches.

Keep one source of truth during handoff. Repeatedly copying rounded values between formats can introduce small differences. Record the final format and the surface on which you validated it.

Reference: MDN: oklch() syntax and coordinates.