CSS HSL-Farben


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


HSL steht für Farbton, Sättigung und Helligkeit.


HSL-Wert

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

0

SATURATION

100%

LIGHTNESS

50%

Beispiel

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

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

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.

Beispiel

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

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>




Leichtigkeit

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ß).

Beispiel

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

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

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:

Beispiel

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

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-Wert

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

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Beispiel

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

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>