Interpolation von Farbverläufen: sRGB, OKLab und warum es zählt

Die Interpolation von Farbverläufen bestimmt, wie die Farben zwischen deinen Stopps berechnet werden. Du wählst Blau an einem Ende und Gelb am anderen; die Software muss jede Farbe dazwischen erfinden, und das tut sie, indem sie in einem Farbraum eine Linie zwischen beiden Farben zieht. Welchen Raum sie nutzt, verändert, was du siehst. Mischst du in sRGB, geht Blau zu Gelb durch flaches Grau. Mischst du in OKLCH, geht es durch ein leuchtendes Türkis. Dieselben Stopps, ein ganz anderer Verlauf.

Was Interpolation bei Verläufen bedeutet

Jede Farbe lässt sich als Punkt in einem Raum beschreiben. In sRGB sind die drei Achsen Rot, Grün und Blau. In OKLab sind es die Helligkeit und zwei Gegenfarbachsen, Grün zu Rot und Blau zu Gelb. In OKLCH sind es Helligkeit, Buntheit (Chroma, wie farbig) und Farbton (der Winkel auf dem Farbkreis). Interpolieren heißt, von einem Punkt zum anderen zu gehen. Ein gerader Weg durch einen Raum kann in einem anderen eine Kurve sein oder ein Umweg durch Grau.

sRGB, OKLab und OKLCH im Vergleich

Warum sRGB-Verläufe grau oder matschig werden

sRGB wurde für Bildschirme entworfen, nicht für das Auge. Seine Werte sind gamma-kodiert, und seine Achsen passen nicht dazu, wie wir Farbton oder Helligkeit sehen. Liegen zwei Farben auf gegenüberliegenden Seiten des Farbkreises, kreuzt die gerade Linie zwischen ihnen nahe der neutralen Mitte, also verliert die Mitte ihre Farbe. Blau und Gelb ergeben im Mittel #808080. Das ist die Hauptursache matschiger Verläufe, und darum funktioniert der Designer-Instinkt, eine Brückenfarbe einzufügen: Der zusätzliche Stopp biegt den Weg um das Grau herum.

OKLab: gleichmäßige Schritte fürs Auge

OKLab, 2020 von Björn Ottosson veröffentlicht, wurde so gebaut, dass gleiche Abstände wie gleiche Unterschiede aussehen. Das praktische Ergebnis ist ein Verlauf, dessen Helligkeit sich von Ende zu Ende gleichmäßig ändert, ohne dunkle Delle oder hellen Buckel in der Mitte. Er nimmt immer noch einen geraden Weg, also verlieren zwei echte Gegensätze in der Mitte etwas Farbe, aber weit weniger als in sRGB. Modernes CSS nutzt OKLab standardmäßig, sobald eine Farbe im Verlauf in einer neueren Syntax wie oklch() geschrieben ist.

OKLCH: Farbe lebendig halten

OKLCH ist derselbe Raum wie OKLab, in Polarform beschrieben: Helligkeit, Buntheit und ein Farbtonwinkel. Darin zu interpolieren heißt, um den Farbkreis zu wandern, also behalten die Zwischenfarben ihre Sättigung. Das ist ideal für lebhafte, markenstarke Verläufe und Regenbogenverläufe. Du kannst auch wählen, in welche Richtung es um den Kreis geht, mit shorter hue (Standard), longer hue, increasing hue oder decreasing hue. Der OKLCH-Guide erklärt den Raum ausführlicher.

So legst du die Interpolation in CSS fest

Füg in <space> vor den Stopps ein, nach einem eventuellen Winkel oder einer Form. Browser, die das nicht verstehen, ignorieren die ganze Deklaration, also schreib zuerst eine sRGB-Version als Fallback. Jeder Raum und jedes Farbton-Schlüsselwort steht in der MDN-Referenz zur Farbinterpolation, und CSS-Verläufe in OKLCH hat weitere Rezepte.

.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}

Welchen Farbraum du wählen solltest

1. 1

   Standardmäßig OKLab

   Für die meisten Übergänge aus zwei oder drei Farben liefert es das weichste Ergebnis ohne Überraschungen.

2. 2

   OKLCH für entfernte oder lebhafte Farben

   Wenn die Farben weit auseinander auf dem Kreis liegen und die Mitte hell bleiben soll.

3. 3

   sRGB behalten, um alte Arbeit zu treffen

   Muss ein Verlauf genau wie ein bestehendes Asset oder Bild aussehen, misch im selben Raum, in dem es gemacht wurde.

4. 4

   Die Mitte prüfen

   Egal welcher Raum, sieh dir die Farbe auf halbem Weg an. Ist sie grau oder ein unerwarteter Farbton, wechsle den Raum oder füg einen Stopp hinzu.

Interpolation ist nur ein Teil eines guten Übergangs; wo die Stopps sitzen, zählt genauso viel, siehe Farbstopps in Verläufen. Wenn du dir die Mathematik lieber sparst: Die Marks von Gradiently sind fertige Verlaufshintergründe, die in jeder Größe rendern, in der du gestaltest, und die Entwicklerdokumentation zeigt, wie ChatGPT oder Claude Marks durchsuchen und Designs erstellen können, die sich im Studio öffnen.