CSS Colors HSL

CSS Colors HSL: CSS unterstützt die Definition von Farben im HSL-Format, was für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit) steht. Das HSL-Format ermöglicht eine intuitive Farbauswahl, da es Farben in Bezug auf Farbton, Intensität und Helligkeit beschreibt, anstatt auf Rot-, Grün- und Blauwerte wie bei RGB.

HSL-Farbformat

Die Syntax für HSL-Farben lautet hsl(hue, saturation, lightness). Jede der Komponenten hat eine spezifische Bedeutung:

• Hue (Farbton): Ein Winkel auf dem Farbkreis von 0 bis 360 Grad. Beispielsweise steht 0° für Rot, 120° für Grün und 240° für Blau.
• Saturation (Sättigung): Gibt die Farbintensität in Prozent an. 0 % bedeutet Graustufen, und 100 % bedeutet volle Sättigung.
• Lightness (Helligkeit): Gibt die Helligkeit in Prozent an. 0 % ist schwarz, 100 % ist weiß, und 50 % zeigt die volle Farbe.

h1 {
    color: hsl(120, 100%, 50%); /* Voll gesättigtes Grün */
}

Beispiele für HSL-Farben

• Rot: hsl(0, 100%, 50%)
• Grün: hsl(120, 100%, 50%)
• Blau: hsl(240, 100%, 50%)
• Hellgrau: hsl(0, 0%, 75%)
• Dunkelgrau: hsl(0, 0%, 25%)

HSLA für Transparente Farben

Wie bei RGB kann HSL auch eine Alpha-Komponente enthalten, um die Deckkraft zu steuern. Das Format dafür lautet hsla(hue, saturation, lightness, alpha), wobei alpha zwischen 0 (transparent) und 1 (undurchsichtig) liegt.

p {
    color: hsla(240, 100%, 50%, 0.3); /* Blau mit 30 % Transparenz */
}

Beispiele für HSL- und HSLA-Farben

body {
    background-color: hsl(210, 50%, 95%); /* Helles Blau */
}

h1 {
    color: hsl(0, 100%, 50%); /* Voll gesättigtes Rot */
}

p {
    color: hsla(120, 100%, 25%, 0.6); /* Dunkles Grün mit Transparenz */
}

Farbtabelle für schnelle Übersicht

Farbe	HSL-Wert	HSLA (mit 50 % Transparenz)
Rot	hsl(0, 100%, 50%)	hsla(0, 100%, 50%, 0.5)
Grün	hsl(120, 100%, 50%)	hsla(120, 100%, 50%, 0.5)
Blau	hsl(240, 100%, 50%)	hsla(240, 100%, 50%, 0.5)
Gelb	hsl(60, 100%, 50%)	hsla(60, 100%, 50%, 0.5)
Türkis	hsl(180, 100%, 50%)	hsla(180, 100%, 50%, 0.5)

Tipps zur Arbeit mit HSL und HSLA

• HSL ist besonders nützlich für Farbanpassungen, da Farbton, Sättigung und Helligkeit unabhängig angepasst werden können.
• Verwenden Sie HSLA, wenn Sie überlappende, transparente Elemente benötigen.
• Mit HSL lassen sich einfach Farbvarianten wie hellere oder dunklere Schattierungen erstellen, indem Sie den Helligkeitswert ändern.

Häufig gestellte Fragen