better-colorslisted

# 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 | Desc