CSS hsla() Funktion

Beispiel

Definiert verschiedene HSL-Farben mit Transparenz:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Grün */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Hellgrün */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Dunkelgrün */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Weichgrün */

Selbst ausprobieren

Definition und Verwendung

Die hsla() Funktion definiert Farben mithilfe des Modells Hue-Sättigung-Licht-Alfa (HSLA).

HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte und enthalten einen Alpha-Kanal - dieser Kanal spezifiziert die Transparenz der Farbe.

Version: CSS3

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Browser-Version, die diese Funktion vollständig unterstützt.

Funktion
hsla() 1.0 9.0 3.0 3.1 10.0

CSS-Syntax

hsla(Farbton, Sättigung, Licht, alpha)
Wert Beschreibung
Farbton Definiert den Winkel auf dem Farbkreis (von 0 bis 360) - 0 (oder 360) ist Rot, 120 Grün, 240 Blau.
Sättigung Definiert den Sättigungswert - 0% ist Graustufe, während 100% vollfarbig (vollständig gesättigt) ist.
Licht Definiert die Helligkeit - 0% ist schwarz, 50% ist normal, 100% ist weiß.
alpha Definiert die Transparenz als Zahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).