OKLCH Colors
OKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. To explore interactively, visit oklch.fyi.
Quick Reference
Why OKLCH
- Perceptual uniformity. Equal L steps = equal brightness.
oklch(0.5 ...)is visually mid. HSL'slightness: 50%varies wildly by hue. - Stable hue. HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
- Independent chroma. Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
- Finite gamut. Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip — gamut awareness is required.
OKLCH Syntax
Formatting: L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format -0 as 0. Browser support: Baseline 2023, 96%+ global coverage.
Key Thresholds
Review Output Format
Always present color changes as a markdown table with Before and After columns. Include every color that was changed — not just a subset. Never list findings as separate "Before:" / "After:" lines outside of a table.
This keeps feedback scannable and diff-friendly. Each row is a self-contained change the developer can act on independently.
Common Mistakes
Reference Files
- color-conversion.md [blocked] — Supported formats, conversion examples, bulk conversion rules, what to leave alone
- palette-generation.md [blocked] — Scale convention, generation algorithm, multi-hue palettes, dark mode, why not HSL
- accessibility-contrast.md [blocked] — APCA and WCAG 2 thresholds, fixing contrast with L, lightness gap guide, hue drift detection
- gamut-and-tailwind.md [blocked] — sRGB vs P3, gamut clamping, CSS fallback patterns, Tailwind v4 @theme and migration
