HSL Farben, HSL-Farbangaben und HSLA

CSS3 Farb-Transparenz mit RGBA hatte ich schon einmal beschrieben, heute folgt HSL.

HSL ist eine weitere Möglichkeit, Farbangaben in der CSS zu definieren. HSL ist hier die Abkürzung für „Hue, Saturation, Lightness“ zu deutsch in etwa „Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit“. Die Angaben erfolgen in der CSS nach dem Muster:

hsl(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %);
hsla(Farbwinkel, Farbsättigung in %, Farbhelligkeit in %, Alpha);

Ich persönlich finde HSL für den Anwender intuitiver, besser und einfacher zu merken. Ich stelle mir einfach einen Kreis mit Winkelangaben von 0 bis 359 Grad vor. Der Wert 0 oder 360 steht für ROT, 120 steht für GRÜN und 240 für BLAU (oder eine Uhr und den Uhrzeiten 3Uhr = 90, 6Uhr = 180, 9Uhr = 270, 12Uhr = 360/0).

hsla(0, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(60, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(120, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(180, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 50%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(240, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(300, 100%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

Die Angabe der Farbsättigung tendiert mit Richtung zum Wert 0% zu einem „grau“ (je kleiner der Wert, desto mehr grau).

Bei der Angabe von 100% Helligkeit erhält man immer „weiß“, bei 0% Helligkeit „schwarz“. Probiert es aus! Wenn man sich erst einmal „zurecht“ gefunden hat, ist das sehr intuitiv.

Hier einmal unterschiedliche „Grauwerte“:

hsla(0, 0%, 80%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(0, 0%, 70%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(0, 0%, 60%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(0, 0%, 50%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(0, 0%, 40%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

hsla(0, 0%, 30%, 1) Farbton (Farbwinkel), Farbsättigung, Farbhelligkeit

Analog zu den rgb- und rgba-Werten gibt es auch bei HSL das „a“ mit welchem man die Transparenz regeln kann.