color-mix()

Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Ohne Angabe des Farbraums gilt oklab als Default (Safari 26.2, Chrome, Firefox); mehr als zwei Farben ist neuer (Chrome 150, Firefox 150).

Chrome 111Edge 111Safari 16.2Firefox 113

Mischt zwei Farben in einem gewählten Farbraum, sodass du Hover-, Tönungs- und Randfarben ohne Präprozessor aus einem Marken-Token ableiten kannst. Mischen in oklab/oklch liefert wahrnehmungsgleichmäßige Ergebnisse.

CSS

.fx-006{
  --brand:#2563eb;
  background:var(--brand);color:#fff;border:1px solid color-mix(in oklab,var(--brand),black 25%);
  padding:10px 18px;border-radius:8px;font:600 15px system-ui;
}
.fx-006:hover{background:color-mix(in oklab,var(--brand),white 15%)}
.fx-006:active{background:color-mix(in oklab,var(--brand),black 15%)}
.fx-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-006">Mixed hover</button>

Fallback: Deklariere zuerst eine einfache Farbe, dann die color-mix()-Zeile; Browser ohne Unterstützung behalten die einfache.

Quelle: webkit.org/blog/17640/webkit-features-for-safari-26-2/ and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Prompt

Leite jede Sekundärfarbe (Hover, Aktiv, Rand, dezenter Hintergrund) aus einer einzigen `--brand`-Custom-Property ab, mit `color-mix(in oklab, var(--brand), white|black N%)`. Benenne den Farbraum immer explizit (oklab oder oklch) für konsistente Ergebnisse, behalte die Basisfarbe als vorangehende Fallback-Deklaration und hardcode keine Hex-Varianten.