Relative Color Syntax — color-mix()'s Sister Feature

When color-mix() Is Not Enough

color-mix() interpolates between two colors. Some operations need to manipulate one color along a specific axis — bumping its lightness, halving its chroma, rotating its hue. That is what Relative Color Syntax (RCS) does:

:root {
  --brand: oklch(0.62 0.21 254);
}

.lighter { color: oklch(from var(--brand) calc(l + 0.1) c h); }
.muted   { color: oklch(from var(--brand) l calc(c * 0.5) h); }
.shifted { color: oklch(from var(--brand) l c calc(h + 30)); }

The from keyword brings the source color into scope and exposes its channels (l, c, h for OKLCH; r, g, b for RGB; etc.) which you can then transform with calc().

When to choose RCS over color-mix()

Need	Use
Average two colors	color-mix()
Bump lightness by 10%	RCS
Generate a 5-color palette by rotating hue	RCS
Tint with white	color-mix()
Half the alpha of a custom color	RCS (oklch(from c l c h / calc(alpha * 0.5)))

Combining the two

You can nest them:

.combo {
  background: color-mix(
    in oklch,
    oklch(from var(--brand) calc(l + 0.1) c h),
    white 30%
  );
}

This first produces a lighter version of --brand, then mixes 30% white into that result.

Browser support

Relative Color Syntax shipped a bit later than color-mix(). It is supported in Chrome 119+, Safari 16.4+, and Firefox 128+. Pair with a fallback or feature detection if you target older browsers.