CSS-HSL-Farben

HSL-Wert

In CSS können Sie den Farbton, die Sättigung und die Helligkeit (HSL) verwenden, um Farben zu spezifizieren, und die Formatierung ist wie folgt:

hsla(hue, saturation, lightness)

Farbton (hue）ist ein Wert von 0 bis 360 Grad auf dem Farbwheel. 0 ist Rot, 120 Grün und 240 Blau.

Sättigung (saturation）ist ein Prozentsatz, wobei 0% für den Graustufenwert und 100% für die vollständige Farbe steht.

Helligkeit (lightness）ist ebenfalls ein Prozentsatz, wobei 0% schwarz ist, 50% weder hell noch dunkel und 100% weiß ist.

Probieren Sie die folgenden HSL-Werte aus, um Experimente durchzuführen:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

Beispiel

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Versuchen Sie es selbst

Sättigung

Sättigung kann als Intensität der Farbe beschrieben werden.

100% ist reine Farbe, ohne Graustufen

50% ist 50% grau, aber Sie können dennoch Farbe sehen.

0% ist vollkommen grau, und Sie können keine Farbe sehen.

Beispiel

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Versuchen Sie es selbst

Helligkeit

Die Helligkeit der Farbe kann beschrieben werden, wie viel Licht einer Farbe zugewiesen wird, wobei 0% für dunkel (schwarz) steht, 50% für 50% hell (weder dunkel noch hell) und 100% für voll hell (weiß).

Beispiel

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Versuchen Sie es selbst

Normalerweise wird der Graustufenwert definiert, indem der Farbton und die Sättigung auf 0 gesetzt werden, und die Helligkeit von 0% bis 100% angepasst wird, um dunklere/clairere Schatten zu erhalten:

Beispiel

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Versuchen Sie es selbst

HSLA-Wert

HSLA-Farbwert ist eine Erweiterung des HSL-Farbwerts mit einem Alpha-Kanal - er spezifiziert die Deckkraft der Farbe.

HSLA-Farbwert wird festgelegt als:

hsla(hue, saturation, lightness, alpha)

alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig):

Probieren Sie die folgenden HSLA-Werte durch Mischen aus:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Beispiel

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Versuchen Sie es selbst