OKLCH vs LAB und LCH

OKLCH und LCH sind dieselbe Art von Farbraum, zwei Generationen auseinander: LCH ist die polare Form von CIELAB (1976), OKLCH ist die polare Form von OKLab (2020), und OKLab existiert, um die am besten dokumentierten Schwächen von CIELAB zu beheben — allen voran die Blau-Farbtonverschiebung, bei der ein gesättigtes Blau, das entlang eines konstanten CIELAB-Farbtons abgedunkelt wird, sichtbar ins Lila driftet. Für Bildschirm-Paletten und -Rampen sind die OK-Varianten die sicherere Voreinstellung; LAB und LCH bleiben die richtigen Werkzeuge dort, wo Druck-Workflows und Farbdifferenz-Toleranzen bereits auf ihnen aufbauen.

Beide Familien sind nativ in CSS enthalten, also ist das eine aktuelle Entscheidung in jedem Stylesheet und keine Geschichtsstunde. Dieser Artikel entwirrt die vier Namen, zeigt die Blau-Schwäche mit echten Werten und zieht die Grenze zwischen den Territorien der beiden Familien — er ist das Vergleichsstück unseres OKLCH-Leitfadens.

Wie hängen LAB, LCH, OKLab und OKLCH zusammen?

Vier Namen, zwei Farbräume:

Die rechtwinkligen Formen beschreiben eine Farbe als Helligkeit plus zwei Gegenfarbachsen: a verläuft von Grün nach Rot, b verläuft von Blau nach Gelb. Die polaren Formen lesen denselben Punkt als Helligkeit, Chroma (Abstand vom Grau) und Farbton (ein Winkel) aus. LAB in LCH umzurechnen oder OKLab in OKLCH ändert nichts an der Farbe — es ist eine Position, ausgedrückt in zwei Koordinaten-Stilen.

Der eigentliche Vergleich ist also CIELAB gegen OKLab. Rechtwinklig gegen polar ist eine Frage der Ergonomie: Designer denken in „gleicher Farbton, ein bisschen weniger farbig”, weshalb die polaren Formen diejenigen sind, die Design-Tools anbieten, und weshalb dieser Artikel ab hier LCH und OKLCH sagt.

Was hat CIELAB bei Blau falsch gemacht?

CIELAB diente über vier Jahrzehnte lang als der Standard-perzeptive Farbraum, und vieles davon hält gut stand. Seine am besten dokumentierte Schwäche liegt rund um Blau: Die Linien konstanten Farbtons des Modells sind dort verbogen. Halte die CIELAB-Farbtonzahl fest, während du die Helligkeit änderst, und die Farben, die du durchläufst, bleiben nicht auf einem wahrgenommenen Farbton.

Hier ist die Operation, bei der sie sich zeigt. Geh vom Blau #2563eb aus, das bei oklch(0.546 0.215 262.9) liegt, und dunkle es zu einer Rampe ab, während du den OKLCH-Farbton bei ≈263 hältst: Die Helligkeit sinkt von 0,546 über 0,45 und 0,35 hin zu 0,25, das Chroma folgt dem Farbraum, und jeder Schritt liest sich als dasselbe Blau, nur dunkler — das tiefe Ende landet nahe Marineblau (≈ oklch(0.27 0.19 264)), also genau das, was das Auge von einer dunklen Version dieses Blaus erwartet. Führe dieselbe Abdunklung in LCH aus und halte dessen Farbtonwinkel konstant, und das klassische Ergebnis erscheint: Die untere Hälfte der Rampe bekommt einen sichtbaren Lila-Stich. Was CIELAB in diesem Bereich „denselben Farbton” nennt, ist nicht das, was das Auge denselben Farbton nennt.

OKLab, 2020 von Björn Ottosson veröffentlicht, wurde an neuere Daten zum Farbeindruck angepasst, gezielt um Verzerrungen wie diese zu beheben. Es sagt außerdem die Helligkeit stark gesättigter Farben zuverlässiger voraus — nützlich, wenn kräftige Akzente und gedämpfte Töne im Gewicht aufeinander abgestimmt wirken sollen.

Die Blau-Schwäche hat ihren Ruf erworben, weil Abdunkeln bei konstantem Farbton keine exotische Operation ist — es ist vielleicht das Häufigste überhaupt, was Design-Arbeit von einem Farbmodell verlangt. Hover-Zustände, gedrückte Zustände, Dark-Mode-Flächen, Text auf getönten Hintergründen: Sie alle sind „dieselbe Farbe, angepasst”. Ein Modell, dessen Farbtonzahl unter dieser Anpassung still verbiegt, macht aus jeder Rampe einen manuellen Korrekturdurchgang.

Öffne eine Blau-Rampe, die bei konstantem OKLCH-Farbton gehalten wird: zehn Schritte von fast Weiß bis fast Schwarz, der Farbton den ganzen Weg hinunter bei ≈263 fixiert. Auf die tiefen Schritte kommt es an — das ist der Bereich, in dem ein konstanter CIELAB-Farbton ins Lila gekippt wäre.

Warum liefert CSS beide Familien aus?

Weil beide ihr Territorium haben. Das CSS Color Module Level 4 definiert lab() und lch() neben oklab() und oklch() und hält damit beide Generationen nebeneinander verfügbar, statt einen Sieger zu küren.

Die Aufteilung folgt den Daten, zu denen du passen willst. Wenn die Werte, die du bekommst, aus einer Druck- oder Farbmess-Pipeline stammen — die Sonderfarben-Spezifikation einer Marke, ein ΔE-Toleranzbericht — drücken lab() und lch() sie ohne Übersetzung aus. Wenn du Farben für Bildschirme erzeugst — Paletten, Rampen, Hover-Ableitungen, Kontrastplanung — geben dir die OK-Formen die Version von „perzeptiv”, die sich in genau den Bereichen bewährt, die Bildschirm-Arbeit am stärksten beansprucht.

Wann sind LAB und LCH immer noch die richtige Wahl?

Drei Situationen halten CIELAB im Werkzeugkasten:

• Druckproduktion. ICC-Farbmanagement nutzt CIELAB als Profilverbindungsraum, Sonderfarben-Bibliotheken veröffentlichen LAB-Referenzwerte, und Proofing-Workflows sind darum herum aufgebaut.
• Farbdifferenz-Toleranzen. Die ΔE-Formeln für die Qualitätskontrolle — einschließlich ΔE2000 — sind über CIELAB definiert. Messgeräte, Schwellenwerte und jahrzehntelang angesammelte Toleranzen sprechen diese Sprache.
• Vorhandene Datensätze. Gemessene LAB-Werte behalten ihre Bedeutung; ein Archiv nach OKLab zu konvertieren fügt einen Schritt hinzu und verbessert nichts, worauf es diesen Workflows ankommt.

Nichts davon sind Schwächen, die man in Kauf nimmt. Die Blau-Schwäche zählt, wenn du Farben erzeugst, indem du dich entlang der Achsen des Modells bewegst — was Mess- und Proofing-Workflows selten tun und was die Erzeugung von Bildschirm-Paletten ständig tut. Dieser Unterschied im Gebrauch, mehr als jeder Altersunterschied, ist die eigentliche Grenze zwischen den beiden Familien.

Wie unterscheidest du Modell-Drift von einer bewussten Farbtonänderung?

Beides sieht aus wie „der Farbton hat sich verschoben”, deshalb hilft es, die bewusste Variante einmal gesehen zu haben. Drift kommt ungebeten: Du hast die Helligkeit geändert, und der Farbton hat sich als Nebeneffekt verschoben. Eine bewusste Drehung wird auf einen Schlag auf die gesamte Palette angewendet, mit Absicht, und die Helligkeit bleibt unberührt.

Scale Composer bietet das als Farbton-Offset-Regler an jeder Palette. Zieh den Farbton-Offset an derselben Blau-Rampe — die gesamte Skala schwingt in einer Bewegung Richtung Violett oder Richtung Türkis, während jeder Schritt seine Helligkeit behält. So sieht eine absichtliche Farbtonänderung aus; hast du einmal eine gemacht, ist die unabsichtliche Variante leicht zu benennen, wenn du sie siehst.