HSB oder HSL?
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 …
Farben umrechnen
HSL-Farben lassen sich vorhersagen: H-Werte (Hue, Farbton) zwischen 0 und 30 liefern Rot, ab 30 wird's Orange, bis 60 Gelb. Grün reicht von 60 bis etwa 150, dann folgt Blau bis 270 und das Schlusslicht bei hohen Werte für H bilden die violetten und purpurnen Töne.
Größere Werte für Lightness hellen den Farbton auf, intensive reinere Farben entstehen bei einer hohen Sättigung.
Der HSL-Farbwähler macht die Kombination von Farben – z.B. für eine Farbpalette – einfach. Grundfarbe aussuchen, mit dem Lightness-Slider die Helligkeit regeln und drei oder mehr Farben gleicher Sättigung und Helligkeit bilden eine harmonische Palette.
Mit CSS-Variablen lassen sich die Töne der Palette zentral anlegen und ändern, z.B. für eine eigene Farbpalette im Gutenberg-Editor von WordPress.
:root {
--me-maxwidth: 1440px;
--me-darkrose: hsl(353,42%,66%);
--me-smartrose: hsl(353,32%,73%);
--me-rosig: hsl(13,81%,87%);
--me-cyan: hsl(189,38%,70%);
--me-lightcyan: hsl(189,38%,89%);
}
.has-darkrose-color { color:var(--me-darkrose) }
.has-darkrose-background-color { background-color:var(--me-darkrose) }
.has-smartrose-color { color:var(--me-smartrose) }
.has-smartrose-background-color: { background-color:var(--me-smartrose) }
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.
Der Color-Picker in Mac sagt gar nicht erst, ob er auf der Seite von HSL oder auf der Seite von HSB steht …
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.
