Relative color syntax

CSS syntax for deriving one color from another — oklch(from var(--color-primary-500) calc(l + 0.1) c h) — by unpacking a color into its channels in a chosen space and rewriting any of them; the way to say “this color, but lighter” or “this hue at 40% alpha” without a second token

With color-mix() it is how a palette becomes a system: one primary in OKLCH and the hover, the tint, the border and the disabled state derived from it in perceptually even steps, rather than nine hand-picked hexes. This site’s themes declare their palettes in OKLCH for this reason; the card border-tints on the slides repo are color-mix() over a role token. Baseline across browsers since 2024. The caution is contrast: a derived color is not automatically accessible, so the derived pairs still get checked.