Farbton, Sättigung und Helligkeit

In HSL haben Gelb und Blau beide eine Helligkeit von 50%, doch Gelb reflektiert nach der WCAG-Leuchtdichteformel fast 13-mal so viel Licht wie Blau.

Den Würfel in einen Zylinder verwandeln

RGB-Zahlen sind für einen Bildschirm leicht und für Menschen schwer. Willst du „dasselbe Blau, etwas heller“, musst du alle drei Kanäle zugleich um verschiedene Beträge ändern. HSL ordnet dieselben sRGB-Farben so um, dass die Regler zur Art passen, wie Menschen über Farbe sprechen. CSS Color 4 beschreibt es als zylindrisches Modell: ein Farbtonwinkel außen herum, eine mittlere Achse für die Helligkeit von Schwarz bis Weiß und ein Radius für die Sättigung, also wie weit eine Farbe von einem neutralen Grau entfernt ist.

Stell dir den RGB-Würfel auf seiner schwarzen Ecke stehend vor, mit Weiß gerade darüber. Die Grauachse ist nun senkrecht. Sieh von oben hinunter, und die sechs lebhaften Ecken, Rot, Gelb, Grün, Cyan, Blau und Magenta, bilden einen Ring um die Achse. HSL nimmt diesen Ring, macht ihn rund und streckt den ganzen Körper zu einem Zylinder. Das Modell oben zeigt das Ergebnis: eine waagerechte Scheibe bei der gewählten Helligkeit und einen aufrechten Schnitt beim gewählten Farbton und seinem Gegenüber. Klicke irgendwo auf eine der beiden Flächen, um diese Farbe zu wählen.

Farbton

Der Farbton ist ein Winkel in Grad. CSS Color 4 legt den Ausgangspunkt fest: 0deg ist sRGB-Rot, 120deg ist Grün und 240deg ist Blau, und 360deg kommt zu Rot zurück. Auf halbem Weg zwischen den Grundfarben liegen die Sekundärfarben: 60deg Gelb, 180deg Cyan und 300deg Magenta. Weil der Farbton ein Winkel ist, läuft er im Kreis herum. Ein Farbton von 390deg ist derselbe wie 30deg, und 180deg zu einem beliebigen Farbton zu addieren führt zu der Farbe direkt gegenüber auf dem Kreis.

Sättigung und Helligkeit

Die Sättigung ist ein Prozentwert. Bei 100% sitzt die Farbe außen am Zylinder und ist so lebhaft, wie sRGB es bei dieser Helligkeit erlaubt. Bei 0% sitzt sie auf der mittleren Achse und ist ein Grau; CSS Color 4 sagt, dass der Farbton dann gar keine Wirkung hat, hsl(0deg 0% 50%) und hsl(180deg 0% 50%) sind also dasselbe Grau. Die Helligkeit ist ebenfalls ein Prozentwert. 0% ist für jeden Farbton Schwarz, 100% ist für jeden Farbton Weiß, und 50% ergibt die lebhafteste Version eines Farbtons. hsl(0deg 100% 50%) ist also dasselbe Rot wie #ff0000, während hsl(120deg 100% 25%) ein dunkles Grün ist, rgb(0 128 0).

Wo HSL in die Irre führt

HSL ist bequem, und die CSS-Spezifikation ist offen über seine Grenzen. Seine Helligkeit ist nicht die Helligkeit, die dein Auge sieht. Gelb, hsl(60deg 100% 50%), und Blau, hsl(240deg 100% 50%), haben dasselbe L von 50%, doch Gelb wirkt weit heller. Die WCAG-Leuchtdichteformel ergibt 0.9278 für dieses Gelb und 0.0722 für dieses Blau, ein Verhältnis von fast 13. Auch der Farbtonwinkel ist nicht gleichmäßig: Die Spezifikation hält fest, dass ein Schritt von 30 Grad unter Blautönen klein wirkt, derselbe Schritt zwischen Gelb und Grün aber groß. Neuere CSS-Räume wie oklch() wurden entworfen, um das zu beheben. Um zu prüfen, ob Text lesbar ist, vertraue nie der HSL-Helligkeit. Nutze das Kontrastverhältnis, das du in Einheit 6 berechnen wirst.