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.

RGB ist der Farbraum der digitalen Geräte, aber die drei Werte einer RGB-Farbe Man sagt auch: Die Anteile von Rot, Grün und Blau in einer RGB-Farbe korrelieren. D.h., wir können die die Helligkeit und die Sättigung einer Farbe nicht ändern, ohne dabei auch die Anteile der beiden anderen Farben zu ändern.

Nehmen wir z.B. einen relativ satten Orangeton und denselben helleren Farbton

Die RGB-Werte sind RGB(233,152,22). Die RGB-Werte für ein helleres Orange sind RGB(243,205,129). Die Anteile von Grün und Blau haben sich deutlich geändert. Farbangaben in HSL oder HSV bzw. HSB sind intuitiver und trennen Farbton, Helligkeit und Sättigung.

HSL – HUE, SATURATION, LIGHTNESS

Wir beschreiben und unterscheiden Farben anhand von drei Merkmalen: der Farbe, ihrer Sättigung und ihrer Helligkeit.

Farben beschreiben wir mit Namen wie Rot, Grün, Gelb und Blau.

Die Sättigung oder Reinheit der Farbe ist der Anteil von Weiß in der Farbe. Hochgesättigte Farben wie der Kreis auf der linken Seiten enthalten kein oder wenig weißes Licht.

Die Helligkeit ist der Anteil des reflektieren Lichts.

Sowohl HSL als auch HSB- bzw. HSV-Farbmodelle sind eine einfache Transformationen des RGB-Modells.

Die Helligkeitskomponente des HSL-Modells ist das arithmetische Mittel der kleinsten und der größten RGB-Komponente.

L = maxrgb + minr g b 2

Reines Rot mit rgb(255,0,0) hat im HSL-Modell die (ungewichtete) Helligkeit 50%.

Transformation von RGB zu HSL oder HSV / HSB
Der RGB-Würfel wird auf die schwarze Ecke gedreht. Im ersten Schritt entsteht eine Projektion des Würfels (als würde der Würfel einen Schatten nach unten werfen), im nächsten Schritt wird das aufgespannte Sechseck in einen Kreis projiziert.

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.

HUE (Farbton) ist ein Winkel zwischen 0 bis 360° im Farbrad, auf dem der gesamte Farbkreis abgetragen ist. 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.

Die Farbwahl im HSL (Farbton, Sättigung, Helligkeit) 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
Lightness Helligkeit

Das W3C – das Komitee, das die Standards für Webseiten (HTML, CSS, Javascript) festlegt, hat für die Notation von Farben in CSS (Stylesheets) HSL als weitere Option neben RGB und Hex eingeführt.

HSV und HSB

HSV und HSB sind zwei Namen für dasselbe Farbmodell, das sich allerdings vom HSL-Modell leicht unterscheidet. Unglücklicherweise übersetzen wir sowohl Brightness als auch Lightness mit »Helligkeit«.

HSB-Farbwähler in Photoshop: Das Farbfeld zeigt die Farbe und die Helligkeit (von oben links nach unten rechts). Die dritte Dimension – HUE – liegt im linearen Band rechts neben dem Farbfeld.

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.

Das B oder V im HSB-Farbmodell entspricht der größten RGB-Komponente.

B = maxrgb

Das reine Rot rgb(255,0,0)hat einen Helligkeitswert von 100%.

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

  • Das Zusammenstellen einer Farbpalette im HSB-Modell ist ebenso intuitiv wie bei HSL-Farben, da die Beziehungen zwischen den Farben sichtbar sind.
  • Die Sättigung-Komponente beschreibt die Intensität bzw. Brillanz der Farbe. Eine Sättigung von 0 steht für »keine Farbe«, also Grau.

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
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 120° 120°