Farbinterpolation in CSS: Warum OKLCH gewinnt

Jedes Mal, wenn CSS zwei Farben mischt — in einem Verlauf, in color-mix() oder in einem Übergang — führt es Farbinterpolation durch: die Berechnung von Zwischenwerten zwischen einer Start- und einer Endfarbe. Für den Großteil der Web-Geschichte geschah diese Berechnung im sRGB-Farbraum, und die Ergebnisse waren häufig trüb, entsättigt oder perceptuell ungleichmäßig. Mit modernem CSS können Sie nun den Farbraum für die Interpolation wählen. Die Wahl ist von enormer Bedeutung, und OKLCH liefert konsistent die besten Ergebnisse.

Dieses Tutorial erklärt, warum RGB-Interpolation versagt, wo HSL zu kurz greift und warum OKLCH der richtige Standard für Verläufe und Farbmischung in 2024 und darüber hinaus ist.

Das RGB-Interpolationsproblem: Trübe Mittelpunkte

Wenn Sie einen CSS-Verlauf schreiben, ohne einen Farbraum anzugeben, interpoliert der Browser in sRGB — er berechnet Zwischenfarben durch lineares Mischen der R-, G- und B-Kanalwerte unabhängig voneinander.

Das klingt vernünftig, scheitert jedoch erheblich, wenn die beiden Endpunkte durch die Mitte des sRGB-Würfels führen. Betrachten Sie einen Verlauf von Rot nach Grün:

/* Standard: interpoliert in sRGB */
background: linear-gradient(to right, #FF0000, #00FF00);

Der Mittelpunkt dieses Verlaufs in sRGB ist #808000 — ein matter Olivton. Mathematisch ist RGB 128, 128, 0 genau auf halbem Weg zwischen Rot und Grün in Kanalwerten. Wahrnehmungsmäßig sieht es jedoch in keiner Weise wie ein lebhafter Mittelpunkt zwischen zwei kräftigen Primärfarben aus. Der Verlauf sackt durch ein trübes, dunkles Tal, bevor er auf der anderen Seite wieder heller wird.

Das grundlegende Problem ist, dass sRGB nicht perceptuell gleichmäßig ist. Gleiche numerische Schritte in R, G und B entsprechen nicht gleichen Schritten in wahrgenommener Farbe oder Helligkeit. Der sRGB-Würfel wurde für Display-Hardware entwickelt, nicht für das menschliche Sehen.

/* Sie können sRGB explizit erzwingen */
background: linear-gradient(in srgb, red, blue);

/* Oder die Legacy-Syntax verwenden (gleiches Ergebnis) */
background: linear-gradient(red, blue);

Beide erzeugen die gleichen entsättigten Mittelpunkte. Das Problem liegt im Farbraum selbst, nicht in der Syntax.

Das Gamma-Problem

Es gibt noch eine weitere Feinheit: sRGB-Werte sind gamma-codiert. Rohe sRGB-Werte von 0,5 entsprechen nicht 50 % des von einem Display emittierten physischen Lichts. Der tatsächliche perceptuelle Mittelpunkt eines Verlaufs muss in linearem Licht berechnet werden, nicht in gamma-codiertem sRGB. CSS Level 4 führte in srgb-linear ein, um dies zu beheben:

background: linear-gradient(in srgb-linear, red, blue);

Lineares sRGB ist besser als Gamma-sRGB für Helligkeitsübergänge, löst aber immer noch nicht die Farbton-Verschiebungs- und Sättigungsabfall-Probleme, da es immer noch ein rechteckiger RGB-Raum ist.

HSL-Farbtonverschiebungen

HSL wurde als lesbarere Alternative zu RGB eingeführt. Seine zylindrische Darstellung — Farbton auf einem 0–360-Grad-Winkel, Sättigung und Helligkeit als Prozentsätze — erleichtert das Verstehen von Farbbeziehungen. Die HSL-Interpolation hat jedoch einen eigenen charakteristischen Fehler: Farbtonverschiebungen.

Wenn Sie zwischen zwei HSL-Farben interpolieren, nimmt der Browser den kürzesten Bogen des Farbtonkreises. Wenn Sie von einem warmen Rot (hsl(10, 100%, 50%)) zu einem kühlen Blau (hsl(220, 100%, 50%)) gehen, führt der kürzeste Pfad durch Lila und Violett — was Sie vielleicht wollen oder auch nicht.

Das tiefere Problem ist, dass HSLs Helligkeit nicht perceptuell gleichmäßig ist. Ein Gelb bei hsl(60, 100%, 50%) wirkt dramatisch heller als ein Blau bei hsl(240, 100%, 50%), obwohl sie den gleichen L-Wert teilen. Wenn Sie in HSL von Gelb zu Blau interpolieren, schwankt die wahrgenommene Helligkeit auf eine Art und Weise, die sich inkohärent anfühlt.

/* HSL-Verlauf — perceptuelle Helligkeit ist über Farbtöne hinweg ungleichmäßig */
background: linear-gradient(in hsl, hsl(60 100% 50%), hsl(240 100% 50%));

Der Mittelpunkt dieses Verlaufs bei hsl(150, 100%, 50%) ist ein kräftiges Grün, das perceptuell heller wirkt als beide Endpunkte. Der Verlauf gipfelt in der Mitte, anstatt gleichmäßig überzugehen.

Die HSL-Interpolation hat auch ein Weitbogen-Problem: Der Farbtonwinkel endet bei 360°, und wenn Sie von hsl(350, ...) (fast Rot) zu hsl(20, ...) (Orange) interpolieren, könnte HSL den langen Weg um den Farbtonkreis nehmen — durch Blau, Grün und Gelb — anstatt den kurzen Weg durch Rot.

OKLCH: Konsistenz und perceptuelle Gleichmäßigkeit

OKLCH ist eine zylindrische Form des Oklab-Farbraums, der 2020 von Björn Ottosson speziell entwickelt wurde, um die Mängel früherer Farbräume hinsichtlich perceptueller Gleichmäßigkeit zu beheben. Seine drei Kanäle — L (Helligkeit), C (Chroma) und H (Farbtonwinkel) — sind so kalibriert, dass gleiche numerische Änderungen in L gleiche Änderungen in der wahrgenommenen Helligkeit erzeugen, unabhängig vom Farbton.

Wenn Sie zwischen zwei OKLCH-Farben interpolieren, erhalten Sie:

1. Konsistente wahrgenommene Helligkeit während des gesamten Übergangs — kein Eintauchen in dunkle Mittelpunkte oder sprunghafte helle Gipfel.
2. Erhaltenes Chroma — die Mittelpunkte bleiben lebhaft, weil Chroma unabhängig vom Farbton interpoliert wird.
3. Kürzere, intuitivere Farbtonpfade — die Farbtonwinkel von OKLCH sind in perceptueller Reihenfolge verteilt, sodass die Interpolation durch die erwarteten Zwischenfarbtöne verläuft.

/* OKLCH-Verlauf — lebhaft, perceptuell gleichmäßig */
background: linear-gradient(in oklch, red, blue);

Ein Verlauf von Rot zu Blau in OKLCH verläuft durch lebhaftes Magenta und Lila — die perceptuell intuitiven Mittelpunkte. Er bleibt gesättigt und gleichmäßig hell.

Vergleich nebeneinander

Um den Unterschied selbst zu sehen, verwenden Sie den Gradient Generator, der Ihnen eine Vorschau von Verläufen über verschiedene Farbräume ermöglicht.

So konvertieren Sie Ihre Farben nach OKLCH

Sie müssen nicht jeden Farbwert in Ihrem CSS neu schreiben. Das in oklch-Flag bei einem Verlauf weist den Browser an, die Endpunktfarben vor der Interpolation in OKLCH umzuwandeln und dann in den Ausgabe-Farbraum zurückzukonvertieren. Sie können Ihre HEX-Werte behalten:

/* Diese HEX-Endpunkte werden automatisch für die Interpolation nach OKLCH konvertiert */
background: linear-gradient(in oklch, #FF5733, #3498DB);

#FF5733 entspricht ungefähr oklch(0.63 0.24 27) und #3498DB ungefähr oklch(0.63 0.14 232). Verwenden Sie den Farbkonverter, um die OKLCH-Werte beliebiger HEX-Codes zu prüfen, bevor Sie einen Verlauf entwerfen, damit Sie im Voraus wissen, was die Interpolation durchlaufen wird.

Die color-mix()-Funktion

CSS color-mix() ist die deklarative API zum Mischen zweier Farben, die seit 2023 in allen modernen Browsern verfügbar ist. Die Syntax enthält den Interpolationsfarbraum als erstes Argument:

color: color-mix(in oklch, #FF5733 50%, #3498DB);

Dies mischt #FF5733 und #3498DB zu gleichen Teilen im OKLCH-Raum. Das Ergebnis ist ein lebhafter Zwischenwert, der wie ein echter perceptueller Mittelpunkt zwischen den beiden Farben aussieht — kein trüges sRGB-Durchschnitt.

Praktische color-mix()-Anwendungen

Transparente Varianten erstellen:

:root {
  --brand: #2563EB;
  --brand-10: color-mix(in oklch, var(--brand) 10%, transparent);
  --brand-20: color-mix(in oklch, var(--brand) 20%, transparent);
  --brand-50: color-mix(in oklch, var(--brand) 50%, transparent);
}

In Richtung Weiß oder Schwarz tönen:

:root {
  --brand: #2563EB;
  --brand-light: color-mix(in oklch, var(--brand) 70%, white);
  --brand-dark:  color-mix(in oklch, var(--brand) 70%, black);
}

Dies entspricht einem Schatten-Generator, aber vollständig in CSS ohne Präprozessierung. Das Ergebnis beim OKLCH-Tönen wirkt natürlicher als äquivalente Operationen in HSL, weil sich das Chroma beim Annähern an Weiß oder Schwarz angemessen verschiebt.

Hover-Zustand ableiten:

.button {
  background: var(--brand);
}
.button:hover {
  background: color-mix(in oklch, var(--brand) 80%, black);
}

Warnung: sRGB color-mix()

Wenn Sie das in <farbraum>-Argument weglassen, verwendet color-mix() standardmäßig sRGB-Interpolation:

/* Dies verwendet sRGB — kann trübe Ergebnisse liefern */
color: color-mix(#FF5733, #3498DB);

/* Korrekt: den Raum explizit angeben */
color: color-mix(in oklch, #FF5733, #3498DB);

Geben Sie immer explizit in oklch (oder einen anderen bevorzugten Raum) an. Das standardmäßige sRGB ist aus Gründen der Abwärtskompatibilität erhalten, ist aber selten die beste Wahl.

Farbinterpolationsfarbraum für Verläufe

Die moderne CSS-Syntax ermöglicht es Ihnen, den Interpolationsfarbraum direkt in einer Verlaufsdeklaration mit in <farbraum> nach dem Richtungs-Schlüsselwort anzugeben:

/* sRGB (Standard, oft trüb) */
background: linear-gradient(to right, red, blue);

/* Lineares sRGB (bessere Helligkeit, noch Farbtonprobleme) */
background: linear-gradient(in srgb-linear to right, red, blue);

/* HSL (Farbtonverschiebungen, ungleichmäßige Helligkeit) */
background: linear-gradient(in hsl to right, red, blue);

/* OKLCH (empfohlen: lebhaft, perceptuell gleichmäßig) */
background: linear-gradient(in oklch to right, red, blue);

/* Oklab (ebenfalls ausgezeichnet, weniger intuitive Syntax) */
background: linear-gradient(in oklab to right, red, blue);

Diese Syntax gilt für alle Verlaufstypen: linear-gradient, radial-gradient und conic-gradient.

Farbton-Interpolationsrichtung in OKLCH

Für die Farbtoninterpolation können Sie steuern, ob der Verlauf den kürzeren oder längeren Bogen um den Farbtonkreis nimmt:

/* Kürzerer Bogen (Standard) */
background: linear-gradient(in oklch, hsl(30 100% 50%), hsl(270 100% 50%));

/* Längerer Bogen — führt durch Gelb, Grün, Cyan, dann Lila */
background: linear-gradient(in oklch longer hue, hsl(30 100% 50%), hsl(270 100% 50%));

/* Zunehmender Bogen — geht immer in Richtung zunehmender Farbtonwinkel */
background: linear-gradient(in oklch increasing hue, hsl(30 100% 50%), hsl(270 100% 50%));

Das shorter hue-Schlüsselwort (Standard) liefert in den meisten Fällen das natürlichste Ergebnis. Die longer hue-Variante ist nützlich für Regenbogeneffekte oder wenn der Verlauf speziell einen großen Teil des Farbtonspektrums durchlaufen soll.

Mehrfach-Stop-Verläufe

OKLCH-Interpolation wird bei Mehrfach-Stop-Verläufen noch wertvoller, weil jedes Segment durch perceptuell lebhafte Mittelpunkte interpoliert:

/* Ein Regenbogenverlauf, der durchgehend lebhaft bleibt */
background: linear-gradient(
  in oklch to right,
  oklch(0.70 0.20 30),   /* Orange-Rot */
  oklch(0.80 0.20 90),   /* Gelb */
  oklch(0.75 0.20 150),  /* Grün */
  oklch(0.65 0.20 240),  /* Blau */
  oklch(0.60 0.20 300)   /* Lila */
);

Da die L- und C-Werte perceptuell kalibriert sind, führt das Setzen ähnlicher Werte über alle Stops hinweg zu einem Regenbogen, der natürlich hell und gesättigt wirkt — ohne die Helligkeitseinbrüche, die bei sRGB-Regenbögen üblich sind.

Browser-Unterstützung

Die in <farbraum>-Verlaufsyntax wird von allen wichtigen Browsern unterstützt:

• Chrome/Edge: Vollständige Unterstützung seit Version 111 (März 2023)
• Firefox: Vollständige Unterstützung seit Version 113 (Mai 2023)
• Safari: Vollständige Unterstützung seit Version 16.2 (Dezember 2022)

Für ältere Browser mit der Legacy-Syntax als Fallback:

/* Fallback: sRGB-Verlauf */
background: linear-gradient(to right, #FF5733, #3498DB);

/* Modern: OKLCH-Interpolation */
@supports (background: linear-gradient(in oklch, red, blue)) {
  background: linear-gradient(in oklch to right, #FF5733, #3498DB);
}

Wichtigste Erkenntnisse

• sRGB-Interpolation (der CSS-Standard) erzeugt trübe, entsättigte Mittelpunkte, wenn Verläufe nahe der Mitte des sRGB-Würfels verlaufen — besonders sichtbar bei Rot-nach-Grün- und Komplementärfarben-Verläufen.
• HSL-Interpolation vermeidet einige RGB-Probleme, führt aber zu inkonsistenter wahrgenommener Helligkeit — der Helligkeitskanal ist nicht perceptuell gleichmäßig — und kann unerwartete Farbtonpfade erzeugen.
• OKLCH-Interpolation erzeugt lebhafte, perceptuell konsistente Mittelpunkte, weil er rund um das menschliche Sehen konzipiert wurde. Verläufe in OKLCH bleiben gesättigt und gleichmäßig hell über ihren gesamten Bereich.
• Verwenden Sie in oklch in jedem Verlauf: linear-gradient(in oklch to right, red, blue). Verwenden Sie color-mix(in oklch, color1 50%, color2) für programmatisches Mischen.
• Der Farbkonverter ermöglicht die Konvertierung von HEX- oder RGB-Werten nach OKLCH, damit Sie verstehen, wie Ihre Farben interpolieren werden, bevor Sie sich für ein Verlauf-Design entscheiden.
• Der Gradient Generator zeigt eine Vorschau, wie verschiedene Farbräume die Verlaufsausgabe für beliebige Farbpaare beeinflussen.
• Die Farbton-Interpolationsrichtung kann mit den Schlüsselwörtern shorter hue, longer hue, increasing hue und decreasing hue gesteuert werden — nützlich für Regenbogeneffekte und präzise Mehrfach-Stop-Verlaufskontrolle.