Relative color

Builds a new color from an existing one, like a lighter brand color.

What is relative color syntax?

Relative color builds a new color from an existing one, like "the brand color, but lighter" or "the same, half see-through".

:root { --brand: #0a7c86; }
.button:hover { background: oklch(from var(--brand) calc(l + 0.1) c h); }   /* a bit lighter */

Level: Freelancer · More CSS terms at this level

Updated September 27, 2026