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 Definition die Farbe rot, bei 120° grün und bei 240° blau liegt. Für den Farbton wird diese Gradzahl (ohne Grad-Zeichen °) angegeben. 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 Farbsättigung wird mit einer Prozentzahl von 0% für eine Variante von grau bis 100% für volle Sättigung beschrieben. Die normale Farbe wird mit 50% angegeben. Die Helligkeit ist ein Prozentwert von 0% für schwarz bis 100% für weiß. Farbsättigung und Helligkeit werden jeweils mit Prozentzeichen 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 Graustufen durch Abstufungen der Helligkeit.
<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>
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.
Hue ist die englische Übersetzung für "Farbton". Daher hat sich Philips auch für seine farbenwechselnden Leuchtmittel für diesen Begriff entschieden um bei einem Produkt wie der Stehlampe den Effekt der unterschiedlichen Darstellungsmöglichkeiten der Farbtöne bei diesen Lampen hervorzuheben. Durch die Integration in ein Smart Home Konzept können diese Lampen auch über das Internet gesteuert werden um Unterwegs Licht im Haus ein- oder auszuschalten.
Kleine! Tools
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