Mix CSS Variables Together

Custom Properties Inside color-mix()

color-mix() accepts any valid color value, including CSS custom properties. This is the cleanest way to keep palette logic centralized:

:root {
  --brand: #2563eb;
  --neutral: #71717a;
  --bg: white;
}

.button {
  background: var(--brand);
  border: 1px solid color-mix(in oklch, var(--brand), black 20%);
}

.button-secondary {
  background: color-mix(in oklch, var(--brand), var(--neutral) 60%);
}

.surface {
  background: color-mix(in oklch, var(--brand) 6%, var(--bg));
}

When the design team wants to try a new brand color, you flip --brand and the entire derived system follows.

Compose with @property for guaranteed types

If you want browsers to validate the variable at parse time, register it with @property:

@property --brand {
  syntax: "<color>";
  inherits: true;
  initial-value: #2563eb;
}

Now color-mix(in oklch, var(--brand), white 25%) is guaranteed to have a valid color input.

Themable per-region

Variables cascade. You can set --brand on a parent block to retheme just that region:

.promo-section { --brand: #ec4899; } /* pink for this section only */

Pair with the CSS variable generator to scaffold a complete token system.