CSS/Funktionen/hsl()

Die hsl()-Funktion erlaubt das Mischen von Farbton (englisch hue), Sättigung (englisch saturation) und Helligkeit (englisch lightness). Als optionaler 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: (optional) Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz)
anwendbar auf	alle Farbangaben
Browsersupport	caniuse: css3-colors

Beispiel

body {
  color: hsl(240 50% 13%);  /* sehr dunkles blau */
  background-color: hsl(60 100% 50% /0.5); /* gelb mit 50% Transparenz */
}

Die Textfarbe hat einen Farbton von 240 (blau), eine Sättigung von 50% und eine sehr niedrige Helligkeit von 13%. Dies bewirkt, dass der Text fast schwarz wirkt.
Die Hintergundfarbe entspricht einem Farbton von 60°, einer Sättigung von 100% und einer Helligkeit von 50%, die zusätzlich einen Alphawert von 50% hat. Dies erzeugt ein sehr helles Gelb.

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.
Die einzelnen Werte werden durch Leerzeichen getrennt. Allein der Alphawert wird mit einem vorangestellten / Slash abgetrennt. Es ist aber weiterhin möglich, die Werte durch Kommata zu trennen.

Weblinks

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

Siehe auch

• Farbe/Farbmodelle
  • hsl()-Funktion