Farbrechner – HSL, HSV, RGB und Hex umrechnen

CSS color: HSL umrechnen

HSL- und HSV-Farben sind intiuitiver für das Webdesign als RGB oder Hex. Aber Photoshop HSV ist nicht CSS HSL und HSL in Inkscape tut nur so, als wäre es 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.

HSB oder HSL?

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 Voraussagen: H-Werte 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 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.

Kein korrekter HSL-Wert: Drei Werte für H, S und L, trennen durch Leerzeichen, Eingabe mit Return
Kein korrekter HSV-Wert: Drei Werte für H, S und Value, trennen durch Leerzeichen, Eingabe mit Return
Kein korrekter RGB-Wert: Drei Werte für Rot, Grün und Blau, trennen durch Leerzeichen, Eingabe mit Return
Kein korrekter HEX-Wert: Dreistelliger oder sechsstelliger Wert für HEX (ohne "#"), Eingabe mit Return

Mit CSS-Variablen lassen sich die Töne der Palette zentral anlegen und ändern, z.B. eine eigene Farbpalette für den Gutenberg-Editor.

: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.

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.

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.

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 % % % %