HSL-L ist nicht „wahrgenommene Helligkeit“ 🎨

Der L-Wert in HSL ist nur eine geometrische Größe innerhalb dieses Farbmodells, aber nicht so definiert, dass Menschen Farben bei gleichem L als gleich hell wahrnehmen.

Ein typisches Beispiel:

• ein kräftiges Gelb
• ein kräftiges Blau

können in HSL denselben L-Wert haben, aber Gelb wirkt trotzdem viel heller als Blau.

Warum ist das so?

HSL basiert letztlich auf dem üblichen RGB-Farbraum. Dieser ist praktisch für Bildschirme, aber nicht wahrnehmungslinear.

Das heißt:

• gleiche numerische Änderungen in RGB oder HSL
• führen nicht zu gleich großen visuellen Änderungen

Insbesondere ist unser Auge für verschiedene Farbbereiche unterschiedlich empfindlich:

• Gelb/Grün wirkt oft sehr hell
• Blau wirkt oft deutlich dunkler
• obwohl die technischen Werte „ähnlich“ aussehen

Was man stattdessen braucht

Wenn du Farben wirklich gleich hell machen willst, brauchst du einen perzeptuell gleichmäßigeren Farbraum. Dafür gibt es mathematische Modelle.

Die wichtigsten sind:

1. CIELAB / L*a*b*

   • L* steht näher an der wahrgenommenen Helligkeit
   • deutlich besser als HSL

2. CIELUV

   • ähnlicher Zweck, etwas anderer Schwerpunkt

3. OKLab / OKLCH

   • moderner
   • für UI, Web und Design oft sehr gut geeignet
   • in vielen Fällen heute die praktisch beste Wahl

Die eigentliche Idee: „Luminanz“ und „perzeptuelle Helligkeit“

Es gibt dabei zwei verwandte, aber verschiedene Dinge:

1. Physikalische bzw. technische Helligkeit: relative Luminanz

Für einen sRGB-Farbwert berechnet man zunächst die relative Luminanz $Y$.

Wenn R, G, B im Bereich 0 bis 1 als lineare RGB-Werte vorliegen, dann gilt:

$$
Y = 0.2126 R + 0.7152 G + 0.0722 B
$$

Wichtig: Das sind lineare RGB-Werte, nicht die direkt aus CSS bekannten 8-Bit-sRGB-Werte.

Vorher muss man sRGB erst linearisieren. Für einen sRGB-Kanal $c_{srgb}$ gilt:

$$
c_{lin} =
\begin{cases}
\frac{c_{srgb}}{12.92}, & c_{srgb} \le 0.04045 \
\left(\frac{c_{srgb}+0.055}{1.055}\right)^{2.4}, & c_{srgb} > 0.04045
\end{cases}
$$

Diese Luminanz ist z. B. wichtig für:

• Kontrastberechnungen
• WCAG
• technische Lichtstärke-Vergleiche

Aber: gleiche Luminanz ist noch nicht perfekt dasselbe wie „gleich hell empfunden“.

2. Wahrgenommene Helligkeit: perzeptuelle Lightness

Dafür gibt es z. B. in CIELAB die Größe $L^*$.

Aus der relativen Luminanz $Y$ und dem Referenz-Weiß $Y_n$ wird näherungsweise berechnet:

$$
L^* = 116 \cdot \left(\frac{Y}{Y_n}\right)^{1/3} - 16
$$

für größere Werte; genauer ist die Definition stückweise, aber die Grundidee ist:

• nicht linear,
• sondern an die menschliche Wahrnehmung angepasst.

Gleiche $L^*$-Werte sind viel näher an „gleich hell“ als gleiche HSL-L-Werte.

Für CSS heute besonders interessant: OKLCH

Für praktische Arbeit im Web ist OKLCH oft die beste Antwort.

OKLCH besteht aus:

• L = wahrgenommene Helligkeit
• C = Chroma / Farbstärke
• H = Farbwinkel

Das ist also ähnlich intuitiv wie HSL, aber viel besser an die Wahrnehmung angepasst.

Vorteil

Wenn du in OKLCH den gleichen L-Wert verwendest, wirken Farben wesentlich eher gleich hell.

Beispiel in CSS:

color: oklch(0.7 0.15 30);
color: oklch(0.7 0.15 120);
color: oklch(0.7 0.15 260);

Hier ist die Helligkeit durch 0.7 deutlich konsistenter als bei vergleichbaren HSL-Farben.

Also: Gibt es eine mathematische Rechenweise?

Ja. Sogar mehrere — je nachdem, was du mit „hell“ meinst:

1. Gleiche technische Luminanz

   • über lineares RGB und
     $$
     Y = 0.2126 R + 0.7152 G + 0.0722 B
     $$
   • gut für Kontrast und Messbarkeit

2. Gleiche wahrgenommene Helligkeit

   • über CIELAB L* oder besser OKLab/OKLCH L
   • gut für Design, UI und Farbpaletten

Praktische Empfehlung

Wenn dein Ziel ist:

„Farben sollen im Interface gleich hell wirken“

Dann nimm OKLCH statt HSL.

„Ich will Kontraste mathematisch korrekt prüfen“

Dann arbeite mit relativer Luminanz.

„Ich will ein älteres, etabliertes Farbmodell“

Dann ist CIELAB eine gute Wahl.

Warum HSL trotzdem oft benutzt wird

HSL ist beliebt, weil es sehr intuitiv aussieht:

• H = Farbton
• S = Sättigung
• L = hell/dunkel

Aber dieses L ist eher ein Modellparameter als echte visuelle Helligkeit.

Man kann HSL gut verwenden für:

• einfache Farbvarianten
• schnelle Prototypen
• kleine Anpassungen

Aber nicht, wenn du exakt gleich helle Farben willst.

Kurzfassung

Ja, dafür gibt es mathematische Modelle.
Wenn Farben wirklich gleich hell wirken sollen, ist HSL ungeeignet.

Am besten nimmst du:

• OKLCH für praktische CSS-/UI-Arbeit
• oder CIELAB / OKLab, wenn du mathematisch sauber in perzeptuellen Farbräumen arbeiten willst

Wenn du möchtest, kann ich dir als Nächstes noch zeigen:

1. warum HSL-L mathematisch so definiert ist,
2. wie man eine HSL-Farbe in relative Luminanz umrechnet, oder
3. wie man in CSS mit OKLCH eine gleichhelle Farbpalette baut.