CSS/Funktionen/hsl()

Browserunterstützung
caniuse.com

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

anwendbar auf

alle Farbangaben

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)

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 Hintergrundfarbe 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.

Siehe auch

• Farbe/Farbmodelle
  • hsl()-Funktion

Weblinks

• HSL Colors: hsl() and hsla() functions (csswg.org)
• Browser-Support: caniuse.com