HSB (Hue, Saturation, Brightness) und HSL (Hue, Saturation, Lightness) sind alternative Beschreibungsweisen des RGB-Farbraums, die Farben intuitiv durch Farbton, Sättigung und Helligkeit definieren, anstatt durch technische Lichtkanalwerte.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Farbsysteme · Niveau: Einsteiger Synonyme / Auch bekannt als: HSV (Hue, Saturation, Value), HSI; englisch: HSB/HSL Color Model
Was sind HSB und HSL?
HSB und HSL sind keine eigenständigen Farbräume, sondern intuitivere Darstellungsformen des RGB-Farbmodells. Statt technischer Kanalwerte (R:255 G:128 B:0) beschreiben sie Farben so, wie Menschen über Farben nachdenken: Als Farbton (Hue), als Sättigung (wie intensiv?) und als Helligkeit (wie hell oder dunkel?). Dieses Modell wird von nahezu allen professionellen Design-Applikationen angeboten und ist besonders hilfreich beim Erstellen von Farbvarianten, -abstufungen und -harmonien.
Erklärung
Die drei Parameter:
H – Hue (Farbton): Gibt den reinen Farbton als Winkel auf dem Farbkreis an (0–360°): 0° = Rot, 60° = Gelb, 120° = Grün, 180° = Cyan, 240° = Blau, 300° = Magenta, 360° = wieder Rot. Ein Farbton-Wert allein beschreibt noch keine vollständige Farbe – er gibt nur an, welche Farbe (Rot, Grün, Blau usw.) gemeint ist.
S – Saturation (Sättigung): Gibt an, wie intensiv oder pur die Farbe ist (0–100 %). 100 % = volle Sättigung (leuchtend), 0 % = kein Farbanteil (Graustufe). Eine Farbe mit 50 % Sättigung wirkt „pasteller" oder „gebrochener".
B – Brightness / V – Value (Helligkeit/Wert bei HSB): Gibt an, wie hell die Farbe ist (0–100 %). 0 % = Schwarz, unabhängig von Farbton und Sättigung. 100 % + volle Sättigung = leuchtende Vollfarbe. 100 % + 0 % Sättigung = Weiß.
L – Lightness (Helligkeit bei HSL): Ähnlich wie B, aber mit anderem Verhalten: Bei HSL ist 50 % die volle Farbe, 0 % = Schwarz, 100 % = Weiß. HSL-Weiß ist bei L:100 (unabhängig von S und H), was es für Animationen und CSS besonders nützlich macht.
HSB vs. HSL:
- HSB (auch HSV): In Design-Tools wie Photoshop, Illustrator und Figma häufiger. „Brightness" beschreibt, wie viel Helligkeit die Farbe hat (schwarzes Limit nach unten).
- HSL: Standard in CSS/Web-Technologien. Symmetrischer Aufbau (Weiß oben, Schwarz unten, Vollfarbe in der Mitte bei L:50).
Praktischer Vorteil: HSB/HSL macht es einfach, Farbvarianten zu erstellen: Gleicher Hue + weniger Sättigung = Pastellton. Gleicher Hue + weniger Helligkeit = dunklere Variante. Das ist ideal für die Entwicklung von Farbsystemen (z. B. eine Primärfarbe in 9 Helligkeitsstufen).
Beispiele
- Farbpalette in Figma: Ein Designer wählt H:220° S:80% B:90% als Primärblau und erstellt durch Variation von S und B acht Abstufungen für ein Design-Token-System.
- CSS-Styling:
color: hsl(220, 80%, 60%)definiert in CSS eine Farbe direkt in HSL – ideal für dynamische Anpassungen per Variable. - Farbvariation in Photoshop: Über Bild → Anpassen → Farbton/Sättigung lassen sich Farbton, Sättigung und Helligkeit eines Fotos oder einer Ebene getrennt einstellen.
- Hover-Zustand in Sketch: Ein Button-Hover wird definiert, indem die gleiche Farbe mit 10 % reduzierter Helligkeit (B) angelegt wird.
- Farbharmonie in Procreate: Die Illustratorin wählt einen Farbton (H:30° = Orange) und erstellt analoge Töne, indem sie den Hue-Wert in 15°-Schritten variiert.
In der Praxis
In Figma findet sich der HSB-Picker im Farbwähler unter dem Reiter „HSB". Für CSS-basiertes Webdesign ist HSL besser geeignet, da es sich leicht mit CSS-Variablen kombinieren lässt: --color-primary-hue: 220; color: hsl(var(--color-primary-hue), 80%, 60%). In Photoshop kann der Farbwähler auf HSB umgestellt werden (Klick auf den Regler). Beim Erstellen von Design-Systemen empfiehlt sich, Farbpaletten über HSB zu definieren: gleicher Hue für alle Töne einer Familienfarbe, variierende S- und B-Werte für Abstufungen.
Vergleich & Abgrenzung
HSB und HSL sind keine eigenständigen Farbräume, sondern Transformationen des RGB-Raums. Sie beschreiben dieselben Farben wie RGB, nur auf intuitivere Weise. Im Gegensatz zum Lab-Farbraum (der perceptuell gleichmäßig ist) ist HSB/HSL nicht perceptuell gleichmäßig: Gleiche numerische Abstände in S oder B bedeuten nicht gleich wahrgenommene Farbunterschiede. Für präzises Farbmanagement und Konvertierungen ist Lab besser geeignet; für die tägliche Designarbeit ist HSB/HSL praktischer.
Häufige Fragen (FAQ)
Was ist der Unterschied zwischen HSB und HSV? HSB und HSV sind identisch – nur unterschiedliche Namen für dasselbe Modell. „B" steht für Brightness (Helligkeit), „V" für Value (Wert). Beide meinen den gleichen Parameter: wie hell oder dunkel eine Farbe ist, ausgedrückt als Prozentwert von 0 % (Schwarz) bis 100 % (volle Helligkeit). Adobe-Software verwendet typischerweise „B" für Brightness, andere Anwendungen nutzen „V" für Value.
Warum nimmt CSS HSL statt HSB? CSS verwendet HSL, weil es symmetrischer und berechenbarer für Webentwickler ist. Bei HSL liegt Weiß bei L:100 und Schwarz bei L:0, mit der vollen Farbe genau in der Mitte bei L:50. Das macht es einfach, programmatisch hellere und dunklere Varianten einer Farbe zu berechnen, ohne RGB-Konvertierungen durchführen zu müssen. Zudem lässt sich HSL gut mit CSS custom properties (Variablen) kombinieren, was dynamische Farbthemen (z. B. Dark Mode) vereinfacht.
Verwandte Einträge
Weiterführend
- Smith, Alvy Ray (1978): Color gamut transform pairs. In: Proceedings of the 5th annual conference on Computer graphics. ACM, New York.
- Poynton, Charles (2012): Digital Video and HD: Algorithms and Interfaces. Morgan Kaufmann, Burlington.
- Mozilla Developer Network (2024): hsl() – CSS Farbreferenz. https://developer.mozilla.org/de/docs/Web/CSS/color_value/hsl
