CSS/Funktionen/hsla()

Die hsla()-Funktion erlaubt CSS auch das Mischen von Farbton (englisch hue), Sättigung (englisch saturation) und Helligkeit (englisch lightness). Als 4. Parameter wird die Deckkraft durch den Transparenzwert des Alphakanals angegeben..

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. Deckkraft: Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz)
anwendbar auf	alle Farbangaben
Browsersupport	caniuse: css3-colors

Beispiel

hsl(60 100% 50% /0.5)

Die Farbe gelb entspricht einem Farbton von 60°, einer Sättigung von 100% und einer Helligkeit von 50%
Die Deckkraft beträgt 0.5.

Beachten Sie: Im CSS Color Module 4 ist die hsla()-Funktion in der hsl()-Funktion aufgegangen. Die bisherige Funktion kann in bestehenden Projekten aber beibehalten werden.

Weblinks

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

Siehe auch

• Grafik/Farbe/Farbmodelle
  • hsl()-Funktion