CSS, HTML und Javascript mit {stil}

Farbrechner für HSL und HSV

Photoshop HSB ist nicht CSS HSL – Unterschiede und umrechnen

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

Das W3C hat sich für den HSL-Farbraum entschieden. 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 denselben Farbton, aber eine andere Sättigung und eine andere Helligkeit, wenn die Werte in CSS als HSL übernommen werden.

HSB Farbwähler in Adobe Photoshop
HSB (300,18%,78%)
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 und Farbdifferenzen 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)
Hex
background
#
#

HSL in Inkscape

Wer SVG-Grafiken in Inkscape anlegt, hat vielleicht schon festgestellt, dass in Inkscape Farben, Sättigung und Helligkeit bei HSL-Angaben zwischen 0 und 255 legt – was natürlich nicht dem Standards (HUE zwischen 0-360, Saturation 0-100, Lightness 0-100). Inkscape unterstützt weder den HSL- noch den HSB-Farbraum, sondern stellt einen Farbwähler zur Verfügung, der so tut, als wäre er etwas Ähnliches wie HSL oder HSB.

# HSB Farbwähler in Adobe Photoshop Farbwähler (Vordergrundfarbe) H: S: B: ° % % neu aktuell OK Abbrechen Zu Farbfeldern hinzufügen Farbbibliotheken 211 44 60 R: G: B: 211 44 60 L: a: b: 71 18 -13 C: M: Y: 24 41 5 #c7a3c7 K: 0 % % % %