OKLCH vs HSL: Warum HSL bei der Helligkeit lügt

Der entscheidende Unterschied zwischen OKLCH und HSL ist, was „Helligkeit” überhaupt bedeutet. Das L in HSL ist ein geometrischer Bruchteil der RGB-Werte einer Farbe; das L in OKLCH ist ein Maß dafür, wie hell die Farbe tatsächlich wirkt. Zwei HSL-Farben mit derselben „50 % Helligkeit” können sich in der wahrgenommenen Helligkeit drastisch unterscheiden — zwei OKLCH-Farben mit demselben L wirken nahezu gleich hell.

Beide Modelle beschreiben Farbe als drei Werte mit einem Farbton-Winkel, was sie austauschbar wirken lässt. Dieser Artikel zerlegt, warum sie es nicht sind; der Rest der Farbmodell-Serie findet sich in unserem OKLCH-Leitfaden.

Wie können zwei Farben denselben Helligkeitswert haben und völlig unterschiedlich aussehen?

Vergleiche hsl(60, 100%, 50%) mit hsl(240, 100%, 50%) in einem beliebigen Color Picker. Die erste ist Gelb — so hell, dass sie auf weißem Hintergrund kaum überlebt. Die zweite ist ein tiefes Blau, dunkel genug, um weißen Text zu tragen. Beide behaupten 50 % Helligkeit.

Miss alle sechs Eckfarbtöne von HSL bei „100 %, 50 %” in OKLCH, wo L der Wahrnehmung folgt, und die Spanne wird als Zahlen sichtbar:

Sechs Farben, ein einziger HSL-Helligkeitswert — und eine gemessene Helligkeitsspanne von 0,45 bis 0,97, mehr als die Hälfte der gesamten Achse. Gelb bei „50 %” liegt nahe Weiß; Blau bei „50 %” liegt näher an Schwarz.

Was misst HSL eigentlich?

HSL stammt aus den späten 1970ern und wurde als eingängigere Art entworfen, RGB-Werte zu steuern — geometrisch ein Zylinder, der um den RGB-Würfel gelegt ist, wie der Wikipedia-Artikel zu HSL und HSV im Detail darlegt. Seine Helligkeit ist reine Kanal-Arithmetik: Nimm den höchsten und den niedrigsten der drei RGB-Werte und bilde ihren Mittelwert. #ffff00 (255, 255, 0) und #0000ff (0, 0, 255) ergeben beide im Mittel 50 %, also meldet HSL sie als gleich hell.

An dieser Rechnung ist kein Auge beteiligt — und Augen gewichten das Spektrum sehr ungleich. Das menschliche Sehen ist im Grün-Gelb-Bereich weit empfindlicher für Licht als am blauen Ende; dieser Effekt heißt Hellempfindlichkeit (luminous efficiency). Ein Bildschirm, der seinen Blaukanal mit voller Leistung ansteuert, liefert nur einen Bruchteil der wahrgenommenen Helligkeit, die dieselbe Leistung über Grün erzeugt. Gelb (Rot plus Grün bei voller Leistung) landet nahe dem Gipfel der Empfindlichkeitskurve; Blau landet an ihrem Rand. Das ist der intuitive Kern des Problems: HSL zählt RGB-Energie, aber Helligkeit ist ein Erlebnis, das ein visuelles System mit starken Vorlieben bezüglich der Wellenlänge erzeugt. Ein Modell, das den Betrachter nie befragt, gibt falsch wieder, was der Betrachter sieht.

OKLCH ist in die entgegengesetzte Richtung kalibriert: Es geht von Messungen der Wahrnehmung aus und rechnet zur Mathematik zurück, sodass gleiches L per Design bedeutet „wirkt gleich hell” über alle Farbtöne hinweg.

Warum zerstört das Farbrampen und Kontrast?

Eine irreführende Helligkeitszahl kostet wenig, wenn du eine einzelne Farbe isoliert anpasst. Der Schaden zeigt sich in jedem Arbeitsablauf, der Helligkeit über Farbtöne hinweg vergleicht:

• Rampen klumpen und werden matschig. Erzeuge eine 10-stufige Palette, indem du die HSL-Helligkeit von 95 % bis 20 % herunterschreitest, und jeder Farbton verzerrt sich anders: Gelbtöne bleiben in der oberen Hälfte ausgewaschen, Blautöne stürzen früh ins Dunkle, Mitteltöne driften Richtung Grau. So erzeugte Paletten brauchten in der Regel eine Runde manueller Korrektur pro Farbton.
• Kontrast lässt sich nicht aus den Zahlen ablesen. Barrierefreier Textkontrast hängt vom wahrgenommenen Helligkeitsabstand zwischen Text und Hintergrund ab. Wenn L der Wahrnehmung nicht folgt, sagt „diese beiden Werte liegen 40 Punkte auseinander” gar nichts voraus — eine Kombination, die in einem Farbton besteht, fällt in einem anderen durch, und dir bleibt nur, die Paare einzeln zu testen.

Beide Fehler haben eine gemeinsame Wurzel: Der Arbeitsablauf setzt voraus, dass die Helligkeitszahl über Farbtöne hinweg vergleichbar ist — und in HSL ist sie das nicht.

Wie sieht eine ehrliche Helligkeitsachse aus?

Eine saubere Demonstration nutzt die zwei Farbtöne, die HSL am unterschiedlichsten behandelt — Gelb und Blau — platziert auf derselben OKLCH-Helligkeitskurve. Öffne die beiden Rampen nebeneinander im Scale Composer: Stufe drei der gelben Rampe und Stufe drei der blauen Rampe teilen sichtbar ihre gemessene Helligkeit, und das Muster hält über beide Skalen hinweg bis nach unten. Das Chroma unterscheidet sich — Gelb und Blau können bei gleicher Helligkeit unterschiedlich viel Buntheit tragen — aber die Helligkeit sinkt im Gleichschritt.

Dasselbe mit HSL zu erzeugen, würde eine von Hand gebaute Korrekturtabelle pro Farbton erfordern, weil seine Helligkeitsachse in jedem Farbton etwas anderes bedeutet. In OKLCH ist es schlicht das, was passiert, wenn zwei Rampen eine Helligkeitskurve teilen.

Wann ist HSL trotzdem in Ordnung?

HSL ist gerade dort irreführend, wo Konsistenz über Farbtöne hinweg zählt — was echten Spielraum lässt, wo sie es nicht tut. Für eine schnelle Einzelanpassung — einen einzelnen Hover-Zustand dunkler schieben, ein Badge abdämpfen, in einem Picker durch die Farbtöne wandern — ist HSL bequem und harmlos, weil nichts weiter unten davon abhängt, seine Zahlen zwischen Farbtönen zu vergleichen. Die Probleme beginnen, wenn Systeme darauf aufbauen: generierte Paletten, berechneter Kontrast, aus hellen abgeleitete Dark Modes. Dort verstärkt sich die Helligkeitsverzerrung über jede Stufe hinweg.

Eine praktikable Regel: HSL, um einzelne Farben anzufassen, OKLCH für alles, was sie erzeugt oder vergleicht.

Wie sorgst du dafür, dass der Unterschied hängen bleibt?

Zahlen belegen den Fall; die Achsen in Bewegung zu sehen, macht daraus Intuition. Nimm eine Rampe im Scale Composer und zieh den Farbton-Versatz von Blau Richtung Gelb und zurück. In HSL würde ein entsprechender Farbton-Durchlauf die wahrgenommene Helligkeit auf und ab schwingen lassen. Hier bleibt die Helligkeitskurve still: Jede Stufe behält ihre Helligkeit, während allein der Farbton durch die Palette rotiert. Nach einem vollen Durchlauf mit fixierter Helligkeit hört „gleiches L bedeutet gleiche Helligkeit” auf, eine Behauptung aus der Spezifikation zu sein, und wird zu etwas, auf das du dich beim Gestalten verlassen kannst.