CSS-Farbverlauf in OKLCH: weichere Übergänge

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.

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.

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.

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

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.

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.

longer hue ist der übersichtlichste Weg, ein Spektrum zu zeichnen: zwei Stopps statt sieben. So machst du auch einen vollen Regenbogenverlauf, 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 ist eine gute Farbauswahl, um Werte zu finden.

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

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.

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

Willst du weitergehen: Wahrnehmungsbasierte Mischungen passen gut zu Körnung, um Banding im Farbverlauf zu verhindern, und zu den Techniken für Stopps und Hints im Leitfaden zu CSS linear-gradient.