HSB ist ein Farbmodell, das Farben nach Farbton, Sättigung und Helligkeit beschreibt, englisch hue, saturation und brightness. Es ist eine Umrechnung von RGB, die sich besser bedienen lässt: Der Farbton ist ein Winkel, Sättigung und Helligkeit sind Prozentwerte. Viele Farbwähler in Grafikprogrammen arbeiten damit.
- HSB
Ein Farbmodell, das Farben nach Farbton, Sättigung und Helligkeit beschreibt, wobei volle Helligkeit die reine Farbe ergibt.
Beispiel: „Im Farbwähler von Figma stellten wir HSB ein und schoben nur die Helligkeit nach unten.“Auch: HSV, hue, saturation, value.
Abgrenzung zu HSL: Dort ergibt volle Helligkeit Weiß, die reine Farbe liegt bei 50 Prozent.
Woher HSB kommt
Alvy Ray Smith veröffentlichte das Modell 1978 als HSV mit dem Bild eines sechsseitigen Kegels. Die Umrechnung lief da schon rund vier Jahre in Malprogrammen bei Xerox PARC. Value misst bei Smith, wie weit sich eine Farbe von Schwarz entfernt; deshalb haben Rot, Weiß und Gelb denselben Wert. Die Bezeichnung HSB nutzen etwa Java und Figma.
HSB und HSL im Vergleich
Beide Modelle teilen Farbton und Sättigung, rechnen die Helligkeit aber verschieden. In HSB steht jede reine Farbe bei 100 Prozent, in HSL ist 100 Prozent immer Weiß. Wer in HSB eine Farbe aufhellen will, senkt deshalb die Sättigung, in HSL hebt er die Helligkeit.
HSB in CSS: hwb()
CSS kennt kein hsv(). Am nächsten kommt hwb() mit Farbton, Weiß- und Schwarzanteil, seit April 2022 in allen großen Browsern. Smith und Lyons beschrieben 1996 die Umrechnung: Weiß ist (1 minus Sättigung) mal Helligkeit, Schwarz ist 1 minus Helligkeit. Laut CSS Color 4 sind alle diese RGB-Modelle aber deutlich ungenauer als LCH.
/* HSB 220°, 80 %, 90 % */
.button {
background: hwb(220 18% 10%);
}