# Interpolation von Farbverläufen: sRGB, OKLab und warum es zählt [Canonical HTML page](https://gradiently.design/de/guide/gradient-interpolation) Nimm Blau und Gelb, mische sie, und die Mitte wird grau. Das liegt nicht an deinen Farben, sondern an der Mathematik des Farbraums, in dem gemischt wird, und seit CSS Color 4 kannst du ihn ändern. ## The short version - Die Interpolation eines Verlaufs ist die Methode, mit der jede Farbe zwischen zwei Stopps berechnet wird, und der Farbraum, in dem das passiert, verändert das Ergebnis. - Mischen in sRGB verläuft geradlinig durch Rot-, Grün- und Blauwerte, also gehen gegensätzliche Farben wie Blau und Gelb durch Grau. - OKLab ist so gebaut, dass gleiche Schritte für das Auge wie gleiche Änderungen aussehen, was gleichmäßigere Helligkeit über einen Verlauf ergibt. - OKLCH mischt Helligkeit, Buntheit und Farbton getrennt, also bleiben Farben gesättigt und wandern um den Farbkreis statt durch seine graue Mitte. - In CSS wählst du den Farbraum im Verlauf selbst, zum Beispiel `linear-gradient(in oklch, #2563eb, #f97316)`. 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. - Start: Blau: #0000ff - Mitte in sRGB: #808080 - Mitte, lineares sRGB: #bcbcbc - Mitte in OKLab: #6cabc7 - Mitte in OKLCH: #00cfbd - Ende: Gelb: #ffff00 Die Farbe auf halbem Weg zwischen reinem Blau und reinem Gelb in vier Räumen. sRGB landet auf totem Grau; OKLCH auf einem lebhaften Türkis. ## sRGB, OKLab und OKLCH im Vergleich - Blau zu Orange, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)` - Blau zu Orange, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)` - Blau zu Orange, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)` - Rot zu Blau, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)` - Rot zu Blau, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)` - Rot zu Blau, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)` Zwei Farbpaare, je drei Räume. Die sRGB-Zeilen werden in der Mitte stumpf und dunkel; OKLab gleicht die Helligkeit aus; OKLCH erhält die Farbe. | Farbraum | Wie er mischt | Am besten für | Achtung bei | | --- | --- | --- | --- | | sRGB | Gerade Linie durch Rot-, Grün-, Blauwerte | Alte Designs exakt nachbilden | Grauen, dunklen Mitten zwischen entfernten Farbtönen | | Lineares sRGB | Genauso, ohne Gamma-Kodierung | Lichtmischung, Leuchten | Mitten wirken zu hell | | OKLab | Wahrnehmungsgleichmäßige Helligkeit und Farbe | Weiche, natürliche Übergänge; Standard für moderne CSS-Farben | Gegensätze verlieren noch etwas Farbe | | OKLCH | Helligkeit, Buntheit und Farbton getrennt | Lebhafte Übergänge, Regenbögen, weit entfernte Markenfarben | Kann durch unerwartete Farbtöne laufen | Die vier Räume, denen du am ehesten begegnest. CSS bietet auch andere, etwa `lab`, `lch`, `hsl` und `display-p3`. ## 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](https://gradiently.design/de/guide/muddy-gradients), 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](https://gradiently.design/de/guide/rainbow-gradient). 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](https://gradiently.design/de/guide/oklch-explained) erklärt den Raum ausführlicher. - Rot zu Blau, kürzerer Farbton: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)` - Rot zu Blau, längerer Farbton: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)` Dieselben zwei Farben. Der kürzere Weg führt durch Magenta; der längere wandert durch Orange, Gelb und Grün. ## So legst du die Interpolation in CSS fest Füg `in ` 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), und [CSS-Verläufe in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch) hat weitere Rezepte. ```css .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); } ``` Das Interpolations-Schlüsselwort funktioniert in linearen, radialen und konischen Verläufen. Ein konischer Verlauf von Rot zurück zu Rot mit `longer hue` zeichnet einen vollen, gleichmäßigen Regenbogen. ## Welchen Farbraum du wählen solltest 1. **Standardmäßig OKLab** Für die meisten Übergänge aus zwei oder drei Farben liefert es das weichste Ergebnis ohne Überraschungen. 2. **OKLCH für entfernte oder lebhafte Farben** Wenn die Farben weit auseinander auf dem Kreis liegen und die Mitte hell bleiben soll. 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. **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. ### Alte Gewohnheit - In sRGB mischen und Stopps einfügen, um Grau zu verstecken - Eine dunkle Delle in der Mitte hinnehmen - Nah beieinanderliegende Farben wählen, um sicher zu bleiben ### Besser - In OKLab oder OKLCH mischen und weniger Stopps behalten - Gleichmäßige Helligkeit von Ende zu Ende - Kräftigere Paare nutzen und den Raum sie sauber halten lassen Interpolation ist nur ein Teil eines guten Übergangs; wo die Stopps sitzen, zählt genauso viel, siehe [Farbstopps in Verläufen](https://gradiently.design/de/guide/gradient-stops). 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](https://gradiently.design/de/developers) zeigt, wie ChatGPT oder Claude Marks durchsuchen und Designs erstellen können, die sich im Studio öffnen. ## FAQ ### Was ist Interpolation bei Farbverläufen? Die Berechnung jeder Farbe zwischen zwei Verlaufsstopps. Der Farbraum, in dem das passiert, etwa sRGB oder OKLab, verändert, welche Farben in der Mitte erscheinen. ### Warum sehen meine Verläufe in der Mitte grau aus? Sie mischen in sRGB zwischen Farben auf gegenüberliegenden Seiten des Farbkreises, also kreuzt der Weg nahe Grau. Misch in OKLCH oder füg eine Brückenfarbe hinzu. ### Ist OKLab oder OKLCH besser für Verläufe? OKLab liefert die gleichmäßigsten, natürlichsten Übergänge. OKLCH hält Farben gesättigter und ist besser für lebhafte Paare und Regenbögen. ### Wie nutze ich OKLCH in einem CSS-Verlauf? Füg `in oklch` vor den Farben ein, zum Beispiel `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Schreib zuerst eine sRGB-Version als Fallback. ### Welchen Farbraum nutzen CSS-Verläufe standardmäßig? sRGB, wenn alle Farben eine ältere Syntax wie Hex oder `rgb()` nutzen, und OKLab, sobald eine Farbe eine neuere Syntax wie `oklch()` nutzt.