Popstar in HSL-Farben

Zwischendurch etwas Ausserthematisches.

Wenn der grösste Popmusiker seit Ludwig van Beethoven nach Zürich kommt, lass ich mir das natürlich nicht entgehen. Im Gegenteil: In infantiler Vorfreude habe ich eine Fan-Seite gestaltet. Hier geht’s zur Fan-Seite

Aus technischer Sicht ist die wechselnde Hintergrundfarbe interessant. Pro Sekunde wird der Farbkreis um 5 Grad gedreht. Das ist natürlich nur möglich, wenn die Farbe nicht mit der RGB-Methode definiert wird, sondern mit HSL, wo die Farbton (H) direkt gesetzt und mittels Javascript entsprechend manipuliert werden kann. Die beiden weiteren Parameter bei HSL sind die Sättigung (S), die zwischen 0% (grau) und 100% (super-farbig) liegt, und der Helligkeit (L), welche zwischen 0% (dunkel / schwarz) und 100% (hell / weiss) gesetzt wird.

Alle Browser können mit HSL-Angaben umgehen, der Internet Explorer erst ab Version 9.

Beispiele für HSL-Farben

/* 240 = blau, 
   100% = voll farbig, 
    50% = weder heller noch dunkler gemacht
*/
div.hslbox1 { background: hsl(240, 100%, 50%); }  

/* 0 = rot, 
   30% = ziemlich grau (entsättigt), 
   80% = ziemlich hell (pastellig)
*/
div.hslbox2 { background: hsl(0, 30%, 80%); }  

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *