CSS, HTML und Javascript mit {stil}

Farbrechner für HSL und HSV

CSS Farbrechner: rgb nach hex, nach HSL und zu Farbnamen

Bildbearbeitungsprogramme wie Adobe Photoshop bereiten uns eine kleine Überraschung, wenn wir Farben im HSB-Farbraums ausgesucht haben:

HSB und der HSL-Farbraum in CSS sind sich sehr ähnlich, aber doch eben nicht gleich.

Man kann lange darüber diskutieren, ob sich nun HSB oder HSL besser an das menschliche Verständnis von Farbe anlehnen, allenfalls könnte man ins Feld führen, dass HSL Sättigung und Helligkeit besser trennt.

Auf der anderen Seite wiederspricht es unserem Farbverständnis, dass im HSL-Farbraum selbst extrem helle Farben eine hohe Sättigung aufweisen können …

HSL ist nicht HSB

Auf jeden Fall aber hat sich das W3C für den HSL-Farbraum entschieden und wer das "B" im Photoshop-Farbwähler übersieht (und was in aller Welt ist der Unterschied zwischen »Lightness« und »Brightness«?), bekommt mit den HSB-Werten aus Photoshop ein anderes Rot, wenn die Werte in CSS als HSL übernommen werden.

HSB (300,18%,78%) ist
HSL(300,24%,71%)
HSL(300,18%,78%) ist nicht HSB (300,18%,78%)

Der Color-Picker in Mac sagt gar nicht erst, ob er auf der Seite von HSL oder auf der Seite von HSB steht …

hsl(51,100%,50%)
hsb(51,100%,50%)

Um das Chaos rund den Farbkreis noch etwas zu kitzeln, wird der HSB-Farbraum auch schon mal als »HSV« bezeichnet.

Nicht nur Photoshop-Benutzer, sondern auch Web-Anwendungen verwechseln HSB und HSL, so dass es zu sichtbaren Unterschieden zwischen den Farben kommt. Der Farbwähler von Mac OS nutzt HSB, jQuery-Color-Picker nutzen ebenfalls meist HSB, aber reden nicht drüber.

RGB
HSL (WEB)
HSB (Photoshop)
background
#
#

Wer SVG-Grafiken in Inkscape anlegt, hat vielleicht schon festgestellt, dass in Inkscape Farben im HSL-Farbraum nur zwischen 0 und 100 liegen, in CSS aber zwischen 0 und 360. Inkscape unterstützt weder den HSL- noch den HSB-Farbraum, sondern stellt nur einen Farbwähler zur Verfügung, der so tut, als wäre er so etwas Ähnliches wie HSL oder HSB.