Ein kleines! Lexikon des Internet Werbung

HSL: Hue, Saturation, Lightness @ Ein kleines! Lexikon des Internet


Erklärung | Weiterführende Links | Finden | Navigation

Ansichten: Bildschirm   Druck   ohne

HSL

Hue, Saturation, Lightness

Farbton, Farbsättigung, Helligkeit

ist ein Farbmodell, das u. a. für das Bestimmen der Farbe in CSS über eine gleichnamige Funktion angewendet wird.
Neben RGB ist HSL eine Funktion für die Angabe der Farbwerte für Schrift/Vordergrund, Hintergrund, Rahmen usw. Das Modell ist eine Variante der HSV-Farbmodelle (a).

Anmerkung: Die Gestaltung und die Farben werden mit CSS Level 3 erzeugt. Sollten Sie also keine Farben sehen, unterstützt Ihr Browser dies nicht oder Sie haben CSS deaktiviert. Getestet mit: Firefox ab 5.0, Opera, Chrome ab 12, jeweils unter MS Windows.

Die Funktion hsl erwartet drei Parameter, den Farbton, die Farbsättigung und die Helligkeit. Das Modell sieht die Farbtöne auf einem Kreis, auf dem bei 0° per Defi­ni­tion die Farbe rot, bei 120° grün und bei 240° blau liegt. Für den Farbton wird diese Grad­zahl (ohne Grad-Zeichen °) an­ge­geben. Werden Zahlen größer als oder gleich 360 oder kleiner als 0 eingegeben, werden sie durch die Formel (((x mod 360) + 360) mod 360) auf einen gültigen Wert umgerechnet (mod = Modulo (b), Rest einer Division).

Die Farb­sätti­gung wird mit einer Pro­zent­zahl von 0% für eine Vari­ante von grau bis 100% für volle Sätti­gung be­schrie­ben. Die nor­male Farbe wird mit 50% ange­geben. Die Hellig­keit ist ein Prozent­wert von 0% für schwarz bis 100% für weiß. Farb­sättigung und Hellig­keit werden jeweils mit Pro­zent­zeichen geschrieben.

Die Farbe rot (RGB: #F00) ist hsl(0, 100%, 50%), grün (RGB: #0F0) hsl(120, 100%, 50%) und blau (RGB: #00F) hsl(240, 100%, 50%). Weiß wird mit hsl(0, 0%, 100%) und schwarz mit hsl(0, 0%, 0%) erreicht, die Grau­stufen durch Ab­stu­fungen der Hellig­keit.

Eine gültige Farbdefinition mit HSL-Funktionen für ein DIV-Element in HTML sieht so aus:
<div style="
color: hsl(0, 0%, 0%) /*black*/;
background: hsl(240, 100%, 99%) /*ghostwhite*/;
border: 1px dotted hsl(120, 73%, 75%) /*lightgreen*/;
">
Eine gültige Farbdefinition mit ...
</div>
Die Farben des Kreises (h: 0 - 360, s: 100%, l: 50%)
360° = 0°
 
Farbsättigung (h: 0, s: 0% - 100%, l: 100%)
0% 100%
 
Helligkeit (h: 0, s: 100%, l: 0% - 100%)
0% 100%
 
Grauwerte (h: 0, s: 0%, l: 0% - 100%)
0% 100%
 

Als Variante wird mit CSS3 die Funktion hsla(h, s, l, a) mit einer Angabe des Alpha-Kanals für Transparenz eingeführt. Zulässige Werte für a sind zwischen 0.0 und 1.0, wobei 0.0 völlige und 1.0 ohne Transparenz bedeutet.
So sind hsl(0, 100%, 50%)    und hsla(0, 100%, 50%, 1)    identisch.

Transparenz (h: 0, s: 100%, l: 50%, a: 0.0 - 1.0)
0 1
 

Kleine! Tools

CSS- und SVG-Farbnamen

Weiterführende Links

 (a) [HSV-Farbraum
 - http://de.wikipedia.org/wiki/HSV-Farbraum
]
@ Wikipedia
 (b) [Division mit Rest Modulo
 - http://de.wikipedia.org/wiki/Modulo#Modulo
]
@ Wikipedia