HSL steht für Farbton, Sättigung und Helligkeit.
In CSS kann eine Farbe mithilfe von Farbton, Sättigung und Helligkeit (HSL) angegeben werden die Form:
hsl(Farbton, Sättigung, Helligkeit)
Der Farbton ist ein Grad im Farbkreis 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 % ist die Vollfarbe.
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:
HUE
SATURATION
LIGHTNESS
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
Sättigung kann als Intensität einer Farbe beschrieben werden.
100 % ist reine Farbe, keine Grautöne.
50 % sind 50 % Grau, aber Sie können die Farbe immer noch sehen.
0 % ist vollständig grau; man sieht die Farbe nicht mehr.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Saturation</h1>
<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>
</body>
</html>
Die Helligkeit einer Farbe kann als die Menge an Licht beschrieben werden, die Sie der Farbe geben möchten. 0 % bedeutet kein Licht (Schwarz), 50 % bedeutet 50 % Licht (weder dunkel noch hell). und 100 % bedeutet volle Helligkeit (weiß).
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>HSL Lightness</h1>
<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>
<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>
</body>
</html>
Grautöne werden oft definiert, indem der Farbton und die Sättigung auf 0 und gesetzt werden Passen Sie die Helligkeit von 0 % bis 100 % an, um dunklere/hellere Farbtöne zu erhalten:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>
<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>
</body>
</html>
HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte um einen Alphakanal - Gibt die Deckkraft einer Farbe an.
Ein HSLA-Farbwert ist angegeben mit:
hsla(Farbton, Sättigung, Helligkeit, alpha)
Der Alpha-Parameter ist eine Zahl zwischen 0,0 (völlig transparent) und 1,0 (überhaupt nicht transparent):
Experimentieren Sie, indem Sie die folgenden HSLA-Werte mischen:
HUE
SATURATION
LIGHTNESS
ALPHA
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with HSLA</h1>
<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>