HSL beschreibt Farben über Farbton, Sättigung und Helligkeit, englisch hue, saturation und lightness. Der Farbton ist ein Winkel im Farbkreis, die beiden anderen Werte sind Prozentangaben. In CSS steht das Modell seit 2011 als hsl() zur Verfügung und ist leichter zu lesen als ein Hexwert.
- HSL (Hue, Saturation, Lightness)
Ein Farbmodell, das Farben über Farbton, Sättigung und Helligkeit beschreibt.
Beispiel: „Mit HSL machen wir die Markenfarbe für den Hover-Zustand einfach zehn Prozent dunkler.“Abgrenzung zu HSB, auch HSV: Dort bedeutet volle Helligkeit die reine Farbe, in HSL dagegen Weiß. Grafikprogramme nutzen meist HSB, CSS nutzt HSL.
Wie HSL aufgebaut ist
Laut CSS Color 4 liegt Rot bei 0 Grad, Grün bei 120, Blau bei 240. Eine Sättigung von 0 Prozent ergibt Grau, 100 Prozent die volle Farbe. Bei der Helligkeit ist 50 Prozent die reine Farbe, 0 Prozent Schwarz und 100 Prozent Weiß. HSL ist ein Modell für den Farbraum sRGB, jeder Wert lässt sich in einen Hexwert umrechnen.
.rot { color: hsl(0 100% 50%); } /* = #ff0000 */
.hell { color: hsl(212 100% 90%); }Woher HSL kommt
George Joblove und Donald Greenberg stellten das Modell 1978 vor, im selben Jahr wie Alvy Ray Smith das verwandte HSV. In CSS kam HSL mit CSS Color 3, weil RGB als technisch und schwer verständlich galt.
Wo HSL an Grenzen stößt
Die Helligkeit in HSL entspricht nicht der Wahrnehmung. Gelb und Blau mit je 50 Prozent sehen völlig verschieden hell aus. Für Paletten, deren Stufen gleich hell wirken sollen, ist OKLCH die bessere Wahl.
