color-mix()

See it working

The syntax

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

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable .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%); }

ResetCopy

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.