CSS hsl()-Funktion
Beispiel
HSL-Farben definieren:
#p1 {background-color:hsl(120,100%,50%);} /*grün*/
#p2 {background-color:hsl(120,100%,75%);} /*hellgrün*/
#p3 {background-color:hsl(120,100%,25%);} /*dunkelgrün*/
#p4 {background-color:hsl(120,60%,70%);} /*weiches Grün*/
Selbst ausprobieren »
Definition und Verwendung
Die Funktion hsl() definiert Farben anhand von Farbton, Sättigung und Helligkeit.
HSL steht für Farbton, Sättigung und Helligkeit (englisch: Hue, Saturation, Lightness).
- Farbton (H)Er ist eine grundlegende Eigenschaft der Farbe, nämlich der allgemein verwendete Farbname, wie Rot, Gelb usw.
- Sättigung (S)Sie bezieht sich auf die Reinheit der Farbe. Je höher der Wert, desto reiner die Farbe; je niedriger der Wert, desto grauer wird sie. Der Wert liegt zwischen 0-100%.
- Helligkeit (L)Nimmt Werte von 0-100% an. Eine Erhöhung der Helligkeit lässt die Farbe in Richtung Weiß tendieren; eine Verringerung der Helligkeit lässt die Farbe in Richtung Schwarz tendieren.
HSL ist eine Darstellung von Punkten im RGB-Farbmodell in einem zylindrischen Koordinatensystem. Diese beiden Darstellungen versuchen, intuitiver zu sein als RGB, das auf einer kartesischen Koordinatengeometrie basiert.
Unterstützte Versionen: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Versionsnummer an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS-Syntax
hsl(hue, saturation, lightness)
| Wert | Beschreibung |
|---|---|
| hue - Farbton | Definiert den Farbton (0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau. |
| saturation - Sättigung | Definiert die Sättigung; 0% ist Grau, 100% ist Vollfarbe. |
| lightness - Helligkeit | Definiert die Helligkeit; 0% ist dunkel, 50% ist normal, 100% ist weiß. |
Weitere Erweiterungen