CSS Relative Color Syntax, introduced in CSS Color Level 4, lets you derive a new color from an existing one by modifying individual color channels. Using the from keyword, you can reference a base color and adjust channels like lightness, chroma, or hue — without manually calculating new color values. Example: oklch(from #6366f1 0.8 c h) takes the base color's chroma (c) and hue (h), but sets lightness to 0.8.

OKLCH offers perceptually uniform lightness — unlike HSL where lightness feels inconsistent across hues. In OKLCH, the same Lightness value looks equally bright regardless of hue. Chroma in OKLCH also behaves more predictably than HSL Saturation. This makes OKLCH ideal for systematic color adjustments, design tokens, and accessible color palettes.

Lightness (L) ranges from 0 (pure black) to 1 (pure white) and represents perceived brightness. Chroma (C) represents color intensity or vividness — 0 is fully gray (no color), while higher values (typically up to ~0.4 for sRGB) produce more saturated, vibrant colors. Changing Chroma is similar to moving from gray toward a pure hue.

Relative Color Syntax is supported in Chrome 119+, Safari 16.4+, Firefox 128+, and Edge 119+. OKLCH color space support is even broader (Chrome 111+, Safari 15.4+, Firefox 113+). As of 2025, global coverage exceeds 92%. For older browsers, consider providing a fallback color before the relative syntax declaration.

You can use calc() inside relative color functions to adjust channels dynamically. For example, oklch(from var(--base) calc(l + 0.1) c h) increases lightness by 0.1. Or oklch(from var(--base) l calc(c * 0.5) h) halves the chroma, creating a desaturated variant. This is powerful for generating hover states, disabled states, or entire color scales from a single base token.

Yes! You can adjust any channel. For hue rotation, use oklch(from var(--base) l c calc(h + 60)) to shift hue by 60 degrees. This creates harmonious color schemes like analogous or complementary palettes directly in CSS — no preprocessor needed.