# CSS-Farbverlauf in OKLCH: weichere Übergänge

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

Die meisten stumpfen Verläufe mit grauer Mitte sind kein Farbproblem, sondern ein Rechenproblem. Zwei Wörter, in oklch, ändern, wo der Browser rechnet.

## The short version

- CSS-Farbverläufe mischen standardmäßig in sRGB, wenn alle ihre Farben als Hex, rgb() oder hsl() geschrieben sind, was die Mitte einer Mischung oft stumpf oder grau macht.
- Fügst du einem Farbverlauf in oklch oder in oklab hinzu, mischt der Browser in einem wahrnehmungsbasierten Farbraum, der die Helligkeit gleichmäßig und die Farben sauber hält.
- in oklab nimmt den geradesten Weg zwischen zwei Farben, während in oklch um den Farbtonkreis läuft und die Sättigung hoch hält.
- Farbton-Schlüsselwörter wie shorter hue, longer hue, increasing hue und decreasing hue bestimmen, in welche Richtung ein oklch-Verlauf um den Farbkreis läuft.
- Browser ignorieren Deklarationen, die sie nicht verstehen, daher ist es ein sicherer Fallback, zuerst einen sRGB-Verlauf und danach die oklch-Version zu schreiben.

**CSS-Gradient-OKLCH**-Interpolation heißt, den Browser zu bitten, die Zwischenfarben eines Farbverlaufs im OKLCH-Farbraum statt in sRGB zu berechnen. Du fügst zwei Wörter hinter der Richtung hinzu: `linear-gradient(90deg in oklch, #2563eb, #facc15)`. Das Ergebnis ist eine Mischung, deren Helligkeit sich gleichmäßig ändert und deren Mitte lebhaft bleibt, statt in das graue, trübe Band abzusacken, für das reine sRGB-Mischungen bekannt sind.

- sRGB (Standard bei Hex): `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Blau zu Gelb auf drei Arten. sRGB läuft durch Grau; oklab bleibt sauber und neutral; oklch behält volle Farbe, indem es durch Türkis und Grün läuft.

## Warum sRGB-Farbverläufe grau werden

sRGB wurde entworfen, um Bildschirmfarben effizient zu kodieren, nicht um abzubilden, wie Menschen sehen. Zwei sRGB-Farben zu mischen heißt, ihre Rot-, Grün- und Blauzahlen zu mitteln, und die Mitte zwischen einem Blau und einem Gelb ist eine Menge mittlerer Zahlen, die grau aussieht. Auch ihre Helligkeit ändert sich ungleichmäßig, sodass manche Mischungen in der Mitte heller oder dunkler ausbeulen. Die Designseite dieses Problems steht in [trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).

Oklab und seine zylindrische Form OKLCH wurden so entworfen, dass gleiche Schritte in ihren Zahlen für das Auge etwa gleichen Schritten entsprechen. Das Mischen darin lässt die wahrgenommene Helligkeit gleichmäßig wandern, weshalb so gemachte Verläufe bei denselben Endpunkten weicher und leuchtender aussehen.

## Die Syntax: in oklch und in oklab

Die Interpolationsmethode steht im ersten Argument, vor oder nach der Richtung. Sie funktioniert in `linear-gradient()`, `radial-gradient()`, `conic-gradient()` und ihren sich wiederholenden Formen und auch in `color-mix()`. Deine Farbstopps können in Hex bleiben; nur die Mathematik ändert sich.

```css
/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);
```

Nur die Mischung ändert sich; die Farbstopps bleiben wie geschrieben.

| Farbraum | So wird gemischt | Nutze ihn für |
| --- | --- | --- |
| `srgb` | Mittelt Rot, Grün und Blau | Alte Designs exakt nachbilden |
| `srgb-linear` | Mittelt physikalisches Licht | Effekte durch Lichtmischung; Mitten wirken hell |
| `oklab` | Gerade Linie durch einen wahrnehmungsbasierten Raum | Die meisten Mischungen und jedes Ausblenden zu Weiß, Schwarz oder Grau |
| `oklch` | Um den Farbtonkreis bei gleichbleibender Buntheit | Lebhafte Mischungen über mehrere Farbtöne, Regenbogen, Sonnenuntergänge |
| `hsl` | Um den Farbtonkreis, nicht wahrnehmungsbasiert | Farbkreise; die Helligkeit ist ungleichmäßig |

Die Räume, die du am ehesten nutzt. Die [MDN-Seite zu color-interpolation-method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) listet alle auf.

## oklab oder oklch: was du wählst

Beide sind wahrnehmungsbasiert; sie unterscheiden sich im Weg, den sie nehmen. **Oklab** zieht eine gerade Linie zwischen den zwei Farben, sodass die Mitte etwas Sättigung verlieren kann, wenn die Enden auf dem Farbkreis weit auseinanderliegen, aber es wandert nie durch einen Farbton, den du nicht verlangt hast. **OKLCH** behält die Buntheit (Chroma), die Intensität der Farbe, und läuft um den Farbtonkreis, sodass die Mitte gesättigt bleibt, aber durch die Farbtöne dazwischen führt. Blau zu Gelb in oklch geht durch Grün. Manchmal ist das der Sinn; manchmal eine Überraschung.

- Pink zu Petrol, in oklab: `linear-gradient(90deg in oklab, #db2777, #0891b2)`
- Pink zu Petrol, in oklch: `linear-gradient(90deg in oklch, #db2777, #0891b2)`
- Indigo zu Weiß, in oklab: `linear-gradient(90deg in oklab, #1e1b4b, #ffffff)`
- Violett zu Orange, in oklch: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Oklab bleibt auf dem direkten Weg; oklch streicht durch die Farbtöne zwischen seinen Enden: Pink zu Petrol führt durch Violett und Blau, Violett zu Orange durch Magenta und Rot.

> **Ausblenden zu Weiß, Schwarz oder Grau** Neutrale Farben haben keinen echten Farbton, daher kann eine oklch-Mischung zu Weiß oder Schwarz einen merkwürdigen Weg nehmen. Für Übergänge zu einem Neutralton nutze `in oklab` oder schreibe das neutrale Ende als fast neutrale Farbe mit demselben Farbton wie das andere Ende, etwa `oklch(97% 0.02 290)`.

## Die Farbtonrichtung wählen

Zwischen zwei Farbtönen gibt es zwei Wege um den Farbkreis. Standardmäßig nimmt oklch den `shorter hue`. Du kannst `longer hue` verlangen oder mit `increasing hue` oder `decreasing hue` eine Richtung erzwingen. Das Schlüsselwort steht direkt hinter dem Farbraum.

- Rot zu Blau, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Rot zu Blau, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

Der kurze Weg von Rot zu Blau führt durch Magenta und Violett. Der lange führt durch Orange, Gelb, Grün und Cyan.

`longer hue` ist der übersichtlichste Weg, ein Spektrum zu zeichnen: zwei Stopps statt sieben. So machst du auch einen vollen [Regenbogenverlauf](https://gradiently.design/de/guide/rainbow-gradient), dessen Farben alle gleich hell wirken, was einem sRGB-Regenbogen nie ganz gelingt.

## Farben in oklch() schreiben

Du kannst auch die Stopps selbst in OKLCH schreiben: `oklch(L C H)`, wobei L die Helligkeit von 0 % bis 100 % ist, C die Buntheit von 0 bis etwa 0,37 und H der Farbtonwinkel. Bleibt L über die Stopps gleich, ergibt das einen Verlauf gleicher Helligkeit, was sich in Hex nach Augenmaß schwer machen lässt. [oklch.com](https://oklch.com) ist eine gute Farbauswahl, um Werte zu finden.

```css
.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}
```

Violett über Koralle zu Bernstein bei einer Helligkeit: Kein Stopp sticht als heller hervor als die anderen.

Gleiche Helligkeit: Violett, Koralle, Bernstein: `linear-gradient(90deg in oklch, oklch(68% 0.17 300), oklch(68% 0.17 20), oklch(68% 0.17 70))`

Der Code von oben, gerendert. Farben außerhalb des Bildschirmumfangs werden auf die nächste darstellbare Farbe abgebildet.

## Browserunterstützung und Fallbacks

Interpolationsmethoden und `oklch()`-Farben werden in aktuellen Versionen von Chrome, Edge, Safari und Firefox unterstützt. Browser überspringen jede Deklaration, die sie nicht verstehen, der Fallback besteht also einfach darin, zuerst die schlichte Version zu schreiben. Wo die erweiterte Zeile ignoriert wird, bleibt der sRGB-Verlauf.

```css
.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}
```

Erst einfarbig, dann sRGB, dann oklch. Jeder Browser behält die letzte Zeile, die er versteht.

Willst du weitergehen: Wahrnehmungsbasierte Mischungen passen gut zu Körnung, um [Banding im Farbverlauf](https://gradiently.design/de/guide/gradient-banding) zu verhindern, und zu den Techniken für Stopps und Hints im Leitfaden zu [CSS linear-gradient](https://gradiently.design/de/guide/css-linear-gradient).

## FAQ

### Was bewirkt in oklch in einem CSS-Farbverlauf?

Es lässt den Browser die Zwischenfarben im OKLCH-Farbraum berechnen, was die Helligkeit gleichmäßig und die Farben gesättigt hält, statt durch Grau zu mischen.

### Sollte ich für Farbverläufe oklab oder oklch nutzen?

Nimm oklch für lebhafte Mischungen zwischen verschiedenen Farbtönen und oklab für Übergänge zu Weiß, Schwarz oder Grau oder wenn die Mischung nicht durch zusätzliche Farbtöne führen soll.

### Warum läuft mein oklch-Verlauf durch Grün?

OKLCH läuft um den Farbtonkreis, und zwischen Blau und Gelb führt der kürzere Weg durch Grün. Nutze `in oklab` für einen direkten Weg oder füge einen mittleren Stopp hinzu.

### Muss ich Farben in oklch() schreiben, um die oklch-Interpolation zu nutzen?

Nein. Hex-Farben funktionieren mit `in oklch` problemlos; nur die Mischung ändert sich. Stopps in `oklch()` zu schreiben lohnt sich, wenn du die Helligkeit genau steuern willst.

### Was passiert in Browsern, die in oklch nicht unterstützen?

Sie ignorieren die ganze Deklaration. Setze einen normalen sRGB-Verlauf in die Zeile davor, und diese Browser behalten ihn.