OKLCH Colors

OKLCH is a perceptually uniform color space where lightness, chroma, and hue are useful design controls. Use it when the project already uses OKLCH, when creating a new color system, or when the user asks for conversion or palette work. Otherwise preserve the project's established tokens and notation: a consistent hex or RGB token system is better than introducing a second color representation for an isolated fix. 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, reporting failures, fixing on request	accessibility-contrast.md
Gamut & Tailwind	P3 fallbacks, @theme scales, gamut clamping	gamut-and-tailwind.md
Usage	Semantic tokens, one meaning per color, primary-action emphasis, appearance variants	color-usage.md

Core Principles

1. Use a Perceptual Color Space

• Respect the existing system. Do not convert notation merely because this skill was loaded. Reuse the project's semantic tokens and authoring format unless the task includes a color-system migration.
• 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.

2. Write and Format OKLCH Consistently