OKLCH

OKLCH, auch OKLch geschrieben, ist ein Farbmodell, das 2020 vom schwedischen Programmierer und Spieleentwickler Björn Ottoson entwickelt wurde. OKLCH basiert auf dem OKLab-Farbraum, der gemeinsam mit dem Farbmodell entworfen wurde und in etwa wie der L*a*b*-Farbraum aufgebaut ist. OKLab kann alle für Menschen sichtbaren Farben darstellen. Ottoson nannte den Farbraum und die Farbmodelle „OK“, da er sie „okay“ fand.

Ein wesentlicher Vorteil von OKLCH ist die perzeptible Unabhängigkeit der drei Farbachsen Luminanz („Helligkeit“), Chrominanz („Sättigung“) und Farbton (englisch hue). Wird eine der drei Achsen verändert, so bleiben die anderen beiden Werte nach menschlicher Wahrnehmung bei der neuen Farbe gleich. Wird beispielsweise, wie im obenstehenden Bild, der Farbton verändert, während Chrominanz und Luminanz gleich bleiben, so haben alle Farben dieses Farbspektrums die gleiche Chrominanz und Luminanz, sehen also gleich farbkräftig und hell aus.

Der Farbraum und seine Farbmodelle haben Einzug in den CSS-Standard und verschiedene Software (z. B. Adobe Photoshop und Inkscape) gefunden. Alle aktuellen Webbrowser unterstützen seit spätestens 2023 OKLCH und Google empfiehlt die Verwendung von OKLCH gegenüber anderen Farbdefinitionen im Web.

Zusätzlich zu den eher technisch und perzeptiv ausgerichteten Lab und Lch-Farbmodellen gibt es für OKLab auch die OKHSV und OKHSL-Farbmodelle. Diese sind darauf spezialisiert, die einfache und präzise Auswahl von Farben zu ermöglichen, besser als die auf sRGB basierenden HSV und HSL-Modelle.

Vor- und Nachteile

Die eingangs erwähnte perzeptible Unabhängigkeit aller drei Farbachsen findet sich so nur in wenigen Farbmodellen. Das verbreitete HSV hat diese Eigenschaft nicht. Die Unabhängigkeit ermöglicht es, Farben auch automatisch von anderen abzuleiten (z. B. dunklere und hellere Abstufungen, Komplementärfarben), und dabei vorhersehbare und optisch ansprechende Ergebnisse zu erzielen. Farbpalettengeneratoren nutzen OKLCH, um automatisch Helligkeitsabstufungen einer Farbe zu generieren, sowie verschiedenen Farben der Palette dieselbe Sättigung zu verleihen.

Allerdings hat hierdurch der OKLCH-Farbkörper eine andere geometrische Form als ältere, weniger perzeptible Farbmodelle, die dafür sorgt, dass bei solchen Änderungen leicht der gewünschte Zielfarbraum (oft sRGB) verlassen wird.

OKLCH unterstützt auch größere Farbräume wie Adobe RGB, sowie Display-P3 und Rec. 2020, die auf vielen Anzeigegeräten bereits nutzbar sind. Durch die Nutzung von OKLCH wird damit die Verwendung von Farben außerhalb von sRGB erleichtert, was mit üblichen Farbdefinitionen wie HSV und Hexcode nicht möglich ist.

Weitere Vorteile von OKLCH sind die menschenlesbaren Farbdefinitionen (Luminanz, Chrominanz und Farbton haben intuitiv verständliche Bedeutungen) und verbesserte Barrierefreiheit dank vorhersehbarer Helligkeit und Kontrast.

Herleitung

OKLab nutzt einen Weißpunkt nach der Normlichtart D65, wie auch sRGB und Adobe RGB. Die Koordinate L beschreibt die wahrgenommene Helligkeit (Luminanz) einer Farbe, die Koordinate a die Rot-Grün-Verteilung der Farbe und die Koordinate b die Blau-Gelb-Verteilung der Farbe. OKLCH ist die polare Variante dieses Koordinatensystems, wobei die Chrominanz die Distanz vom Weißpunkt und der Farbton den Winkel in der ab-Ebene beschreibt:

$${\displaystyle C={\sqrt {a^{2}+b^{2}}},\quad h=\arctan 2(b,a),\quad a=C\cos(h),\quad b=C\sin(h)}$$

Hierbei ist arctan2 die erweiterte umgekehrte Tangensfunktion, welche einen Winkel bis 360° liefert.

Die Umrechnung von XYZ-Koordinaten geschieht mittels der Konvertierung in ungefähre Zapfenstimuli ${\displaystyle lms}$, gefolgt von der Korrektur der Nichtlinearität der menschlichen Farbwahrnehmung (Dreierpotenz bzw. dritte Wurzel), gefolgt von der Umrechnung in die Lab-Koordinaten:

$${\displaystyle {\begin{pmatrix}l\\m\\s\end{pmatrix}}=\mathbf {M} _{1}\cdot {\begin{pmatrix}X\\Y\\Z\end{pmatrix}}\quad {\begin{pmatrix}l'\\m'\\s'\end{pmatrix}}={\begin{pmatrix}l^{\frac {1}{3}}\\m^{\frac {1}{3}}\\s^{\frac {1}{3}}\end{pmatrix}}\quad {\begin{pmatrix}L\\a\\b\end{pmatrix}}=\mathbf {M} _{2}{\begin{pmatrix}l'\\m'\\s'\end{pmatrix}}}$$Dabei beschreiben die Matrizen ${\displaystyle \mathbf {M} _{1},\mathbf {M} _{2}}$ die Transformation von der XYZ-Basis in die ${\displaystyle lms}$-Basis, beziehungsweise die Transformation von der ${\displaystyle l'm's'}$-Basis in die OKLab-Basis. Eine Zurückrechnung von OKLab nach XYZ ist durch Invertierung aller Operationen möglich (beide Matrizen sind invertierbar).

Die Werte ${\displaystyle \mathbf {M} _{1},\mathbf {M} _{2}}$ und die Nichtlinearitätspotenz ${\displaystyle {\frac {1}{3}}}$ wurden numerisch optimiert, indem die folgenden sieben Optimierungsziele zugrunde gelegt wurden:

• Muss ein Komplementärfarbraum sein, d. h. der Gegenfarbtheorie entsprechen: Der Winkel zwischen Komplementärfarben in der ab-Ebene beträgt 180°. (Diese Eigenschaft hat auch CIELAB.)
• Muss Luminanz, Chrominanz und Farbton gut vorhersagen, d. h. diese Achsen sollten als orthogonal bzw. unabhängig wahrgenommen werden.
• Farbverläufe durch lineare Interpolation der Koordinaten sollten gleichmäßig und korrekt aussehen. Beispielsweise darf ein Farbton zwischen zwei gleich hellen Farbtönen nicht dunkler als diese aussehen.
• Soll einen D65-Weißpunkt verwenden. Damit ist der Koordinatenursprung identisch zu XYZ, CIELAB und anderen, und die lineare Abbildung (ausgenommen der Nichtlinearitätskorrektur) ist möglich.
• Soll gutes numerisches Verhalten aufweisen. Dazu gehören einfache Berechenbarkeit mit Computern, numerische Stabilität und Differenzierbarkeit.
• Verlässt sich auf reguläre, gut ausgeleuchtete Betrachtungsszenarien, ohne beispielsweise absolute Luminanz (anders als z. B. Rec. 2020) zu betrachten.
• Wenn die Skalierung bzw. Beleuchtung einer Farbe geändert wird, werden Koordinaten nach demselben Faktor skaliert (Skalierungsinvarianz). Dies vermeidet die Abhängigkeit vom Betrachtungsszenario, wie auch zuvor beschrieben.

Von diesen Eigenschaften fehlen allen bestehenden Farbmodellen mindestens eines. CIELAB sagt Farbtöne schlecht vorher, CAM16-UCS ist numerisch instabil und nicht skalierungsinvariant, OSA-UCS ist ebenfalls numerisch ungeeignet, IPT sagt Chrominanz und Luminanz schlecht vorher, JzAzBz ist abhängig vom Beleuchtungsszenario, und HSV bzw. sRGB haben keine dieser Eigenschaften außer dem D65-Weißpunkt.

Das detaillierte Optimierungsverfahren beschreibt Ottoson in seinem Blogpost. Es ergeben sich die folgenden Matrizen:

$${\displaystyle \mathbf {M} _{1}={\begin{pmatrix}+0,8189330101&+0,3618667424&-0,1288597137\\+0,0329845436&+0,9293118715&+0,0361456387\\+0,0482003018&+0,2643662691&+0,633851707\end{pmatrix}}\quad \mathbf {M} _{2}={\begin{pmatrix}+0,2104542553&+0,7936177850&-0,0040720468\\+1,9779984951&-2,4285922050&+0,4505937099\\+0,0259040371&+0,7827717662&-0,8086757660\end{pmatrix}}}$$

OKHSV und OKHSL sind für Farbwähler im sRGB-Farbraum gedacht. Um diese Anwendungen zu vereinfachen, werden einige Eigenschaften von OKLCH eingebüßt, beispielsweise sind die drei Achsen Farbton, Sättigung und Wert/Helligkeit nicht oder nur teilweise orthogonal zueinander, und Farbübergänge sind nicht gleichmäßig. Der Umrechnung liegt ein komplexeres Modell zugrunde, um einfache geometrische Formen (Kreise und Quadrate für je zwei Achsen, sowie einen Schieberegler für die dritte Achse) zu erhalten.

Verbreitung

Mit dem CSS Color Module Level 4, welches erstmals 2023 als empfohlener Standard für Webbrowser veröffentlicht wurde, sind OKLCH und OKLab Teil des CSS-Standards und werden von allen großen Webbrowsern unterstützt. In CSS kann eine Farbe im OKLCH-Modell mit der Funktion oklch() eingefügt werden. Entsprechend dem Namen ist der erste Wert dabei die Luminanz, der zweite die Chrominanz, und der dritte der Farbton in Grad; nach einem Schrägstrich kann ein Alphawert angegeben werden. Beispiele für OKLCH-Farben in CSS (benötigt einen Browser von 2023 oder später zur Darstellung):

Weblinks

• OKLCH-Farbwähler und -Konverter zu RGB-Hexcode
• Farbpalettengenerator, der OKLCH für möglichst harmonische Farbkombinationen nutzt
• Vergleich von HSV/HSL-Farbwählern

Einzelnachweise

1. 1 2 3 OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog. 17. September 2025, abgerufen am 23. September 2026 (englisch). 
2. 1 2 Björn Ottoson: A perceptual color space for image processing. 23. Dezember 2020, abgerufen am 23. September 2026 (englisch). 
3. 1 2 CSS Color Module Level 4. Abgerufen am 23. September 2026 (englisch). 
4. ↑ oklch() CSS function - CSS | MDN. 27. August 2026, abgerufen am 23. September 2026 (amerikanisches Englisch). 
5. ↑ CSS-Farbleitfaden für High Definition | CSS and UI. Abgerufen am 23. September 2026. 
6. 1 2 Björn Ottoson: Two new color spaces for color picking - Okhsv and Okhsl. 8. September 2021, abgerufen am 23. September 2026 (englisch). 
7. ↑ Fritz Ebner: Derivation and modelling hue uniformity and development of the IPT color space. In: Theses. 1. Juli 1998 (rit.edu [abgerufen am 23. September 2026]). 
8. ↑ Muhammad Safdar, Guihua Cui, Youn Jin Kim, und Ming Ronnier Luo: Perceptually uniform color space for image signals including high dynamic range and wide gamut. In: Optics Express. Band 25, Nr. 13, 2017, S. 15131–15151, doi:10.1364/OE.25.015131 (optica.org). 

Die in diesem Artikel angezeigten Farben sind nicht farbverbindlich und können auf verschiedenen Anzeigegeräten unterschiedlich erscheinen.
Eine Möglichkeit, die Darstellung mit rein visuellen Mitteln näherungsweise zu kalibrieren, bietet das nebenstehende Testbild (nur bei nativer Anzeigeauflösung und wenn die Seite nicht gezoomt dargestellt wird):

Das Anzeigegerät in den sRGB-Modus setzen, sofern vorhanden. Tritt auf einer der drei grauen Flächen ein Buchstabe („R“ für Rot, „G“ für Grün oder „B“ für Blau) stark hervor, sollte die Gammakorrektur des entsprechenden Farbkanals korrigiert werden. Eine ausführlichere Beschreibung dazu bietet Hilfe:Farbdarstellung.