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: 
 
 
 CIELAB / L*a*b* 
 
 L* steht näher an der wahrgenommenen Helligkeit 
 deutlich besser als HSL 
 
 
 
 CIELUV 
 
 ähnlicher Zweck, etwas anderer Schwerpunkt 
 
 
 
 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: 
 
 
 Gleiche technische Luminanz 
 
 über lineares RGB und $$ Y = 0.2126 R + 0.7152 G + 0.0722 B $$ 
 gut für Kontrast und Messbarkeit 
 
 
 
 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: 
 
 warum HSL-L mathematisch so definiert ist , 
 wie man eine HSL-Farbe in relative Luminanz umrechnet , oder 
 wie man in CSS mit OKLCH eine gleichhelle Farbpalette baut .