CSS color-mix() — Farben dynamisch mischen in CSS

1. Warum CSS color-mix() ein Paradigmenwechsel ist

Bisher erforderte jede Form der Farbmischung in CSS entweder einen Präprozessor (Sass mix(), Less mix()) oder JavaScript. Das bedeutete Abhängigkeiten, Build-Schritte und statische Farbwerte, die zur Build-Zeit berechnet werden — nicht zur Laufzeit. CSS color-mix() ändert das fundamental: Farbmischungen werden nativ im Browser berechnet, reagieren auf CSS Custom Properties und können auf Laufzeitinformationen wie Nutzerpräferenzen oder JavaScript-gesteuerte Variablen reagieren.

Ein konkretes Beispiel: Ein Design-System definiert eine Primärfarbe als Custom Property --color-brand. Mit CSS color-mix() können alle Varianten dieser Farbe — helle Hintergründe, dunkle Texte, hover-Zustände, disabled-Zustände — direkt aus dieser einen Variablen abgeleitet werden. Ändert ein Nutzer oder ein Theme-System die Primärfarbe, aktualisieren sich alle Varianten automatisch. Das ist mit Sass-Variablen nicht möglich, weil Sass zur Build-Zeit kompiliert und keine Laufzeit-Custom-Properties kennt.

Der zweite Paradigmenwechsel liegt in der Farbqualität. CSS color-mix() unterstützt moderne Farbräume wie oklch, display-p3 und oklab, die perceptuell gleichmäßiger sind als sRGB. Das bedeutet: Gemischte Farben sehen für das menschliche Auge konsistent aus — kein unerwartetes Abdunkeln oder Entsättigen in der Mitte eines Farbverlaufs, wie es bei sRGB-Mischungen passieren kann. Die Wahl des Farbraums ist damit kein technisches Detail, sondern eine Designentscheidung.

2. Syntax und Parameter von color-mix()

CSS color-mix() hat folgende Syntax: color-mix(in <farbraum>, <farbe1> [prozentsatz], <farbe2> [prozentsatz]). Der erste Parameter ist immer die Farbraum-Angabe, eingeleitet durch in. Die beiden Farben können mit Prozentangaben gewichtet werden — ohne Angabe wird jeweils 50% angenommen. Die Prozentanteile müssen nicht zu 100% addieren: Wenn beide unter 100% liegen, wird die Ausgabe in ihrer Alpha-Transparenz entsprechend reduziert.

Der Prozentsatz gibt an, wie viel der ersten Farbe im Ergebnis enthalten ist. color-mix(in oklch, violet 80%, white) ergibt eine Farbe, die 80% Violet und 20% Weiß enthält. color-mix(in oklch, violet 30%, white) ergibt eine deutlich hellere Variante mit 30% Violet und 70% Weiß. Die Prozentsätze sind optional — ohne Angabe mischt CSS color-mix() zu gleichen Teilen. color-mix(in oklch, violet, white) ist identisch mit color-mix(in oklch, violet 50%, white 50%).

Farben in CSS color-mix() können in beliebigen CSS-Formaten angegeben werden: named colors, hex, rgb(), hsl(), oklch(), color() — der Browser konvertiert sie automatisch in den angegebenen Farbraum vor der Mischung. Das bedeutet, man kann zwei Farben aus verschiedenen Formaten mischen und erhält das Ergebnis im Ziel-Farbraum. Besonders nützlich: CSS color-mix() akzeptiert CSS Custom Properties als Farbargumente — der Schlüssel zum dynamischen Theming.

/* CSS color-mix() — syntax and examples */

/* Basic 50/50 mix in oklch color space */
.example-1 {
  color: color-mix(in oklch, violet, white);
  /* → 50% violet + 50% white, mixed in oklch */
}

/* Weighted mix: 80% brand color, 20% white (light tint) */
.example-2 {
  background: color-mix(in oklch, var(--color-brand) 80%, white);
}

/* Very light tint: 10% brand + 90% white */
.example-3 {
  background: color-mix(in oklch, var(--color-brand) 10%, white);
}

/* Dark shade: 80% brand + 20% black */
.example-4 {
  background: color-mix(in oklch, var(--color-brand) 80%, black);
}

/* Transparency from partial percentages (alpha effect) */
.example-5 {
  /* Both < 100% → result is semi-transparent */
  background: color-mix(in srgb, blue 50%, transparent);
  /* Equivalent to blue with 50% opacity */
}

/* Mix two custom properties */
.example-6 {
  border-color: color-mix(in oklch, var(--color-primary), var(--color-secondary) 30%);
}

3. Farbräume: oklch, srgb, hsl und ihre Unterschiede

Der Farbraum-Parameter von CSS color-mix() bestimmt, wie die Mischung berechnet wird — und das Ergebnis kann je nach Farbraum erheblich variieren. In sRGB werden die RGB-Kanäle linear interpoliert, was bei manchen Farbkombinationen zu unerwarteten Ergebnissen führt: Das Mischen von Gelb und Blau in sRGB ergibt ein schmutziges Grau statt einem sauberen Grün, weil sRGB nicht perceptuell gleichmäßig ist.

In hsl wird der Farbton (Hue), die Sättigung und die Helligkeit interpoliert. Das klingt intuitiver, hat aber ein Problem: Die Helligkeit in HSL korreliert nicht mit der wahrgenommenen Helligkeit. Ein „gleichheller" HSL-Übergang kann visuell ungleichmäßig wirken. In oklch (Oklab Lightness Chroma Hue) wird die Helligkeit als perceptuell gleichmäßig modelliert — das bedeutet, dass ein Übergang von einer Farbe zur nächsten visuell gleichmäßig erscheint, auch wenn die Rohwerte ungleich ändern. CSS color-mix() in oklch erzeugt dadurch die natürlichsten Farbmischungen.

Weitere unterstützte Farbräume in CSS color-mix(): oklab (wie oklch, aber in kartesischen Koordinaten), lab (CIE Lab), lch (CIE LCH), display-p3 (erweiterter Farbraum für Wide-Gamut-Displays), a98-rgb, prophoto-rgb. Für die meisten Web-Anwendungen sind oklch und srgb die relevantesten Optionen. oklch für perceptuell gleichmäßige Mischungen, srgb für volle Kompatibilität mit alten Farbberechnungen.

4. Warum oklch für color-mix() bevorzugt wird

oklch hat gegenüber anderen Farbräumen in CSS color-mix() einen entscheidenden Vorteil: Gleichmäßige Helligkeitswahrnehmung. Das bedeutet praktisch, dass eine Tonal-Palette — von sehr hell bis sehr dunkel — bei gleichen Mischverhältnissen auch visuell gleich abgestufte Helligkeitsstufen erzeugt. Das ist bei sRGB nicht garantiert. Eine sRGB-Palette von Hellblau zu Weiß kann in bestimmten Bereichen visuell „klumpen" — Schritte wirken ungleich groß.

Ein weiterer Vorteil von oklch in CSS color-mix(): Farbtonerhaltung bei Helligkeitsänderungen. Wenn man eine Farbe in oklch mit Weiß oder Schwarz mischt, bleibt der Farbton (Hue) erhalten — nur Helligkeit und Chroma ändern sich. In sRGB kann Farbton-Drift auftreten: Ein Rot, das mit Weiß gemischt wird, verschiebt sich leicht in Richtung Orange oder Pink, abhängig von den RGB-Ausgangswerten. oklch modelliert Farbton als separate Achse, die beim Mischen unabhängig interpoliert wird.

Für Design-Systeme, die konsistente Markenfarben in verschiedenen Helligkeitsstufen benötigen, ist CSS color-mix() in oklch die beste Wahl. Die erzeugten Tints und Shades entsprechen dem, was ein professionelles Farbsystem (wie Material Design oder Tailwind CSS mit modernen Farbtönen) manuell für sein Palettendesign optimiert. Der Unterschied ist in direktem Vergleich sichtbar — besonders bei gesättigten Farben wie Blau, Grün und Violett.

/* oklch vs srgb: perceptual uniformity in color-mix() */

:root {
  --brand: oklch(55% 0.25 290); /* perceptual violet */
}

/* oklch mix: perceptually uniform — each step looks equally spaced */
.palette-oklch {
  --tint-90: color-mix(in oklch, var(--brand) 10%, white);
  --tint-70: color-mix(in oklch, var(--brand) 30%, white);
  --tint-50: color-mix(in oklch, var(--brand) 50%, white);
  --tint-30: color-mix(in oklch, var(--brand) 70%, white);
  --shade-70: color-mix(in oklch, var(--brand) 70%, black);
  --shade-50: color-mix(in oklch, var(--brand) 50%, black);
  --shade-30: color-mix(in oklch, var(--brand) 30%, black);
}

/* srgb mix: RGB channel interpolation — may drift visually */
.palette-srgb {
  --tint-50: color-mix(in srgb, var(--brand) 50%, white);
  /* May appear pinkish/bluish depending on the base hue */
}

/* oklab mix: similar to oklch but cartesian — good for smooth gradients */
.gradient-bg {
  background: linear-gradient(
    to right,
    color-mix(in oklab, var(--brand), black 50%),
    var(--brand),
    color-mix(in oklab, var(--brand), white 50%)
  );
}

5. Transparenz und Alpha-Mischung

Eine elegante Anwendung von CSS color-mix() ist die Erzeugung von Farben mit Transparenz aus opaken Ausgangswerten. Das Mischen einer Farbe mit transparent erzeugt eine Version dieser Farbe mit reduziertem Alpha-Kanal. color-mix(in srgb, blue 50%, transparent) ist äquivalent zu rgb(0 0 255 / 0.5). Das ist besonders wertvoll in Kombination mit Custom Properties: Wenn die Basisfarbe als Custom Property definiert ist, kann die transparente Variante direkt daraus abgeleitet werden, ohne den Alpha-Wert manuell zu kennen.

Die Alpha-Mischung in CSS color-mix() funktioniert durch die Teilprozenttechnik: Wenn die Prozentsätze beider Farben zusammen unter 100% liegen, wird der fehlende Anteil als Transparenz interpretiert. color-mix(in oklch, red 40%, transparent 40%) ergibt Rot mit 80% Opazität — denn 40% + 40% = 80%, der fehlende Anteil (20%) macht das Ergebnis zu 20% transparent. Dieses Verhalten ermöglicht präzise Kontrolle über Alpha-Werte durch Prozentkombinationen.

Ein praktischer Anwendungsfall: Overlay-Farben für Modal-Hintergründe, Skeleton-Loader-Animationen und Hover-States. Statt rgba()-Werte zu raten oder zu berechnen, definiert man die Basisfarbe und leitet die transparente Variante per CSS color-mix() ab. Wenn die Basisfarbe über ein Custom Property geändert wird — etwa bei einem Nutzer-customizable Theme — aktualisieren sich auch alle transparenten Varianten automatisch.

6. Dynamisches Theming mit Custom Properties

Die mächtigste Anwendung von CSS color-mix() ist dynamisches Theming. Das Prinzip: Man definiert eine kleine Anzahl von Kern-Custom-Properties — die Primärfarbe, Akzentfarbe, vielleicht eine Neutralfarbe — und leitet daraus alle anderen Designwerte ab. Schaltflächen-Hover-Zustände, Hintergründe, Rahmen, Schatten — all das als Derivate der Kern-Custom-Properties, berechnet durch CSS color-mix() zur Laufzeit.

Dieser Ansatz hat mehrere Vorteile gegenüber statischen Farbpaletten. Erstens: Ein Theme-Wechsel erfordert nur die Änderung der Kern-Custom-Properties — alle abgeleiteten Farben folgen automatisch. Zweitens: Nutzer können eigene Farben angeben (etwa über einen Color-Picker), und das gesamte Theme passt sich harmonisch an. Drittens: Man muss nicht für jede Variante einen expliziten Farbwert im Design-Dokumentation festhalten — die Ableitungsformel ist das Dokumentation.

Eine vollständige Theme-Architektur mit CSS color-mix() definiert typischerweise 3–5 Kern-Farben und leitet 20–40 Derivate ab. Das ist deutlich weniger als ein statisches Design-System mit 40–80 expliziten Farbwerten, und die Derivate sind immer harmonisch aufeinander abgestimmt — da sie alle aus denselben Kern-Farben berechnet werden.

/* Dynamic theming system with CSS color-mix() and Custom Properties */

:root {
  /* Core brand colors — the only values to change for a new theme */
  --brand-primary: oklch(55% 0.25 290);
  --brand-neutral: oklch(40% 0.02 290);

  /* Automatically derived palette — no manual hex values needed */
  --color-surface:   color-mix(in oklch, var(--brand-primary)  5%, white);
  --color-subtle:    color-mix(in oklch, var(--brand-primary) 12%, white);
  --color-muted:     color-mix(in oklch, var(--brand-primary) 20%, white);
  --color-border:    color-mix(in oklch, var(--brand-primary) 25%, white);
  --color-text-weak: color-mix(in oklch, var(--brand-neutral) 60%, white);
  --color-text:      var(--brand-neutral);
  --color-text-strong: color-mix(in oklch, var(--brand-neutral), black 30%);

  /* Interactive states derived from primary */
  --btn-bg:        var(--brand-primary);
  --btn-bg-hover:  color-mix(in oklch, var(--brand-primary), black 15%);
  --btn-bg-active: color-mix(in oklch, var(--brand-primary), black 30%);
  --btn-ring:      color-mix(in oklch, var(--brand-primary) 40%, transparent);

  /* Semantic colors built on the same base */
  --color-danger:  color-mix(in oklch, red, var(--brand-primary) 20%);
  --color-success: color-mix(in oklch, green, var(--brand-primary) 15%);
}

/* Changing the entire theme: one variable */
[data-theme="teal"] {
  --brand-primary: oklch(60% 0.20 195);
  /* All derived values auto-update */
}

7. Dark Mode mit color-mix() umsetzen

Dark Mode ist ein klassisches Anwendungsfeld für CSS color-mix(). Statt zwei separate Farbpaletten für Light und Dark Mode zu pflegen, definiert man eine Kernpalette und leitet die Dark-Mode-Varianten durch Mischung mit dunklen Tönen ab. Das reduziert Inkonsistenzen zwischen den Modi und stellt sicher, dass Brand-Farben in beiden Modi denselben Farbton behalten — nur Helligkeit und Kontext ändern sich.

Eine effektive Dark-Mode-Strategie mit CSS color-mix(): Im Light Mode werden Farben in der Standard-:root-Definition gesetzt. Im Dark Mode (@media (prefers-color-scheme: dark) oder [data-theme="dark"]) werden die Custom Properties überschrieben — aber nicht mit manuell ausgesuchten Hex-Werten, sondern mit CSS color-mix()-Derivaten der Brand-Farben. Der Hintergrund wird durch Mischen der Brand-Farbe mit Schwarz erzeugt, was sicherstellt, dass der Dark-Mode-Hintergrund zum Brand passt statt ein generisches Grau zu sein.

8. Farbräume im Mischvergleich

Die Wahl des Farbraums in CSS color-mix() beeinflusst das visuelle Ergebnis erheblich. Hier ein direkter Vergleich der wichtigsten Optionen.

Für die meisten Web-Projekte mit CSS color-mix() ist oklch die klare erste Wahl: perceptuell gleichmäßige Ergebnisse, stabile Farbton-Erhaltung und guter Browser-Support seit 2023. sRGB bleibt relevant, wenn genaue Übereinstimmung mit vorangegangenen Berechnungen benötigt wird oder wenn sehr einfache Tint/Shade-Operationen mit maximal verbreiteter Kompatibilität umgesetzt werden sollen.

9. Praxis: Tonal Palette mit color-mix() aufbauen

Eine Tonal Palette ist eine Sammlung von Helligkeitsstufen einer Basisfarbe — von sehr hell (nahe Weiß) bis sehr dunkel (nahe Schwarz). Design-Systeme wie Material Design 3 und Tailwind CSS v4 verwenden Tonal Palettes als Grundlage für alle semantischen Farbzuweisungen. Mit CSS color-mix() lässt sich eine Tonal Palette dynamisch berechnen, statt 11 oder mehr manuell ausgesuchte Hex-Werte zu pflegen.

Der Aufbau einer Tonal Palette mit CSS color-mix() in oklch folgt einem einfachen Muster: Für Tints (helle Varianten) mischt man die Basisfarbe mit Weiß, wobei der Basisfarb-Anteil von 90% (fast rein) bis 5% (sehr hell) variiert. Für Shades (dunkle Varianten) mischt man mit Schwarz. Das Ergebnis ist eine harmonische, perceptuell gleichmäßige Palette, die bei oktlch-Mischung konsistenter wirkt als manuell ausgewählte Werte. Der entscheidende Vorteil für Projekte mit mehreren Themes oder nutzer-konfigurierbaren Farben: Alle Tonal-Palette-Werte folgen der Basisfarbe ohne manuellen Eingriff.

/* Complete tonal palette via CSS color-mix() in oklch */

:root {
  --base: oklch(55% 0.25 290); /* violet brand color */

  /* Tints — base mixed with white */
  --color-50:  color-mix(in oklch, var(--base)  5%, white);
  --color-100: color-mix(in oklch, var(--base) 12%, white);
  --color-200: color-mix(in oklch, var(--base) 22%, white);
  --color-300: color-mix(in oklch, var(--base) 35%, white);
  --color-400: color-mix(in oklch, var(--base) 50%, white);
  --color-500: var(--base); /* pure base */

  /* Shades — base mixed with black */
  --color-600: color-mix(in oklch, var(--base) 85%, black);
  --color-700: color-mix(in oklch, var(--base) 70%, black);
  --color-800: color-mix(in oklch, var(--base) 55%, black);
  --color-900: color-mix(in oklch, var(--base) 40%, black);
  --color-950: color-mix(in oklch, var(--base) 25%, black);
}

/* Usage in components */
.alert-info {
  background: var(--color-100);
  border: 1px solid var(--color-300);
  color: var(--color-800);
}

.btn-primary {
  background: var(--color-500);
  color: white;
}
.btn-primary:hover { background: var(--color-600); }
.btn-primary:active { background: var(--color-700); }

10. Zusammenfassung

CSS color-mix() ist eine native CSS-Funktion, die Farbmischungen ohne Präprozessoren oder JavaScript direkt im Browser berechnet. Die Wahl des Farbraums — insbesondere oklch — bestimmt die visuelle Qualität der Mischung. oklch erzeugt perceptuell gleichmäßige Ergebnisse mit stabiler Farbton-Erhaltung, was es zur ersten Wahl für Design-Systeme und Tonal Palettes macht. Die Kombination mit CSS Custom Properties ermöglicht dynamische Themes, die auf Nutzerpräferenzen und JavaScript-Variablen reagieren.

Die wichtigsten Einsatzgebiete: Tonal Palettes aus einer Basisfarbe ableiten. Transparente Farb-Varianten für Overlays und Schatten erzeugen. Interaktive Zustände (Hover, Active, Disabled) als Derivate der Primärfarbe berechnen. Dark Mode ohne doppelte Farbpaletten implementieren. Und nutzer-konfigurierbare Themes bauen, bei denen alle Design-Werte harmonisch aus einer kleinen Anzahl von Kern-Farben abgeleitet werden. CSS color-mix() ist kein Spielzeug-Feature, sondern ein ernsthaftes Werkzeug für professionelle CSS-Architektur.

11. FAQ: CSS color-mix() — Farben dynamisch mischen