`oklch` + `color-mix()`

Try: Inspect swatches—variants come from one --brand token plus color-mix in OKLCH space.

brand

muted

strong

Older pipelines generated hex pairs in JS; modern CSS can branch perceptually uniform mixes from a single variable.

Source

:root {
  --brand: oklch(0.55 0.2 264);
}
.base { background: var(--brand); }
.muted {
  background: color-mix(in oklch, var(--brand) 65%, white);
}
.strong {
  background: color-mix(in oklch, var(--brand) 70%, black);
}

Support: oklch / color-mix are Baseline in current evergreen browsers; provide fallbacks if you must support legacy WebViews.

oklch + color-mix()

Source

`oklch` + `color-mix()`