Tailwind CSS OKLCH Farbraum in v4: wahrnehmungsgleiche Farben

1. Warum OKLCH? Das Problem mit HSL und hex

Wer Farbpaletten für Websites entwickelt, kennt das Problem: In HSL sind Farben mit identischen Helligkeitswerten visuell völlig unterschiedlich hell. Ein hsl(120, 100%, 50%) (Grün) wirkt deutlich heller als ein hsl(240, 100%, 50%) (Blau) – obwohl beide denselben L-Wert haben. Das liegt daran, dass HSL auf dem physikalischen RGB-Farbraum basiert und nicht darauf, wie das menschliche Auge Helligkeit wahrnimmt. Das Ergebnis: Paletten mit "gleichmäßigen" Stufen, die optisch ungleichmäßig wirken, und Kontrastverhältnisse, die in der Realität nicht dem erwarteten Wert entsprechen.

Hex-Werte wie #3b82f6 (Tailwind blue-500) lösen das Problem erst recht nicht – sie sind nur eine kompakte Schreibweise für RGB und teilen alle seine Wahrnehmungsprobleme. Der OKLCH-Farbraum (OK Lightness Chroma Hue) wurde speziell entwickelt, um diese Wahrnehmungsprobleme zu lösen. OKLCH ist ein wahrnehmungsgleicher Farbraum: Zwei Farben mit demselben L-Wert sehen für das menschliche Auge tatsächlich gleich hell aus. Das macht Farbpaletten vorhersehbarer und Kontrastverhältnisse zuverlässiger. Genau deshalb hat Tailwind CSS v4 seine gesamte Standardpalette auf OKLCH umgestellt.

Der Unterschied wird besonders bei Farbpaletten mit 11 Stufen (50 bis 950) deutlich. In der alten HSL-basierten Tailwind-Palette waren die Helligkeitsunterschiede zwischen den Stufen inkonsistent – besonders bei Blau und Violett, wo das Auge kleine Helligkeitsunterschiede kaum wahrnimmt. In der neuen OKLCH-Farbpalette von Tailwind v4 sind die Helligkeitsstufen so berechnet, dass jede Stufe einen gleich großen wahrgenommenen Helligkeitsunterschied zur nächsten hat. Das ist das zentrale Versprechen von OKLCH im praktischen Design.

2. OKLCH verstehen: Lightness, Chroma, Hue

Die OKLCH-Syntax hat drei Parameter: oklch(L C H). L steht für Lightness (Helligkeit) und hat einen Wertebereich von 0 (schwarz) bis 1 (weiß), alternativ als Prozentwert 0% bis 100%. C steht für Chroma (Sättigung) und geht von 0 (grau) bis zu einem Maximum, das von der Hue-Achse abhängt – typische Werte liegen zwischen 0.1 und 0.4. H steht für Hue (Farbton) als Grad-Winkel von 0° bis 360°, entspricht dem Farbkreis: 0° ist Rot, 120° ist Grün, 240° ist Blau. Optional kann Opacity als Slash-Wert hinzugefügt werden: oklch(60% 0.2 250 / 0.5).

Das wichtigste Konzept beim Arbeiten mit OKLCH ist das entkoppelte Lightness-Modell. In HSL verändert das Erhöhen des Saturation-Werts oft die wahrgenommene Helligkeit. In OKLCH sind Lightness und Chroma unabhängig: Man kann die Chroma erhöhen (satter machen) ohne die wahrgenommene Helligkeit zu verändern. Das macht es möglich, Farbpaletten durch simples Variieren der Lightness-Achse zu erstellen, ohne die Sattigkeit manuell nachkorrigieren zu müssen. Für ein praktisches Gefühl: oklch(50% 0.2 250) ist ein mittleres, gesättigtes Blau. oklch(80% 0.1 250) ist ein helles, entsättigtes Blau. oklch(30% 0.3 250) ist ein dunkles, gesättigtes Blau.

3. Die neue Farbpalette in Tailwind CSS v4

Tailwind CSS v4 liefert seine gesamte Standardpalette als OKLCH-Werte. Das bedeutet: Alle Klassen wie bg-blue-500, text-sky-700 oder border-emerald-400 verweisen jetzt auf intern berechnete OKLCH-Werte. Die visuellen Farben sehen für die meisten Nutzer ähnlich wie in v3 aus, aber die zugrundeliegenden Werte sind fundamental anders berechnet. Auf modernen Displays mit P3 Wide Gamut – aktuelle iPhones, iPads, MacBooks mit Retina-Display, viele Android-Flaggschiffe – sind die Farben in v4 satter und leuchtender als in v3, weil OKLCH Werte ausdrücken kann, die über den sRGB-Farbraum hinausgehen.

Die Konsequenz für Projekte, die von Tailwind v3 auf v4 migrieren: Die Farben sehen möglicherweise leicht anders aus, obwohl dieselben Klassen verwendet werden. Das ist kein Bug, sondern das beabsichtigte Ergebnis der OKLCH-Umstellung. Visuelle Regressionstests sollten explizit für Farbunterschiede ausgelegt sein – ein reines Pixel-diff wird viele "Unterschiede" zeigen, die eigentlich nur die verbesserte Farbdarstellung widerspiegeln. Wer die alten Farben exakt beibehalten will, kann die v3-Werte als CSS Custom Properties in @theme definieren und damit die v4-Standardwerte überschreiben.

/* Tailwind v4 internal OKLCH color definitions (simplified) */
/* These are generated automatically — shown here for understanding */
@theme {
  /* sky-500 in OKLCH — perceputally uniform brightness */
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(60.1% 0.172 237.323);
  --color-sky-700: oklch(53.5% 0.165 244.3);

  /* emerald-500 — same L value as sky-500, same perceived brightness */
  --color-emerald-500: oklch(69.6% 0.187 162.48);

  /* Custom brand palette using OKLCH */
  --color-brand-50:  oklch(97% 0.02 250);
  --color-brand-100: oklch(93% 0.04 250);
  --color-brand-200: oklch(87% 0.07 250);
  --color-brand-300: oklch(78% 0.12 250);
  --color-brand-400: oklch(68% 0.17 250);
  --color-brand-500: oklch(58% 0.21 250);
  --color-brand-600: oklch(49% 0.20 250);
  --color-brand-700: oklch(41% 0.18 250);
  --color-brand-800: oklch(32% 0.14 250);
  --color-brand-900: oklch(23% 0.09 250);
  --color-brand-950: oklch(15% 0.05 250);
}

/* Usage — exactly the same Tailwind classes, OKLCH values underneath */
/* .bg-brand-500 { background-color: oklch(58% 0.21 250); } */
/* .text-brand-700 { color: oklch(41% 0.18 250); } */

4. Eigene OKLCH-Farbpalette erstellen

Eine eigene OKLCH-Farbpalette für ein Tailwind v4-Projekt zu erstellen, ist einfacher als es klingt. Das Muster ist immer dasselbe: Man wählt einen Hue-Wert (den Farbton der Marke), einen Chroma-Bereich (wie satt die Farben sein sollen) und variiert die Lightness-Achse von hell (97%) nach dunkel (15%) in gleichmäßigen Schritten. Das Ergebnis ist eine Palette mit 11 Stufen, bei der jede Stufe denselben wahrgenommenen Helligkeitsunterschied zur nächsten hat.

Das Werkzeug oklch.com erlaubt es, OKLCH-Werte interaktiv anzupassen und sofort zu sehen, wie die Farbe auf dem Bildschirm aussieht. Für die Farbpaletten-Erstellung gibt es zudem das Tool uicolors.app, das aus einem einzelnen Hex-Wert eine vollständige OKLCH-Palette im Tailwind-Stil generiert. Diese Paletten können direkt als @theme-Block in die Tailwind-Konfiguration übernommen werden. Der entscheidende Vorteil: Da OKLCH wahrnehmungsgleich ist, sind die erzeugten Paletten von Haus aus konsistenter als manuell in HSL oder hex aufgebaute Paletten.

Bei der Chroma-Wahl gibt es eine wichtige Grenze: Wenn die Chroma so hoch gewählt wird, dass der resultierende Farbwert außerhalb des sRGB-Gamuts liegt, wird er auf Nicht-P3-Displays geclippt – also auf den nächstmöglichen sRGB-Wert gerundet. Das ist nicht zwingend ein Problem, aber es bedeutet, dass die Farbe auf älteren Displays weniger satt wirkt als auf P3-Displays. Für Webprojekte, die sRGB-Kompatibilität sicherstellen wollen, sollte die Chroma unter 0.20 für die 500er-Stufen gehalten werden.

5. P3 Wide Gamut: leuchtendere Farben auf modernen Displays

Der sRGB-Farbraum, auf dem hex und HSL basieren, deckt nur einen Teil der Farben ab, die moderne Displays zeigen können. Das Display P3-Profil – Standard für aktuelle Apple-Displays, viele High-End-Android-Displays und neuere Windows-Monitore – kann etwa 25% mehr Farben darstellen als sRGB. Diese zusätzlichen Farben liegen vor allem im intensiven Grün- und Rotbereich. Mit OKLCH können in CSS gezielt Farben definiert werden, die im P3-Gamut liegen und auf fähigen Displays deutlich leuchtender erscheinen.

Das Browser-Unterstützungs-Bild für P3 in CSS ist in 2026 gut: Chrome, Firefox und Safari unterstützen display-p3-Farben und die OKLCH-Syntax nativ. Für Browser ohne P3-Support greift das automatische Fallback-System: Lightning CSS in Tailwind v4 generiert automatisch sRGB-Fallback-Werte für alle OKLCH-Farben, die außerhalb des sRGB-Gamuts liegen. Entwickler müssen sich um die Browser-Kompatibilität also nicht kümmern – das Tool erledigt das transparent.

/* P3 Wide Gamut colors in OKLCH — more saturated on capable displays */
@theme {
  /* High chroma values exceed sRGB — Lightning CSS adds sRGB fallback */
  --color-vivid-green: oklch(68% 0.28 145);
  --color-vivid-blue: oklch(58% 0.27 265);
  --color-vivid-red: oklch(55% 0.28 28);
}

/* Lightning CSS automatically generates this for older browsers: */
/*
@supports not (color: oklch(0 0 0)) {
  :root {
    --color-vivid-green: #00c060;   /* closest sRGB equivalent */
    --color-vivid-blue: #006ff5;
    --color-vivid-red: #e5002b;
  }
}
*/

/* Manual P3 media query (optional — Lightning CSS handles this) */
@media (color-gamut: p3) {
  :root {
    /* P3-specific overrides for even more vibrant colors */
    --color-vivid-green: oklch(72% 0.32 145);
  }
}

/* Usage in gradient — OKLCH interpolation is perceptually uniform */
.hero-gradient {
  background: linear-gradient(
    in oklch,
    oklch(60% 0.2 240),
    oklch(60% 0.2 300)
  );
}

6. Lightning CSS als automatischer OKLCH-Transformer

Einer der größten praktischen Vorteile von Tailwind CSS v4 ist die Integration von Lightning CSS, das alle OKLCH-Farben automatisch für ältere Browser transformiert. Wer oklch(58% 0.21 250) in seinem CSS schreibt, bekommt von Lightning CSS automatisch einen sRGB-Fallback wie color: #3b82f6 als vorgestellte Deklaration generiert, die von Browsern ohne OKLCH-Support verwendet wird. Das bedeutet: Progressive Enhancement für Farben ist komplett automatisiert.

Lightning CSS nutzt dabei einen mathematisch präzisen Gamut-Mapping-Algorithmus, der den nächstmöglichen sRGB-Wert für eine gegebene OKLCH-Farbe berechnet. Das Ergebnis ist deutlich besser als ein simples Clipping: Statt den gesättigten Anteil der Farbe abzuschneiden, wird die Chroma progressiv reduziert, bis die Farbe im sRGB-Gamut liegt. Das erhält die wahrgenommene Helligkeit und den Farbton besser als ältere Methoden. In der Praxis sieht ein sRGB-Nutzer also eine sehr ähnliche, wenn auch etwas weniger gesättigte Farbe als ein P3-Nutzer.

7. OKLCH in @theme und Design-Token integrieren

Die Integration von OKLCH-Farben in Tailwind CSS v4 über @theme ist direkt und unkompliziert. Die Syntax ist dieselbe wie für andere Farb-Tokens – der einzige Unterschied ist, dass der Wert als OKLCH-Funktion statt als hex oder HSL angegeben wird. Tailwind verarbeitet die Werte transparent: Die generierten Utility-Klassen (bg-brand-500, text-brand-700 etc.) verweisen intern auf die OKLCH-Werte. Lightning CSS fügt die Browser-Fallbacks automatisch ein.

Für Projekte, die aus Figma oder anderen Design-Tools importieren, müssen die Design-Tool-Farben (meist als hex oder HSL) in OKLCH konvertiert werden. Das Tool oklch.com bietet eine Konversionsfunktion an. Alternativ kann der Konvertierungsschritt automatisiert werden: Ein kurzes Node.js-Skript mit der Bibliothek culori konvertiert alle hex-Werte in eine Token-JSON-Datei in OKLCH und schreibt das Ergebnis als @theme-Block in die CSS-Datei. Damit ist der Workflow vom Design-Tool bis zum Tailwind-OKLCH-Token vollständig automatisiert.

8. HSL vs. OKLCH im direkten Vergleich

Die folgende Tabelle zeigt die wichtigsten Unterschiede zwischen HSL und OKLCH für die praktische Arbeit mit Tailwind CSS.

9. Farbinterpolation und Gradients in OKLCH

Eine der technisch interessantesten Eigenschaften von OKLCH ist das Verhalten bei Farbinterpolation – also bei Gradients und Animationen. In sRGB und HSL entsteht bei Farbverläufen zwischen zwei gesättigten Farben (z.B. Blau zu Grün) oft ein grauer oder entsättigter Bereich in der Mitte des Verlaufs. Dieser "grauer Bauch" entsteht, weil die Interpolation durch den Mittelpunkt des Farbraums läuft, wo wenig Sättigung ist. In OKLCH läuft die Interpolation entlang der Chroma-Achse, nicht durch den Farbraum-Mittelpunkt – das Ergebnis sind Gradients, die über die gesamte Länge gesättigt bleiben.

In CSS wird OKLCH-Interpolation über die in oklch-Syntax in der linear-gradient()-Funktion aktiviert: linear-gradient(in oklch, oklch(60% 0.2 240), oklch(60% 0.2 120)). Das Ergebnis ist ein Blau-zu-Grün-Verlauf, der über die gesamte Länge gesättigt bleibt – ohne den typischen Grau-Stich in der Mitte. Für Animationen mit CSS Transitions und Tailwind CSS gilt dasselbe: Wenn eine Farbe von OKLCH zu OKLCH animiert wird, interpoliert der Browser in OKLCH und das Ergebnis ist eine wahrnehmungsgleiche Überblendung. Das ist besonders bei Dark-Mode-Transitions und Theme-Switching-Animationen sichtbar.

/* OKLCH gradient interpolation — no desaturated midpoint */
.gradient-oklch {
  /* in oklch keeps saturation uniform across the entire gradient */
  background: linear-gradient(
    135deg in oklch,
    oklch(55% 0.22 265),   /* vibrant blue */
    oklch(55% 0.22 145)    /* vibrant green */
  );
}

/* Compare: sRGB gradient has grey midpoint */
.gradient-srgb {
  /* without "in oklch", interpolation goes through grey */
  background: linear-gradient(
    135deg,
    oklch(55% 0.22 265),
    oklch(55% 0.22 145)
  );
}

/* OKLCH in Tailwind @theme for full color scale */
@import "tailwindcss";

@theme {
  /* Brand color at hue 265 (blue-violet) — 11 OKLCH steps */
  --color-violet-50:  oklch(97%  0.01 265);
  --color-violet-100: oklch(93%  0.03 265);
  --color-violet-200: oklch(87%  0.06 265);
  --color-violet-300: oklch(79%  0.11 265);
  --color-violet-400: oklch(70%  0.16 265);
  --color-violet-500: oklch(60%  0.21 265);
  --color-violet-600: oklch(51%  0.20 265);
  --color-violet-700: oklch(43%  0.18 265);
  --color-violet-800: oklch(34%  0.14 265);
  --color-violet-900: oklch(25%  0.09 265);
  --color-violet-950: oklch(17%  0.05 265);
}

10. Zusammenfassung

Der OKLCH-Farbraum ist der bedeutendste Fortschritt in der CSS-Farbwissenschaft seit der Einführung von HSL. Tailwind CSS v4 macht ihn durch die Umstellung der Standardpalette und die Integration von Lightning CSS zur Standardrealität für jeden Frontend-Entwickler, der Tailwind einsetzt. Die praktischen Vorteile sind konkret: wahrnehmungsgleiche Paletten, die auf allen Stufen konsistent wirken; leuchtendere Farben auf P3-fähigen Displays; saubere Gradient-Interpolation ohne graue Mitte; und automatische Browser-Kompatibilität durch Lightning CSS-Fallbacks.

Für eigene Design-Token in @theme ist das OKLCH-Muster dasselbe wie für hex oder HSL – nur mit besserer Vorhersehbarkeit und P3-Support. Wer Farbpaletten in OKLCH aufbaut, erhält von Haus aus konsistentere Ergebnisse als mit manuell in HSL aufgebauten Paletten. Das Werkzeug-Ökosystem – oklch.com, uicolors.app, die culori-Bibliothek – ist ausgereift und macht den Einstieg einfach. OKLCH ist keine theoretische Verbesserung, sondern ein praktischer Mehrwert für jedes Tailwind-Projekt.