Über HSL-Farbe

HSL-Farbe ist ein Farbmodell, das Farben mit Farbton, Sättigung und Helligkeit darstellt. Anders als RGB, das die Stärke von rotem, grünem und blauem Licht direkt angibt, trennt HSL Farbton, Farbigkeit und Helligkeit und ist daher nützlich für Farbanpassungen und CSS-Design.

Zum Beispiel lassen sich wichtige Farben wie Rot wie folgt darstellen.

Um Transparenz einzuschließen, fügen Sie einen Alphawert hinzu. Halbtransparentes Rot kann zum Beispiel als hsl(0deg 100% 50% / 0.5) dargestellt werden.

Als Eingabe können Sie die durch Leerzeichen getrennte Schreibweise hsl(0deg 100% 50%) sowie die ältere durch Kommas getrennte Schreibweise hsl(0deg, 100%, 50%) verwenden.

Umgang mit Farbton, Sättigung und Helligkeit

Der Farbton wird als Winkel behandelt; Werte über 360deg und negative Werte werden auf den Bereich von 0deg bis 360deg normalisiert. Zum Beispiel wird hsl(360deg 100% 50%) als dieselbe Farbe wie hsl(0deg 100% 50%) behandelt, und hsl(-120deg 100% 50%) als dieselbe Farbe wie hsl(240deg 100% 50%).

Sättigung und Helligkeit werden im Bereich von 0% bis 100% behandelt. Bei 0% Sättigung wird die Farbe unabhängig vom Farbton zu einem unbunten Grau. Bei 0% Helligkeit ist die Farbe Schwarz, bei 100% Weiß.

Unterschied zwischen HSL und RGB

RGB gibt die roten, grünen und blauen Komponenten direkt an und liegt damit nahe an Bildschirmdarstellung und Bilddaten. HSL trennt Farbton, Sättigung und Helligkeit, sodass Anpassungen wie „bei gleichem Farbton heller machen“ oder „nur die Sättigung verringern“ einfacher sind.

HSL ist jedoch kein vollständig wahrnehmungsgleichmäßiger Farbraum. Wenn visuelle Helligkeit oder Farbabstände leichter behandelt werden sollen, werden Farbräume wie Lab, LCH, Oklab oder Oklch verwendet.