2026-09-10 · 8 min read
- css
- oklch
- color
OKLCH expresses perceptual lightness, chroma, and hue, making token ramps easier to reason about than direct RGB channels. Its coordinate space can describe colors beyond sRGB and even beyond a target display's gamut, so valid CSS syntax does not guarantee an exact device rendering.
The browser converts the specified color through its rendering pipeline and maps out-of-gamut results. Build tools, canvas APIs, screenshots, PDF generators, and design applications may use different conversion or clipping behavior.
Create tokens within explicit output targets
Choose whether each product surface targets sRGB only, supports Display P3 enhancement, or accepts device-dependent mapping. For each lightness and hue, determine a practical chroma ceiling in the target gamut instead of applying one maximum chroma globally.
- Store source OKLCH values with sufficient precision.
- Generate fallback values through one versioned converter.
- Avoid repeated round trips through eight-bit RGB.
- Record the target color space for exported assets.
Control fallback and cascade behavior
Declare an sRGB-compatible fallback first and the OKLCH value second. A browser that cannot parse the later declaration keeps the fallback, while supporting browsers use OKLCH. Use @supports when multiple properties or assets must switch as one design treatment.
A browser understanding oklch() does not imply a wide-gamut screen. Keep the supported-syntax path useful after mapping to sRGB, and reserve richer gamut variants for progressive enhancement rather than essential state meaning.
Evaluate contrast after rendering transformations
Perceptual lightness is useful for designing ramps, but it is not a direct WCAG contrast score. Evaluate final foreground and background colors after gamut mapping, alpha compositing, gradients, filters, opacity, theme selection, and state overlays.
- Test text, icons, borders, focus rings, and disabled states.
- Do not encode status through color alone.
- Support forced-colors and user contrast preferences.
- Recheck contrast whenever the conversion pipeline changes.
Exercise browsers and non-browser exports
Use Flashman's color tool for exploratory public tokens, CSS formatter for fallback order, diff for generated palettes, number-base converter for encoded channels, and units converter for documenting design thresholds. A browser preview is not a colorimeter or proof of appearance on every panel.
Test current supported browsers on sRGB and wide-gamut displays, light and dark themes, alpha and gradients, screenshots, canvas, email, image generation, print and PDF export, unsupported-parser fallback, color-management settings, visual regression tolerances, and contrast assertions against final mapped values.