oklch-skilllisted

# 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](https://oklch.fyi). ## Quick Reference | Category | When to use | Reference | | --- | --- | --- | | Conversion | Hex/rgb/hsl to oklch | [color-conversion.md](color-conversion.md) | | Palettes | Generate scales, multi-hue, dark mode | [palette-generation.md](palette-generation.md) | | Contrast | APCA/WCAG checks, fixing failing contrast | [accessibility-contrast.md](accessibility-contrast.md) | | Gamut & Tailwind | P3 fallbacks, `@theme` scales, gamut clamping | [gamut-and-tailwind.md](gamut-and-tailwind.md) | ## Why OKLCH - **Perceptual uniformity.** Equal L steps = equal brightness. `oklch(0.5 ...)` is visually mid. HSL's `lightness: 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 ``` oklch(L C H) oklch(L C H / alpha) ``` | Channel | Range | D