CSS HSL-Farben
HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit).
HSL-Wert
In CSS kann eine Farbe mithilfe von Farbton, Sättigung und Helligkeit (HSL) in der folgenden Form angegeben werden:
hsl(hue, saturation, lightness)
Der Farbton ist eine Gradzahl auf dem Farbkreis von 0 bis 360. 0 steht für Rot, 120 für Grün und 240 für Blau.
Die Sättigung ist ein Prozentwert. 0 % entspricht einem Grauton und 100 % der vollen Farbe.
Die Helligkeit ist ebenfalls ein Prozentwert. 0 % steht für Schwarz, 50 % für weder hell noch dunkel und 100 % für Weiß.
Experimentieren Sie mit der Mischung der folgenden HSL-Werte:
HUE
SATURATION
LIGHTNESS
Beispiel
Try it Yourself »
Saturation / Sättigung
Sättigung kann als die Intensität einer Farbe beschrieben werden.
100 % ist reine Farbe, keine Grautöne.
50 % ist 50 % Grau, aber die Farbe ist noch sichtbar.
0 % ist komplett grau, die Farbe ist nicht mehr sichtbar.
Beispiel
Try it Yourself »
Lightness / Leichtigkeit
Die Helligkeit einer Farbe kann als die gewünschte Lichtintensität beschrieben werden, wobei 0 % kein Licht (Schwarz), 50 % 50 % Licht (weder dunkel noch hell) und 100 % volle Helligkeit (Weiß) bedeutet.
Beispiel
Try it Yourself »
Grautöne
Grautöne werden oft definiert, indem Farbton und Sättigung auf 0 gesetzt werden und die Helligkeit von 0 % bis 100 % angepasst wird, um dunklere/hellere Töne zu erhalten:
Beispiel
Try it Yourself »
HSLA-Wert
HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte mit einem Alphakanal, der die Deckkraft einer Farbe angibt.
Ein HSLA-Farbwert wird wie folgt angegeben:
hsla(hue, saturation, lightness, alpha)
Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (überhaupt nicht transparent):
Experimentieren Sie, indem Sie die folgenden HSLA-Werte mischen:
HUE
SATURATION
LIGHTNESS
ALPHA
Beispiel
Try it Yourself »
CSS — Farben HSL – W3Schools Video
Dieses Video ist eine Einführung in HSL-Farben in CSS.
Teil einer Reihe von Video-Tutorials zum Erlernen von CSS für Anfänger!
