color-mix() in CSS: Farben im Browser mischen

Die CSS-Funktion color-mix, color-mix(), mischt zwei Farben in einem Farbraum deiner Wahl und gibt eine neue Farbe zurück. Schreib color-mix(in oklab, #7c3aed 40%, white), und du bekommst ein blasses Violett aus 40 Prozent Violett und 60 Prozent Weiß, wahrnehmungsgetreu gemischt. Es funktioniert in jedem aktuellen großen Browser. Zusammen mit Custom Properties macht es aus einer Markenfarbe helle Töne, Schattierungen, Hover-Zustände und transparente Overlays, ohne einen einzigen fest kodierten Hex-Wert.

Syntax von color-mix()

/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }

In welchem Farbraum du mischst

Der Farbraum bestimmt den Weg zwischen den beiden Farben. In sRGB mittelt der Browser Rot-, Grün- und Blauwerte, was leicht nachzuvollziehen ist, aber nicht dem Sehen entspricht. Zwei weit entfernte Farbtöne laufen unterwegs durch ein stumpfes Grau. In oklab folgt die Mischung wahrgenommener Helligkeit und Farbe, sodass die Mitte sauber bleibt und die Stufen gleichmäßig wirken. Verlaufsinterpolation erklärt dieselbe Wahl für Verläufe, wo der Effekt am leichtesten zu sehen ist.

• oklab für helle Töne, Schattierungen und das meiste alltägliche Mischen. Gleichmäßige Helligkeit, keine graue Senke.
• oklch, wenn der Farbton wandern soll, etwa um zwei Markenfarben zu einer dritten zu mischen, die im Farbkreis zwischen ihnen liegt.
• srgb zum Mischen mit transparent oder um ältere Designtools zu treffen, die in sRGB mischen.
• srgb-linear für physikalisch basiertes Lichtmischen, das in der Mitte heller wirkt.

Warum wahrnehmungsbasierte Farbräume sich besser verhalten, erklärt OKLCH erklärt. Neuere Fassungen der Spezifikation erlauben, den Farbraum wegzulassen und auf oklab zurückzufallen, aber die Unterstützung dafür ist jünger, also schreib in oklab ausdrücklich.

Helle Töne und Schattierungen aus einer Markenfarbe

Das nützlichste Muster ist eine Skala aus einer einzigen Variable. Misch Richtung Weiß für helle Töne, Richtung Schwarz für Schattierungen. Ändere die Variable, und jede Stufe aktualisiert sich, ideal für Produkte mit mehreren Marken oder vom Nutzer gewählte Themes.

:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}

Mit reinem Weiß und Schwarz zu mischen ist ein Startpunkt. Für wärmere helle Töne misch Richtung gebrochenes Weiß wie #fdf6ec; für sattere Schattierungen Richtung tiefes Marineblau statt Schwarz. So fühlt sich die Skala nach deiner Marke an statt nach einer beliebigen Abstufung. Helle Töne, Abtönungen und Schattierungen behandelt die Farbtheorie.

Transparenz mit color-mix()

Vor color-mix() musstest du für eine durchscheinende Version einer Farbe aus einer Variable die Kanäle getrennt speichern. Jetzt mischst du mit transparent. Der Anteil, den du behältst, ist die Deckkraft.

.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}

Häufige Fehler mit color-mix()

• Den Farbraum weglassen in Code, der in älteren Browsern laufen muss. Dann fällt die ganze Deklaration weg, nicht nur der Farbraum.
• Für jede Schattierung mit Schwarz mischen. Schattierungen gesättigter Farben werden stumpf; misch stattdessen Richtung einer tiefen Version des Farbtons.
• Erwarten, dass Prozente unter 100 deckend bleiben. color-mix(in oklab, red 20%, blue 30%) ist halb transparent.
• hsl für helle Töne nutzen. Helligkeit in hsl ist nicht wahrnehmungsbasiert, daher sehen ein Gelb und ein Blau bei gleicher Mischung überhaupt nicht nach derselben Stufe aus.

Browserunterstützung und Fallbacks

color-mix() ist seit 2023 in Chrome, Edge, Firefox und Safari verfügbar, und die aktuelle Unterstützung steht bei caniuse. Musst du sehr alte Browser abdecken, deklariere zuerst eine einfache Farbe und lass die gemischte sie überschreiben. Browser, die die zweite Zeile nicht verstehen, ignorieren sie.

.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}

Ein vollständiges Theme auf Basis dieser Muster, mit hellem und dunklem Modus, steht in CSS-Variablen fürs Theming.

Farben für Verläufe mischen

color-mix() ist in Verläufen praktisch, wo es aus zwei Markenfarben einen mittleren Farbstopp berechnen kann, damit der Übergang nie durch Matsch läuft. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) gibt dir einen dritten Stopp auf dem Farbtonweg zwischen beiden. Das eigentliche Problem behandelt trübe Verläufe.

Lebt deine Markenfarbe in einem Gradiently Mark, enthält das Rezept des Marks schon eine Familie verwandter Farben, die zusammen funktionieren, und im Markt suchst du mit Farbwörtern wie „tiefes Violett“ nach einem Mark, der um den Farbton herum gebaut ist, von dem du ausgehst.