# 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:

```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**.