OKLCH for Web Design: A Practical Guide

Understand OKLCH syntax

The CSS function uses lightness, chroma, hue, and an optional alpha value.

An example is oklch(62% 0.20 250). Lightness is commonly written as a percentage, chroma is a non-negative number, and hue is an angle. Alpha can be added after a slash.

The useful chroma range depends on lightness, hue, and target gamut. A value that is valid syntax may still be outside sRGB.

.button {
  background: #2563eb; /* sRGB fallback */
  background: oklch(62% 0.20 250);
}

Why perceptual lightness helps

Equal HSL lightness values can look very different across hues, while OKLCH aims for more consistent visual lightness relationships.

This makes it easier to generate ordered scales, adjust dark-mode variants, and compare colors without guessing as much. Perceptual does not mean perfect for every viewing condition or use; final contrast and component testing remain necessary.

Keep the original source and document any hue correction or chroma reduction used during scale generation.

Build a color scale

Control each dimension deliberately rather than interpolating blindly.

Choose a lightness curve from near-white to near-black. Let chroma rise through useful middle shades and fall at the extremes. Keep hue mostly stable, but allow small corrections if very light or dark values shift visually.

Check every generated step for gamut, contrast, and state distinction.

Manage sRGB and Display P3 gamut

OKLCH can express colors that exceed sRGB and may fit a wider gamut such as Display P3.

Reduce chroma or use gamut mapping for the fallback. Test the result instead of relying on clipping, because clipping can change hue and flatten relationships.

Use @media (color-gamut: p3) or layered declarations when a wide-gamut enhancement is worth maintaining.

Use OKLCH across themes

Theme variants can preserve hue identity while changing lightness and chroma.

A primary action may use a darker value in light mode and a lighter, lower-chroma value in dark mode. Semantic tokens should select the appropriate variant.

Test on-color text after every change. A light dark-mode accent may require dark label text.

Worked example: blue action scale

Start with a mid-lightness blue and generate role variants.

Keep the hue near the source, create a low-chroma 50 shade for subtle backgrounds, increase chroma through the action range, then reduce chroma in very dark shades. Assign action, action-hover, focus, and selected roles to tested steps.

Export the final scale to CSS variables and Tailwind theme values, but keep semantic tokens between components and raw scale numbers.

When not to rely on OKLCH alone

OKLCH does not replace output testing or color management.

• Legacy environments may need an sRGB fallback.
• High-chroma values may exceed the target gamut.
• Print output still needs a profile-based workflow.
• Perceptual relationships do not automatically meet WCAG contrast.
• Color-vision distinctions still require simulation and non-color cues.

Key takeaways

OKLCH is a practical authoring space for intentional color relationships.

• Use L for controlled lightness.
• Use C for chroma, not a generic saturation percentage.
• Use H for hue identity.
• Check gamut and provide fallbacks.
• Map theme variants through semantic tokens.
• Validate contrast and components after generation.

Frequently asked questions

Primary references

These sources support the standards and technical explanations in this guide. Color Pick recommendations and product-specific limitations are identified separately in the article.

1. CSS Color Module Level 4W3C
2. <color> CSS data typeMDN Web Docs
3. color() CSS functionMDN Web Docs
4. color-gamut CSS media featureMDN Web Docs