CSS/Funktionen/hsl()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die hsl()-Funktion erlaubt CSS auch das Mischen von Farbton (englisch hue), Sättigung (englisch saturation) und Helligkeit (englisch lightness)..

Parameter
  • Farbton ganzzahliger Wert zwischen 0 und 360. Bei diesem Wertebereich stellt man sich vor, dass die Regenbogenbogenfarben in einem Kreis angeordnet sind. 0 entspricht Rot, 120 entspricht grün, 240 entspricht blau und 360 entspricht wieder Rot.
    Es sind auch höhere und negative Werte erlaubt, diese Werte werden dann in eine Zahl innerhalb des genannten Bereiches umgewandelt.
  • Sättigung: Prozentwert; Verlauf des Farbtons (100%) zu einem Grauton (0%).
  • Helligkeit: Prozentwert; Verlauf von weiß (100%) zu schwarz (0%). Eine Helligkeit von 50% gilt als normale Helligkeit.
anwendbar auf alle Farbangaben
Browsersupport caniuse: css3-colors
Beispiel
hsl(60, 100%, 50%)
Die Farbe gelb entspricht einem Farbton von 60°, eine Sättigung von 100% und einer Helligkeit von 50%


Weblinks

W3C: HSL Colors: hsl() and hsla() functions

Siehe auch