oklch-skill

SKILL.md

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

Category
When to use
Reference

Conversion
Hex/rgb/hsl to oklch
color-conversion.md

Palettes
Generate scales, multi-hue, dark mode
palette-generation.md

Contrast
APCA/WCAG checks, fixing failing contrast
accessibility-contrast.md

Gamut & Tailwind
P3 fallbacks, @theme scales, gamut clamping
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.