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

[Canonical HTML page](https://gradiently.design/de/guide/css-color-mix)

Mit color-mix() erledigt der Browser die Farbmathematik, die du früher im Präprozessor oder nach Augenmaß gemacht hast. Mit dem richtigen Farbraum wird eine Markenfarbe zur ganzen Palette aus Tönungen, Schattierungen und Transparenzen.

## The short version

- Die CSS-Funktion color-mix mischt zwei Farben in einem benannten Farbraum, zum Beispiel color-mix(in oklab, #7c3aed 40%, white).
- Gibst du nur einen Prozentwert an, bekommt die andere Farbe den Rest; ohne Prozentwert wird halb und halb gemischt.
- Mischen in oklab hält die Helligkeit gleichmäßig und vermeidet die grauen Mitten, die sRGB-Mischungen zwischen weit entfernten Farbtönen erzeugen.
- Eine Farbe mit transparent zu mischen ist der sauberste Weg, eine durchscheinende Version einer Farbe aus einer Custom Property zu erzeugen.
- color-mix() funktioniert in allen aktuellen großen Browsern und ist mit einer einfachen Farbe als Fallback für sehr alte Browser produktionsreif.

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()

```css
/* 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); }
```

Der Farbraum kommt zuerst und wird ausgeschrieben. Farbtonbasierte Räume wie oklch und hsl akzeptieren auch eine Farbtonrichtung: shorter, longer, increasing oder decreasing.

| Du schreibst | Der Browser nutzt | Hinweise |
| --- | --- | --- |
| Keine Prozente | 50 % und 50 % | Eine gleichmäßige Mischung |
| Ein Prozentwert, etwa 30 % | 30 % und 70 % | Die andere Farbe bekommt den Rest |
| Zwei, die 100 % ergeben | Wie geschrieben | Die später am klarsten lesbare Form |
| Zwei, die mehr als 100 % ergeben | Auf 100 % herunterskaliert | 60 % und 60 % verhalten sich wie 50 % und 50 % |
| Zwei, die weniger als 100 % ergeben | Hochskaliert, dann durchscheinend gemacht | 20 % und 30 % ergeben ein halb deckendes Ergebnis |

Wie Prozente aufgelöst werden. Die letzte Zeile überrascht viele: Eine Summe unter 100 macht das Ergebnis teilweise transparent.

## 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](https://gradiently.design/de/guide/gradient-interpolation) erklärt dieselbe Wahl für Verläufe, wo der Effekt am leichtesten zu sehen ist.

- sRGB: flaches Grau in der Mitte: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: hellere, sauberere Mitte: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: wandert durch Cyan und Grün: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Blau zu Gelb in drei Farbräumen. Die Mitte jedes Streifens ist genau das, was `color-mix()` bei 50 Prozent in diesem Raum liefert: `#808080` in sRGB, ein helles Blaugrau in oklab.

- **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](https://gradiently.design/de/guide/oklch-explained). 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.

```css
: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);
}
```

Eine siebenstufige Skala aus einer Farbe. Tausch `--brand` gegen einen beliebigen Hex-Wert, und die Skala folgt.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Was die Skala oben für `#7c3aed` ergibt, berechnet in oklab. In sRGB gemischt werden die hellen Töne etwas grauer und die Schattierungen etwas flacher.

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](https://gradiently.design/de/guide/tints-tones-shades) 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.

```css
.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%);
}
```

Ein getöntes Badge und ein Hover-Zustand aus derselben Variable. Keine zweite Farbe zu pflegen.

## 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](https://caniuse.com/mdn-css_types_color_color-mix). 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.

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

Erst der Fallback, dann die Erweiterung. Den Rest erledigt die Kaskade.

Ein vollständiges Theme auf Basis dieser Muster, mit hellem und dunklem Modus, steht in [CSS-Variablen fürs Theming](https://gradiently.design/de/guide/css-custom-properties-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](https://gradiently.design/de/guide/muddy-gradients).

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.

## FAQ

### Was macht color-mix() in CSS?

Es mischt zwei Farben in einem Farbraum, den du nennst, und gibt das Ergebnis zurück, zum Beispiel `color-mix(in oklab, red 30%, white)`.

### Welchen Farbraum sollte ich mit color-mix() nutzen?

Nutze oklab für helle Töne, Schattierungen und das meiste Mischen, oklch, wenn der Farbton wandern soll, und srgb zum Mischen mit transparent.

### Wie mache ich eine Farbe mit color-mix() transparent?

Misch sie mit `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` ergibt die Markenfarbe mit 20 Prozent Deckkraft.

### Wird color-mix() in allen Browsern unterstützt?

Es funktioniert in aktuellen Versionen von Chrome, Edge, Firefox und Safari. Deklariere zuerst eine einfache Farbe als Fallback für ältere Browser.

### Was passiert, wenn die Prozente nicht 100 ergeben?

Summen über 100 werden herunterskaliert. Summen unter 100 werden hochskaliert, und das Ergebnis wird teilweise transparent.