HTML HSL- und HSLA-Farben

HSL steht für hue/farbton, saturation/Sättigung und lightness/helligkeit.

HSLA-Farbwerte sind eine Erweiterung von HSL mit einem Alpha-Kanal (Deckkraft).

HSL Farbwerte

In HTML kann eine Farbe mithilfe von Farbton, Sättigung und Helligkeit (HSL) in der Form angegeben werden:

hsl(hue, saturation, lightness)

Der Farbton ist ein Grad im Farbkreis von 0 bis 360. 0 ist Rot, 120 ist Grün und 240 ist Blau.

Sättigung ist ein Prozentwert, 0 % bedeutet einen Grauton und 100 % ist die Vollfarbe.

Helligkeit ist ebenfalls ein Prozentwert, 0 % ist schwarz und 100 % ist weiß.

Experimentieren Sie, indem Sie die folgenden HSL-Werte mischen:

Saturation/Sättigung

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

100 % ist reine Farbe, keine Grautöne

50 % sind 50 % Grau, aber Sie können die Farbe immer noch sehen.

0% ist komplett grau, man sieht die Farbe nicht mehr.

Lightness/Helligkeit

Die Helligkeit einer Farbe kann als die Menge an Licht beschrieben werden, die Sie der Farbe geben möchten, wobei 0 % kein Licht bedeutet (schwarz), 50 % 50 % hell bedeutet (weder dunkel noch hell) und 100 % volle Helligkeit bedeutet (weiß)..

Grautöne

Grautöne werden oft definiert, indem man den Farbton und die Sättigung auf 0 setzt und die Helligkeit von 0 % bis 100 % anpasst, um dunklere/hellere Farbtöne zu erhalten:

HSLA Farbwerte

HSLA-Farbwerte sind eine Erweiterung der HSL-Farbwerte mit einem Alpha-Kanal – der die Deckkraft einer Farbe angibt.

Ein HSLA-Farbwert wird mit angegeben:

hsla(hue, saturation, lightness, alpha)

Der Alpha-Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (überhaupt nicht transparent):

Experimentieren Sie, indem Sie die folgenden HSLA-Werte mischen: