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

Jahrelang erforderte das Generieren von Farbvarianten in CSS entweder das manuelle Festkodieren jedes Tons oder den Einsatz von JavaScript und einer Farbmanipulationsbibliothek wie chroma.js oder tinycolor2. Die CSS-Funktion color-mix() ändert das. Sie ist eine native CSS-Funktion, die jetzt in allen gängigen Browsern unterstützt wird und zwei Farben in einem bestimmten Verhältnis mischt – direkt in Ihrem Stylesheet, ohne JavaScript, ohne Vorverarbeitung.

Dieser Artikel behandelt die vollständige Syntax, erklärt, warum die Wahl des Farbraums alles verändert, beschreibt die praktischen Anwendungsfälle, die color-mix() wirklich nützlich machen, und behandelt Browser-Unterstützung und Fallback-Strategien.

Was ist color-mix()?

color-mix() ist eine CSS-Color-Level-5-Funktion, die zwei Farbwerte und ein Mischverhältnis nimmt und die resultierende gemischte Farbe zurückgibt. Es ist das CSS-Äquivalent des Mischens zweier Farben, aber mit einem entscheidenden zusätzlichen Parameter: dem Farbraum, in dem das Mischen stattfindet.

Der einfachste Anwendungsfall ist das Erstellen von Tönen und Schattierungen aus einer Grundfarbe. Statt jede Schattenvariante Ihres Markenblaus von Hand zu definieren, können Sie sie dynamisch ableiten:

:root {
  --brand-blue: #2563EB;

  /* Töne — mit Weiß mischen */
  --brand-blue-light:   color-mix(in oklch, var(--brand-blue) 60%, white);
  --brand-blue-lighter: color-mix(in oklch, var(--brand-blue) 30%, white);

  /* Schattierungen — mit Schwarz mischen */
  --brand-blue-dark:    color-mix(in oklch, var(--brand-blue) 80%, black);
  --brand-blue-darker:  color-mix(in oklch, var(--brand-blue) 50%, black);
}

Das Basisblau #2563EB wird einmal definiert. Die Töne und Schattierungen werden daraus abgeleitet. Wenn sich die Markenfarbe ändert, werden alle Varianten automatisch aktualisiert.

Syntax und Parameter

Die vollständige Syntax von color-mix() lautet:

color-mix(in <color-space>, <color1> [<percentage>]?, <color2> [<percentage>]?)

Der Farbraum-Parameter

Das erste Argument, in <color-space>, ist erforderlich und gibt an, wo das Mischen stattfindet. Gültige Optionen umfassen:

• srgb — mischt im Standard-RGB (am bekanntesten, aber anfällig für schlammige Mittelpunkte)
• hsl — mischt entlang des HSL-Zylinders
• hwb — mischt in HWB (Hue, Whiteness, Blackness)
• lab — mischt in CIE Lab (wahrnehmungsgleichmäßig)
• oklab — mischt in Oklab (bessere Gleichmäßigkeit als CIE Lab)
• lch — mischt in LCH (zylindrisches CIE Lab)
• oklch — mischt in OKLCH (zylindrisches Oklab, für die meisten Anwendungen empfohlen)
• display-p3 — mischt im Display-P3-Wide-Gamut
• xyz — mischt in CIE XYZ

Für die meisten Designarbeiten erzeugt oklch die wahrnehmungsmäßig natürlichsten Ergebnisse. Mehr dazu im nächsten Abschnitt.

Die Farbargumente

Die zwei Farbwerte können beliebige gültige CSS-Farben sein: Hex-Codes, rgb(), hsl(), oklch(), benannte Farben oder CSS Custom Properties. Jede kann optional einen Prozentsatz haben, der angibt, wie viel diese Farbe zum Mix beiträgt:

/* 50/50-Mischung (Standard, wenn keine Prozentsätze angegeben) */
color-mix(in oklch, #FF5733, #3498DB)

/* 70% erste Farbe, 30% zweite */
color-mix(in oklch, #FF5733 70%, #3498DB 30%)

/* 80% erste Farbe — Prozentsatz der zweiten Farbe wird als 20% abgeleitet */
color-mix(in oklch, #FF5733 80%, #3498DB)

Wenn die Prozentsätze weniger als 100% ergeben, ist das Ergebnis teilweise transparent. Wenn sie 100% überschreiten, werden die Prozentsätze normalisiert. Wenn kein Prozentsatz angegeben wird, ist die Mischung 50/50.

/* Diese sind gleichwertig */
color-mix(in srgb, blue, red)
color-mix(in srgb, blue 50%, red 50%)
color-mix(in srgb, blue 50%, red)

Mischen in verschiedenen Farbräumen

Die Wahl des Farbraums ist nicht dekorativ – sie verändert die erzeugte Farbe grundlegend. Dieselben zwei Farben, in verschiedenen Räumen gemischt, liefern dramatisch unterschiedliche Ergebnisse.

Mischen in sRGB

sRGB-Mischung funktioniert durch lineare Interpolation der Rot-, Grün- und Blaukanäle. Für viele Farbpaare liefert das akzeptable Ergebnisse, aber Komplementärfarben (die auf gegenüberliegenden Seiten des Farbrades liegen) erzeugen oft einen entsättigten, gräulichen Mittelpunkt.

/* Orange-Rot und Blau in sRGB mischen */
color-mix(in srgb, #FF5733 50%, #3498DB 50%)
/* Ergebnis: ein gedecktes, etwas bräunliches Lila — Bereich [#9A77B7] */

Das Problem liegt darin, dass sich die RGB-Kanäle von Komplementärfarben beim Mitteln gegenseitig aufheben. Rot [255, 87, 51] und Blau [52, 152, 219] ergeben einen Mittelpunkt von [154, 120, 135] – ein entsättigtes, ausgegrautes Ergebnis.

Mischen in HSL

HSL-Mischung interpoliert entlang des Farbrades, was ein anderes Problem verursachen kann: Farbtonrotation durch unerwartete Zwischenfarben.

/* Orange (Farbton ~15°) mit Blau (Farbton ~210°) in HSL gemischt */
color-mix(in hsl, #FF5733 50%, #3498DB 50%)
/* Farbton interpoliert durch ~112° — Sie erhalten eine grünliche Zwischenstufe */

Wenn zwei Farben weit voneinander auf dem Farbrad entfernt sind, kann der kürzeste Weg zwischen ihnen in HSL durch Grün oder andere unerwartete Farbtöne führen. HSL teilt auch das wahrnehmungsmäßige Nicht-Gleichmäßigkeitsproblem von hsl() allgemein – der Mittelpunkt-Helligkeitswert erscheint möglicherweise nicht als Mittelwert zwischen den beiden Quellhelligkeiten.

Mischen in OKLCH

OKLCH-Mischung ist der empfohlene Ansatz für die meisten praktischen Anwendungsfälle. Es interpoliert in einem wahrnehmungsgleichmäßigen Raum, was bedeutet, dass die Zwischenfarben wie natürliche visuelle Mittelpunkte aussehen – lebhaft, ausgewogen und frei von unerwarteter Farbtonverschiebung.

/* Orange-Rot mit Blau in OKLCH gemischt */
color-mix(in oklch, #FF5733 50%, #3498DB 50%)
/* Ergebnis: ein lebhaftes Magenta-Lila — wahrnehmungsmäßig in der Mitte */

#FF5733 (ein warmes Orange-Rot) und #3498DB (ein helles Blau), zu 50/50 in OKLCH gemischt, erzeugt ein lebhaftes, gesättigtes Zwischenergebnis. Der Farbton interpoliert direkt durch den Lilbereich – genau das, was ein Designer erwartet, wenn er gebeten wird, „den Unterschied" zwischen Orange und Blau zu halbieren.

Mischen in Oklab (kürzere/längere Farbtonwege)

Für Farbtoninterpolation können Sie auch angeben, ob Sie den kürzeren oder längeren Bogen um das Farbrad nehmen möchten:

/* Kürzerer Farbtonweg (Standard) */
color-mix(in oklch shorter hue, red, blue)

/* Längerer Farbtonweg — geht den anderen Weg um das Rad */
color-mix(in oklch longer hue, red, blue)

/* Zunehmender Farbton */
color-mix(in oklch increasing hue, red, blue)

Diese Kontrolle ist nützlich, wenn Sie bewusst eine Interpolation wünschen, die durch bestimmte Zwischenfarbtöne verläuft – beispielsweise ein Verlauf, der von Rot durch Gelb zu Blau statt durch Lila geht.

Vergleichstabelle

Verwenden Sie den Farbkonverter, um OKLCH-Werte für Ihre spezifischen Farben zu erkunden und vorherzusagen, wie sie sich mischen werden.

Praktische Anwendungsfälle

Hover- und Active-Zustände erstellen

Eine der unmittelbar nützlichsten Anwendungen ist das Generieren interaktiver Zustände, ohne separate Variablen für jeden zu definieren:

:root {
  --btn-bg: oklch(0.55 0.22 250);  /* Ihr Markenblau */
}

.btn {
  background-color: var(--btn-bg);
}

.btn:hover {
  /* Um 15% abdunkeln durch Mischen mit Schwarz */
  background-color: color-mix(in oklch, var(--btn-bg) 85%, black);
}

.btn:active {
  /* Stärker abdunkeln für den gedrückten Zustand */
  background-color: color-mix(in oklch, var(--btn-bg) 70%, black);
}

.btn:disabled {
  /* Für deaktivierten Zustand entsättigen und aufhellen */
  background-color: color-mix(in oklch, var(--btn-bg) 40%, white);
  opacity: 0.6;
}

Dadurch entfällt die Notwendigkeit, in einem Design-Tool drei separate Schattierungen auszuwählen und fest zu kodieren. Die Hover- und Active-Farben werden mathematisch aus der Basis abgeleitet, was die Beziehung konsistent hält, selbst wenn sich die Markenfarbe ändert.

Semantische Farbskalen aufbauen

Design-Systeme benötigen semantische Farben – Erfolg, Warnung, Gefahr –, die mit der Markenpalette harmonieren. color-mix() ermöglicht es, diese aus der Markenfarbe abzuleiten, statt sie unabhängig zu wählen:

:root {
  --brand: oklch(0.55 0.22 250);  /* Markenblau */

  /* Erfolg: Marke mit reinem Grün mischen, um einen Hauch Markenidentität zu bewahren */
  --success: color-mix(in oklch, oklch(0.65 0.22 145) 85%, var(--brand) 15%);

  /* Warnung: reines Amber — hier kein Mix nötig */
  --warning: oklch(0.75 0.18 70);

  /* Gefahr: reines Rot */
  --danger: oklch(0.62 0.24 25);

  /* Getönte Hintergründe für jeden Zustand */
  --success-bg: color-mix(in oklch, var(--success) 12%, white);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, white);
  --danger-bg:  color-mix(in oklch, var(--danger)  12%, white);
}

Der --success-bg ist ein sehr heller Ton des Erfolgsgrüns, der automatisch abgeleitet wird. Verwenden Sie diese für Benachrichtigungsbanner, Hinweisfelder und Fehler-Zustände von Formularfeldern.

Vollständige Schattenskalen dynamisch generieren

Während der Schattengenerator das richtige Werkzeug zum Erstellen einer vollständigen 50–950-Skala mit präzisen Wahrnehmungsschritten ist, kann color-mix() eine brauchbare Annäherung inline für Komponenten generieren, die eine Handvoll Varianten benötigen:

:root {
  --primary: oklch(0.58 0.20 250);

  --primary-50:  color-mix(in oklch, var(--primary) 8%,  white);
  --primary-100: color-mix(in oklch, var(--primary) 15%, white);
  --primary-200: color-mix(in oklch, var(--primary) 30%, white);
  --primary-300: color-mix(in oklch, var(--primary) 50%, white);
  --primary-400: color-mix(in oklch, var(--primary) 70%, white);
  --primary-500: var(--primary);
  --primary-600: color-mix(in oklch, var(--primary) 85%, black);
  --primary-700: color-mix(in oklch, var(--primary) 70%, black);
  --primary-800: color-mix(in oklch, var(--primary) 55%, black);
  --primary-900: color-mix(in oklch, var(--primary) 35%, black);
  --primary-950: color-mix(in oklch, var(--primary) 20%, black);
}

Dark-Mode-Farbableitung

color-mix() ist besonders wertvoll für die systematische Ableitung von Dark-Mode-Oberflächenfarben:

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base:     #09090b;
    --surface-elevated: color-mix(in oklch, var(--brand) 8%, #09090b);
    --surface-overlay:  color-mix(in oklch, var(--brand) 12%, #09090b);
  }
}

Das Mischen einer kleinen Menge der Markenfarbe in dunkle Oberflächen erzeugt eine subtile Tönung – eine Technik, die von Apples macOS und vielen modernen Design-Systemen verwendet wird, um den Dark Mode weniger steril wirken zu lassen als rein neutrale Oberflächen.

Alphakanal-Verhalten

Wenn die Prozentsätze nicht 100% ergeben, ist das Ergebnis teilweise transparent. Das kann bewusst eingesetzt werden, um transluzente Varianten zu erstellen:

/* 30% Blau auf transparenter Basis — entspricht rgba bei 30% Deckkraft */
color-mix(in srgb, blue 30%, transparent)

/* Auch gültig: benannte Transparenz von der anderen Seite */
color-mix(in oklch, #3B82F6 25%, transparent)

Dies ersetzt das Muster der Verwendung von rgba() mit einem festen Alpha. Der Vorteil ist, dass die Deckkraftbeziehung explizit im Mischprozentsatz ausgedrückt wird und Sie mit jeder Farbe mischen können – nicht nur mit reiner Transparenz.

Browser-Unterstützung und Fallbacks

Stand 2026 wird color-mix() vollständig unterstützt in:

• Chrome/Edge: seit Version 111 (März 2023)
• Firefox: seit Version 113 (Mai 2023)
• Safari: seit Version 16.2 (Dezember 2022)

Die globale Unterstützung übersteigt 90%. Nutzer, die color-mix()-Ergebnisse nicht sehen können, sind solche mit sehr alten mobilen Browsern oder Unternehmensumgebungen mit gesperrten Browser-Versionen.

Progressive-Enhancement-Fallback

CSS Custom Property Deklarationen werden kaskadiert. Wenn der Browser color-mix() nicht unterstützt, wird der Fallback in der vorherigen Zeile verwendet:

:root {
  /* Fallback für Browser ohne color-mix() */
  --btn-hover: #1D4ED8;

  /* Mit berechnetem Wert für moderne Browser überschreiben */
  --btn-hover: color-mix(in oklch, var(--btn-bg) 85%, black);
}

Da Custom Properties dieselbe Variable neu deklarieren, funktioniert das als Progressive-Enhancement-Muster. Browser, die color-mix() nicht unterstützen, verwenden die explizite Fallback-Farbe; moderne Browser verwenden den abgeleiteten Wert.

Alternativ verwenden Sie @supports:

.btn:hover {
  background-color: #1D4ED8; /* Fallback */
}

@supports (color: color-mix(in oklch, red, blue)) {
  .btn:hover {
    background-color: color-mix(in oklch, var(--btn-bg) 85%, black);
  }
}

Der @supports-Ansatz ist expliziter und einfacher zu bereinigen, wenn Sie die Unterstützung für alte Browser irgendwann aufgeben.

Wesentliche Erkenntnisse

• color-mix() mischt zwei Farben nativ in CSS und eliminiert die Notwendigkeit von JavaScript oder vorab generierten Schattentabellen für viele Anwendungsfälle.
• Das in <color-space>-Argument steuert, wo das Mischen stattfindet, und beeinflusst das Ergebnis erheblich. Verwenden Sie oklch für die meisten Arbeiten – es erzeugt wahrnehmungsmäßig natürliche Mittelpunkte ohne schlammige Entsättigung (sRGB-Problem) oder unerwartete Farbtonverschiebungen (HSL-Problem).
• Die praktischsten Anwendungsfälle sind: interaktive Zustände (Hover, Active, Disabled), semantische Farbableitung, Dark-Mode-Oberflächen-Tönung und die Generierung kleiner Schattenskalen aus einer einzigen Basisvariable.
• Wenn Prozentsätze weniger als 100% ergeben, ist die Ausgabe teilweise transparent – nützlich für die Erstellung von Deckkraft-Varianten ohne rgba().
• Die Browser-Unterstützung umfasst alle modernen Browser seit Anfang 2023. Geben Sie einen fest kodierten Fallback-Wert in der vorherigen CSS-Deklaration oder innerhalb eines @supports-Blocks für ältere Umgebungen an.
• Verwenden Sie den Farbkonverter, um Ihre bestehenden Markenfarben vor der Verwendung in color-mix() in OKLCH umzuwandeln, und den Palettengenerator, um harmonische Farbbeziehungen zu sehen, bevor Sie CSS schreiben.