Colour

color-mix()

Widely availablesince Nov 2025

Replaces: A Sass function, or a hand-picked hex for every hover state. Two colours are mixed in the browser, in the colour space you choose.

See it working

The syntax

.btn:hover {
  background: color-mix(in oklch, var(--brand), black 15%);
}

The demo’s full CSS

.dm-cm { display: grid; place-items: center; min-height: 110px; }
.dm-cm-btn { --dm-brand: #4f46e5; font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px;
  border: 0; border-radius: 10px; color: #fff; cursor: pointer; background: var(--dm-brand); transition: background .15s; }
.dm-cm-btn:hover { background: color-mix(in oklch, var(--dm-brand), black 15%); }
.dm-cm-btn:active { background: color-mix(in oklch, var(--dm-brand), black 30%); }

For browsers without it

A browser without it ignores the hover declaration and the button keeps its resting colour, so the fallback is already written.