CSS hsl() Funktion

Definition und Verwendung

CSS hsl() Die Funktion verwendet das Farbmodell Farbton-Sättigung-Helligkeit (HSL), um Farben zu spezifizieren. Sie kann auch eine optionale Alpha-Komponente hinzufügen (die Transparenz der Farbe darstellt).

Tipp:HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) und stellt die zylindrische Koordinatendarstellung einer Farbe dar.

Hinweis:hsla() Funktion ist hsl() Funktionssynonym. Es wird empfohlen, hsl() Funktion.

Beispiel

Beispiel 1

Definieren Sie verschiedene HSL(A)-Farben:

#p1 {background-color:hsl(120 100% 50%);} /* Grün */
#p2 {background-color:hsl(120 100% 75%);} /* Eine leichte Grün */
#p3 {background-color:hsl(120 100% 25%);} /* Dunkle Grün */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Eine durchsichtige dunkle Grün */
#p5 {background-color:hsl(120 60% 70%);} /* Eine zarte Grün */
#p6 {background-color:hsl(290 100% 50%);} /* Pflaume */
#p7 {background-color:hsl(290 60% 70%);} /* Eine zarte Pflaume */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Eine durchsichtige zarte Pflaume */

Selbst ausprobieren

Beispiel 2

Die alte Syntax mit durch Kommas getrennten Werten:

#p1 {background-color:hsl(120, 100%, 50%);} /* Grün */
#p2 {background-color:hsl(120, 100%, 75%);} /* Hellgrün */
#p3 {background-color:hsl(120, 100%, 25%);} /* Dunkles Grün */
#p4 {background-color:hsl(120, 60%, 70%);} /* Sanfter Grün */
#p5 {background-color:hsl(290, 100%, 50%);} /* Purpurlila */
#p6 {background-color:hsl(290, 60%, 70%);} /* Sanfter Purpurlila */

Selbst ausprobieren

CSS-Syntax

Absolute Werte Syntax

hsl(Farbton Sättigung Helligkeit / A)
Wert Beschreibung
Farbton Erforderlich. Definiert den Winkel auf dem Farbkreis (von 0 bis 360) - 0 (oder 360) ist rot, 120 ist grün, 240 ist blau.
Sättigung

Erforderlich. Definiert die Sättigung der Farbe; 0% ist grau, 100% ist vollfarbig (volle Sättigung).

Man kann auch None (das ist gleich 0%) verwenden.
Helligkeit

Erforderlich. Definiert die Helligkeit der Farbe; 0% ist schwarz, 50% ist normal, 100% ist weiß.

Man kann auch None (das ist gleich 0%) verwenden.
/ A

Optional. Der Wert des Alpha-Kanals der Farbe (von 0% (oder 0) - voll transparent bis 100% (oder 100) - voll deckend).

Man kann auch None (was einen Alpha-Kanal ohne Wert bedeutet) verwenden.

Standardwert ist 100%.

Relative Werte Syntax

hsl(from Farbe Farbton Sättigung Helligkeit / A)
Wert Beschreibung
from Farbe

Mit dem Schlüsselwort 'from' beginnt, gefolgt von einem Wert, der die ursprüngliche Farbe angibt.

Dies ist die ursprüngliche Farbe, auf der der relative Farbton basiert.
Farbton Erforderlich. Definiert den Winkel auf dem Farbkreis (von 0 bis 360) - 0 (oder 360) ist rot, 120 ist grün, 240 ist blau.
Sättigung

Erforderlich. Definiert die Sättigung der Farbe; 0% ist grau, 100% ist vollfarbig (volle Sättigung).

Man kann auch None (das ist gleich 0%) verwenden.
Helligkeit

Erforderlich. Definiert die Helligkeit der Farbe; 0% ist schwarz, 50% ist normal, 100% ist weiß.

Man kann auch None (das ist gleich 0%) verwenden.
/ A

Optional. Der Wert des Alpha-Kanals der Farbe (von 0% (oder 0) - voll transparent bis 100% (oder 100) - voll deckend).

Man kann auch None (was einen Alpha-Kanal ohne Wert bedeutet) verwenden.

Standardwert ist 100%.

Technische Details

Version: CSS3

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
mit alpha Parameter hsl()
65 79 52 12.1 52
Durch Leerzeichen getrennte Parameter
65 79 52 12.1 52

Verwandte Seiten

Anleitung:CSS HSL-Farbe

Referenz:CSS-Farben

Referenz:CSS hwb() Funktion

Referenz:CSS lab() Funktion

Referenz:CSS lch() Funktion

Referenz:CSS oklab() Funktion

Referenz:CSS oklch() Funktion