HSL Farben
Mit HSL-Werten werden Farben über drei Angaben beschrieben. Diese stehen für Farbton, Sättigung und Helligkeit.
Der Farbton wird als Ganzzahl angegeben, die Sättigung und Helligkeit in Prozent. Dadurch lässt sich eine Farbe gezielt verändern.
Aufbau und Bedeutung der einzelnen Farbwerte
Die Bezeichnung HSL setzt sich aus Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit) zusammen.
Der Farbton wird als Ganzzahl zwischen 0 und 360 angegeben. Sättigung und Helligkeit werden in Prozentwerten von 0 bis 100 angegeben.
Der Farbton legt die Grundfarbe fest. Sättigung und Helligkeit bestimmen, wie kräftig oder wie hell die Farbe dargestellt wird.
| 0 | 360 |
hsl(0, 100%, 100%) die Farbe Weiß hat den Wert für Hue (Farbton) 0, für Saturation (Sättigung) 100% und für Lightness (Helligkeit) 100%.
hsl(0, 100%, 50%) die Farbe Rot hat den Wert für Farbe (0), für Sättigung (100%) und für Helligkeit (50%).
hsl(120, 100%, 50%) die Farbe Grün hat den Wert für Farbe (120), für Sättigung (100%) und für Helligkeit (50%).
hsl(240, 100%, 50%) die Farbe Blau hat den Wert für Farbe (240), für Sättigung (100%) und für Helligkeit (50%).
hsl(0, 0%, 0%) die Farbe Schwarz hat den Wert für Farbe (0), für Sättigung (0%) und für Helligkeit (0%).
Anwendungsbeispiele
<body> einen hellblauen Hintergrund und die Überschrift ist in Blau wiedergegeben. Der Absatz hat einen dunkelblauen Rahmen und eine schwarze Schriftfarbe.<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
<style>
body {
background-color: hsl(220, 100%, 95%);
}
h1 {
color: hsl(220, 100%, 50%);
}
p {
border: solid 1px hsl(220, 100%, 25%);
padding: 12px;
color: hsl(0, 0%, 0%);
}
</style>
</head>
<body>
<h1>Dieses Beispiel</h1>
<p>Im Beispiel hat der body einen hellblauen Hintergrund und die Überschrift ist in Blau wiedergegeben. Der Absatz hat einen dunkelblauen Rahmen und eine Schwarze Schriftfarbe.</p>
</body>
</html>
Hinweise zu Unterschieden und Besonderheiten
HSL-Werte unterscheiden sich von RGB- und hexadezimalen Farbwerten, da Farben nicht über einzelne Farbanteile, sondern über Farbton, Sättigung und Helligkeit beschrieben werden.
Der Farbton wird als Winkel angegeben und bewegt sich im Bereich von 0 bis 360. Dabei entspricht 0 und 360 der gleichen Farbe.
Sättigung und Helligkeit werden in Prozent angegeben und beeinflussen, wie kräftig oder wie hell eine Farbe dargestellt wird.
HSL-Werte werden häufig verwendet, wenn Farben gezielt angepasst oder verändert werden sollen.