HSL

Steht für „Hue, Saturation, Lightness“.

HSL ist ein Farbmodell, das Farben als Kombinationen aus drei Eigenschaften definiert, ähnlich wie das RGB-Farbmodell. Zunächst wird ein Punkt auf dem Farbkreis festgelegt. Anschließend werden Sättigung und Helligkeit angepasst, um die endgültige Farbe zu erzeugen. Grafik- und Webdesigner verwenden es häufig, da sich damit kleine Farbanpassungen leichter vornehmen lassen, ohne eine Farbauswahl verwenden zu müssen.

Anstatt eine Farbe als Mischung anderer Farben darzustellen, wie beim RGB-Farbmodell, verwendet HSL die drei Eigenschaften Farbton, Sättigung und Helligkeit, um eine Farbe zu definieren:

• Farbton stellt die Winkelposition auf dem Farbkreis als Zahl zwischen 0 und 359º dar. Reines Rot befindet sich oben auf dem Farbkreis und wird durch einen Winkelwert von 0º dargestellt; Cyan befindet sich am gegenüberliegenden Ende bei 180º.
• Sättigung stellt die Intensität der Farbe als Prozentsatz zwischen 0 und 100 % dar. Eine Sättigung von 0 % ergibt Grau.
• Helligkeit stellt die Helligkeit der Farbe als Prozentsatz zwischen 0 und 100 % dar. Eine Helligkeit von 0 % ist Schwarz, eine Helligkeit von 50 % entspricht der Farbe selbst und eine Helligkeit von 100 % ist Weiß.

Das HSL-Farbmodell kann denselben Farbbereich wie RGB erzeugen, verwendet jedoch eine andere Darstellung. Beispielsweise entspricht ein helles Cyan mit den RGB-Werten R:166, G:242, B:242 oder dem (Hexadezimalwert #A6F2F2) einer Farbe mit einem Farbton von 180º, einer Sättigung von 75 % und einer Helligkeit von 80 %. Digitale Bilddateien speichern Farbinformationen weiterhin als RGB-Werte, auch wenn ein Bildbearbeitungsprogramm HSL verwendet.

HSL gilt als intuitivere Methode, um Farben als Zahlenkombination zu definieren. Webdesigner legen Farben in CSS häufig mit HSL statt mit RGB fest, um geringfügige Anpassungen zu vereinfachen. Wenn ein Webdesigner beispielsweise eine Farbe mit dem CSS-Code hsl(180, 75%, 80%) festgelegt hat, kann er sie dunkler machen, indem er den Helligkeitswert verringert. Würde er dieselbe Anpassung mit RGB-Werten vornehmen, müsste er alle drei Werte um unterschiedliche Beträge ändern.

NOTE: Das HSL-Farbmodell ähnelt dem HSB-Modell. HSB verwendet zwar dieselbe Berechnung für den Farbton, aber statt der Helligkeit die Lichtstärke – wobei ein Wert von 100 die volle Farbe statt Weiß darstellt – was sich auch auf die Berechnung der Sättigung auswirkt.