OKLCH erklärt: das Farbformat, das endlich zu unseren Augen passt

Was OKLCH ist

OKLCH ist die Polarform von Oklab, einem wahrnehmungsbasierten Farbraum, den Björn Ottosson 2020 veröffentlicht hat. Er besteht aus drei Zahlen. L ist die wahrgenommene Helligkeit von 0 (Schwarz) bis 1 bzw. 100 % (Weiß). C ist das Chroma, also die Farbmenge, von 0 (Grau) bis etwa 0,37 für die kräftigsten Farben, die Bildschirme darstellen können. H ist der Farbtonwinkel von 0 bis 360 Grad.

So sieht dieselbe Farbe in verschiedenen Formaten aus. Alle Werte unten berechnet PickShade live, du kannst sie also direkt kopieren.

Warum OKLCH besser ist als HSL

Die Helligkeit in HSL ist eine Formel, keine Wahrnehmung. hsl(60 100% 50%) ist ein leuchtendes Gelb und hsl(240 100% 50%) ein dunkles Blau, trotzdem haben beide angeblich 50 % Helligkeit. Wer eine Palette auf HSL aufbaut, muss jeden Farbton von Hand nachkorrigieren.

In OKLCH wirken Farben mit gleichem L auch gleich hell. Du kannst L und C festhalten und H drehen, um ausgewogene Farbtöne zu bekommen, oder H und C festhalten und L abstufen, um eine saubere Farbskala zu erhalten. Genau deshalb definiert Tailwind CSS v4 seine gesamte Standardpalette in OKLCH.

Die Helligkeit sagt auch den Kontrast voraus. Text, dessen L sich um etwa 0,4 oder mehr vom Hintergrund unterscheidet, ist meist gut lesbar. So lassen sich barrierefreie Farbentscheidungen viel leichter begründen.

Syntax in CSS

Die Helligkeit wird als Prozentwert oder als Zahl von 0 bis 1 angegeben. Chroma ist eine Zahl, der Farbton ein Winkel in Grad. Die Transparenz steht nach einem Schrägstrich.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Browser-Unterstützung

oklch() funktioniert in allen aktuellen Browsern: Safari ab 15.4, Chrome und Edge ab 111, Firefox ab 113. Das deckt deutlich über 90 % der Nutzer ab. Für sehr alte Browser setzt du einen HEX-Fallback in die Zeile vor den OKLCH-Wert.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Chroma-Grenzen und Gamut

OKLCH kann Farben beschreiben, die kein Bildschirm darstellen kann. Das maximale Chroma hängt von Helligkeit und Farbton ab: Ein kräftiges Gelb gibt es nur bei hoher Helligkeit, ein kräftiges Blau nur bei niedriger. Liegt ein Wert außerhalb des sRGB- oder Display-P3-Gamuts, rechnet der Browser ihn zurück, und die Farbe kann sich dabei verschieben.

PickShade markiert Farben außerhalb von sRGB und zeigt dir die nächstgelegene Farbe, die hineinpasst. Dafür wird das Chroma gesenkt, während Helligkeit und Farbton gleich bleiben, genau wie es CSS Color 4 empfiehlt.

HEX in OKLCH umrechnen

Die Umrechnung läuft von HEX nach sRGB, von sRGB in lineares Licht, von linearem sRGB in den LMS-Zapfenraum, dann folgen eine Kubikwurzel, eine Matrix nach Oklab und schließlich die Umwandlung von Oklab in Polarkoordinaten. Von Hand passieren dabei leicht Fehler. Füge die Farbe also einfach in den Konverter ein und kopiere das Ergebnis.

Fragen und Antworten