CSS/Funktionen/hsl()
Aus SELFHTML-Wiki
< CSS | Funktionen
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 |
|
---|---|
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 */
}
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.
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
Liste der CSS-Funktionen
- Berechnungen und Vergleiche
- Farben und Verläufe
- intrinsische Abmessungen
- Transformationen
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.