HSB/HSV und HSL-Farbmodell

A. R. Smith entwickelte 1978 das Hue/Saturation/Value-Model. Es basiert auf drei Merkmalen von Farben, die für uns besonders intuitiv sind:

Farbton (rot, gelb, grün …)
Sättigung (brillant oder matt?)
und Helligkeit (hell oder dunkel?).

HSB/HSV- und HSL-Farbmodell sind einfache Transformationen des RGB-Farbraums, die unserem Farbsehen besser entgegen kommen als der RGB-Farbraum der digitalen Geräte.

Das HSL-Farbmodell zeigt Farben anhand eines Kreises, in dem die Farben von außen nach innen immer weniger gesättigt sind. Auf dem Rand des Kreises liegen die Farbtöne (HUE) im Abstand zwischen 0 bis 360. Auf dem Monitor brauchen wir einen zusätzlichen Regler für die Helligkeit als dritte Dimension.

Die Farbwahl im HSL erleichtert dem Designer das Zusammenstellen von Farbpaletten – z.B. Farben gleicher Sättigung oder Farben gleicher Helligkeit oder die Wahl eines dunklen Tons derselben Farbe als Kontrast. Mit Farbmodellen wie RGB oder CMY muss sich der Designer hingegen voll und ganz auf sein Farbsehen verlassen.

0153045607590105120135150165180195210225240255270285300315330345

HSV und HSB sind zwei Namen für dasselbe Farbmodell. HSL ist hingegen anders aufgebaut. Unglücklicherweise übersetzen wir sowohl Brightness als auch Lightness mit »Helligkeit«.

HSB bzw. HSV finden wir z.B. im Farbwähler von Adobe Photoshop oder im Color Picker von Mac OS. Beim Design von Webseiten hingegen werden Farben als HSL angegeben.

HSB und HSL für Grafiker und Designer

Im HSB- und HSL-Farbmodell müssen wir nichts über die Anteile von Rot, Grün oder Blau in einer Farbe zu wissen, um eine Farbe zu mischen oder zu ändern.

Sowohl HSL (Hue, Saturation, Luminance) und HSB (Hue, Saturation, Brightness) sind dreidimensionale Farbmodelle mit einem Farbrad. Am Rand des Farbrads liegen die puren gesättigten Farben.

  • HUE (Farbton) ist ein Winkel zwischen 0 bis 360° im Farbrad, auf dem der gesamte Farbkreis abgetragen ist. Die Werte 0 und 360° stehen für das reine Rot, 120° für Grün, 240° für Blau.
  • Das Zusammenstellen einer Farbpalette im HSB-Modell ist intuitiv, da die Beziehungen zwischen den Farben sichtbar sind.
  • Die Sättigung-Komponente beschreibt die Intensität der Farbe. Eine Sättigung von 0 steht für »keine Farbe«, also Grau.

Ziehen wir einen Vektor vom zentralen Punkt des Dreiecks zum Farbpunkt P, dann ist Hue (H) der Winkel des Vektors in Hinsicht auf die rote Achse. Der Winkel 0° entspricht Rot, 60° Gelb, 120° Grün. Die Sättigung (S) ist der Grad, in dem die Farbe nicht von Weiß verwässert wird und ist proportional zur Distanz vom Zentrum des Dreiecks.

photoshop-hsb-farbwaehler
HSB-Farbwähler in Photoshop

Unterschied zwischen HSB und HSL

Sowohl HSB als auch HSL sind nichtlineare Transformationen eines bestimmten RGB-Farbraums (was hier eines bestimmten RGB-Farbraums bedeutet? Na, denken wir mal an sRGB und AdobeRGB!), so dass beide Farben nicht absolut messen können.

Die Farbmodelle HSB und HSL basieren auf einem Farbrad. Aber ein passendes geometrisches Modell für HSL wäre eine Farbkugel (wo HSV als Zylinder dargestellt wird) oder ein doppelter Farbkegel.

Im HSB-Farbkegel nehmen die Farben mit dem Wert ab. Im HSL-Kegel ebenfalls, aber das Maximum an Farben liegt nicht auf der maximalen Helligkeit, sondern bei 50% (in der Mitte des doppelten Kegels).

Wenn wir vom Farbkreis ausgehen, können wir uns HSB und HSV als übereinander gestapelte Farbkreise von variierender Helligkeit vorstellen.

Alle Farbkreise haben denselben Umfang und bilden einen Zylinder oder – ebenso gut – mit kleiner werdenden Umfang hin zum Schwarz.

Der Zylinder ist die korrekte Vorstellung, aber die Form eines Kegels ist intuitiver, da alle Farben mit wachsender Dunkelheit gegen Schwarz konvergieren.

HSB – Transformation eines RGB-Farbraums

Im HSB-Farbraum ist die maximale Sättigung am Rand des Farbkreises nicht unbedingt eine reine Farbe oder Spektralfarbe. HSB ist eine alternative Darstellung eines gegebenen RGB-Farbraums und die gesättigten Farben des HSB sind die Farben des entsprechenden RGB-Dreiecks im Chromaticity-Diagramm.

Aus diesem Grund wird das HSB-Farbsystem als geräteabhängig bezeichnet. HSB ist also kein absoluter Farbraum, sondern hat ein Gamut wie der RGB-Farbraum, den der HSB-Farbraum beschreibt.

HSL oder HSB?

Welcher von beiden Farbräume entspricht unserer Farbempfindung besser? Erst einmal HSL, da HSL eine vollständig unabhängige Darstellung von Sättigung und Helligkeit erlaubt.

Die Intensität entspricht der Luminanzkomponente V des YUV-Modells. HUE gibt die dominante Wellenlänge einer Mischung von Lichtwellen wieder, also die dominante Farbe, so wie sie vom Beobachter empfunden wird. Die Sättigung beschreibt die Reinheit des Farbtons (wie viel weißes Licht enthält der Farbton?).

  • Die Intensität wird von der Farbinformation getrennt
  • Die Komponenten Hue und Saturation sind eng mit dem menschlichen Farbsehen verwandt.

Aber im HSL gibt es sehr helle Farben, die immer noch hoch gesättigt sind – was unserem Farbempfinden widerspricht.

powderblue + rebeccapurple
salmon + cadetblue
hsl(160,100%,90%) + hsl(50,100%,90%)
Der erste Kreis zeigt helle, aber hochgesättigte Farben. Wir würden die beiden hochgesättigten Farben als hell bezeichnen – ohne den Sättigungsgrad zu bemerken.
1260 px
1387