CSS HSL-Farben
HSL steht für Farbton, Sättigung und Helligkeit.
HSL-Wert
In CSS kann eine Farbe mithilfe von Farbton, Sättigung und Helligkeit (HSL) in der Form angegeben werden:
hsl( Farbton , Sättigung , Helligkeit )
Der Farbton ist ein Grad auf dem Farbrad von 0 bis 360. 0 ist rot, 120 ist grün und 240 ist blau.
Die Sättigung ist ein Prozentwert, 0 % bedeutet einen Grauton und 100 % die volle Farbe.
Helligkeit ist auch ein Prozentsatz, 0 % ist schwarz, 50 % ist weder hell noch dunkel, 100 % ist weiß
Experimentieren Sie, indem Sie die folgenden HSL-Werte mischen:
hsl(0, 100 %, 50 %)
FARBTON
SÄTTIGUNG
LEICHTIGKEIT
Beispiel
Sättigung
Sättigung kann als Intensität einer Farbe beschrieben werden.
100 % ist reine Farbe, keine Grauschattierungen
50 % sind 50 % grau, aber Sie können die Farbe noch sehen.
0% ist komplett grau, man sieht die Farbe nicht mehr.
Beispiel
Leichtigkeit
Die Helligkeit einer Farbe lässt sich damit beschreiben, wie viel Licht man der Farbe geben möchte, wobei 0 % kein Licht (schwarz) bedeutet, 50 % 50 % hell (weder dunkel noch hell) bedeutet, 100 % volle Helligkeit (weiß) bedeutet.
Beispiel
Grautöne
Grauschattierungen werden oft definiert, indem Sie den Farbton und die Sättigung auf 0 setzen und die Helligkeit von 0 % bis 100 % anpassen, um dunklere/hellere Schattierungen zu erhalten:
Beispiel
HSLA-Wert
HSLA-Farbwerte sind eine Erweiterung von HSL-Farbwerten mit einem Alphakanal, der die Deckkraft einer Farbe angibt.
Ein HSLA-Farbwert wird angegeben mit:
hsla ( Farbton, Sättigung , Helligkeit, 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:
hsla (0, 100 %, 50 %, 0,5)
FARBTON
SÄTTIGUNG
LEICHTIGKEIT
ALPHA