Was ist OKLCH? Eine Erklärung für Designer

OKLCH ist eine Art, Farbe mit drei Werten zu beschreiben, die der tatsächlichen menschlichen Wahrnehmung entsprechen: Helligkeit (wie hell sie wirkt), Chroma (wie farbig sie ist) und Farbton (welche Farbe es ist, als Winkel). Seine entscheidende Eigenschaft ist die perzeptive Gleichförmigkeit: Zwei Farben mit demselben L-Wert sehen wirklich gleich hell aus — etwas, das ältere Modelle wie HSL falsch machen. Diese Eigenschaft ist der Grund, warum CSS native Unterstützung dafür hinzugefügt hat und warum Tools wie Tailwind v4 ihre Paletten darauf umgestellt haben.

Dieser Artikel ist die leicht verständliche Version; die vollständige Serie zum Farbmodell findest du in unserem OKLCH-Leitfaden.

Was bedeuten die drei Buchstaben?

• L — Helligkeit (0–100 %). Wie hell die Farbe wirkt — kalibriert an der menschlichen Wahrnehmung statt an Rechnungen mit RGB-Zahlen.
• C — Chroma (0 bis ~0,37). Wie farbig sie ist, von Grau (0) aufwärts. Anders als HSLs Sättigungsprozentwert ist Chroma eine absolute Größe — 0,15 Chroma bedeutet dieselbe Menge an Farbigkeit, unabhängig vom Farbton. Dieser Unterschied hat praktische Folgen für die Arbeit an Paletten.
• H — Farbton (0–360°). Der Winkel auf dem Farbkreis: ~30 ist Rot-Orange, ~145 Grün, ~260 Blau.

Das „OK” ist keine Beruhigung — es benennt den OKLab-Farbraum, den Björn Ottosson in A perceptual color space for image processing (2020) vorgestellt hat und der bekannte Verzerrungen älterer Wahrnehmungsmodelle behob, besonders bei Blautönen.

Warum lügt HSL über die Helligkeit?

Probier das in einem beliebigen Color Picker aus: hsl(60, 100%, 50%) ist ein grelles, fast weißes Gelb. hsl(240, 100%, 50%) ist ein tiefes, dunkles Blau. Dieselben „50 % Helligkeit” — völlig unterschiedliche tatsächliche Helligkeit. HSLs Helligkeit ist ein geometrischer Bruchteil der RGB-Werte, keine Aussage über die Wahrnehmung, und Gelb trägt bei gleicher RGB-Intensität schlicht viel mehr wahrgenommenes Licht als Blau.

Das ist kein kosmetischer Fehler. Er zerstört die beiden Aufgaben, für die Designer ein Farbmodell am dringendsten brauchen:

1. Rampen. Erzeuge eine 10-stufige Palette, indem du die HSL-Helligkeit von 95 % auf 20 % herunterführst, und die Stufen drängen sich zusammen, verschieben sich im wahrgenommenen Farbton und werden in der Mitte matschig — so gebaute Paletten brauchten meist eine Runde Handkorrektur.
2. Kontrast. Textkontrast ist eine Funktion des wahrgenommenen Helligkeits­unterschieds. Wenn das L deines Modells der Wahrnehmung nicht folgt, kannst du nicht vorhersagen, welche Stufen deiner Palette die Barrierefreiheit bestehen — du kannst nur testen und nachbessern.

In OKLCH ist L die wahrgenommene Helligkeit — und genau das macht beide Aufgaben vorhersagbar.

Was bringt dir perzeptive Gleichförmigkeit konkret?

Sobald Helligkeit das bedeutet, was sie sagt, wird berechenbar, was früher Handarbeit erforderte:

• Gleichmäßige Farbrampen. Setze deine Stufen auf eine Helligkeitskurve, und sie wirken gleichmäßig verteilt — für jeden Farbton, ohne Korrekturdurchlauf pro Farbton.
• Vorhersagbarer Kontrast. Halte Text und Hintergrund in einem bekannten L-Abstand, und Kontrastanforderungen werden zu einer Eigenschaft der Skala statt zu einem Test pro Paar.
• Ehrliche Neutraltöne. Grautöne können einen bewussten Hauch Chroma in Richtung Marken-Farbton tragen statt einer zufälligen RGB-Färbung.
• Dark Mode durch Ableitung. Eine dunkle Palette lässt sich aus der hellen berechnen — neue Helligkeitskurve, angehobenes Chroma — statt sie von Hand neu zu wählen.

Sieh dir den ersten Punkt live an: öffne eine 10-stufige OKLCH-Rampe im Scale Composer — eine blaue Ausgangsfarbe, Stufen auf einer Helligkeitskurve. Jeder sichtbare Sprung zwischen Nachbarn ist gleich groß — genau das, womit HSL-basierte Erzeugung sich schwertut.

Wie schreibt man OKLCH in CSS?

Es ist seit 2023 natives CSS — unterstützt in allen großen Browsern, ohne Plugin oder Build-Schritt:

.button {
  background: oklch(0.55 0.15 260);        /* L C H */
  color: oklch(0.98 0.01 260);
  border-color: oklch(0.55 0.15 260 / 40%); /* optionaler Alphawert */
}

Es gibt außerdem eine relative Farbschreibweise — oklch(from …) —, die eine Farbe aus einer anderen ableitet, praktisch für Hover-Zustände und Tönungen.

Wo ist der Haken? Chroma und Farbraum (Gamut)

Weil Chroma absolut ist, entspricht nicht jede L/C/H-Kombination einer Farbe, die dein Bildschirm erzeugen kann. Sehr helle und sehr dunkle Farben können nur wenig Chroma tragen; überschreitest du die Grenze, wird die Farbe abgeschnitten („Gamut-Clipping”), was Rampen genau dort verflacht, wo sie leuchten sollten. Die übliche Lösung ist, Chroma auf jeder Helligkeitsstufe knapp unter der physikalischen Obergrenze zu halten — Spielraum statt Clipping.

Displays mit größerem Farbraum heben diese Obergrenze an: Display-P3-Bildschirme (die meisten aktuellen Smartphones und Macs) können in den Mitteltönen deutlich mehr Chroma zeigen, als sRGB erlaubt.

Schreibe ich jemals OKLCH-Werte von Hand?

Selten — und das ist der Punkt. Die eigentliche Rolle von OKLCH ist die des Motors unter deiner Palette: Du wählst eine Ausgangsfarbe, und Helligkeitskurven plus Chroma-Profile erzeugen die Skala. Rohen oklch()-Werten begegnest du meist in generierten design tokens, in der Standardpalette von Tailwind v4 und beim Debuggen, warum eine Farbe daneben aussieht.

Ein schneller Weg, ein Gefühl für das Modell zu bekommen: schalte dieselbe blaue Rampe zwischen sRGB und P3 um und beobachte, wie die mittleren Stufen Chroma gewinnen, sobald die Farbraum-Obergrenze steigt — L und H bleiben stehen, während sich nur „wie farbig” bewegt. Wenn du die drei Achsen einmal unabhängig hast wandern sehen, sieht hex nach dem aus, was es ist: ein Ausgabeformat, keine Denkweise über Farbe.