HSB und HSL, intuitive Farbmodelle für Designer und UX-Profis

HSB (Hue, Saturation, Brightness) und HSL (Hue, Saturation, Lightness) sind alternative Beschreibungsformen des RGB-Farbraums, die Farben durch menschlich intuitive Parameter, Farbton, Sättigung und Helligkeit bzw. Lichtstärke, kodieren.

Rubrik: Grundlagen der Gestaltung · Unterrubrik: Farbsysteme & Farbräume · Niveau: Einsteiger Synonyme / Auch bekannt als: HSV (Hue, Saturation, Value), HSI (Hue, Saturation, Intensity); englisch: HSB Color Model, HSL Color Model, Cylindrical Color Models

Was sind HSB und HSL?

HSB und HSL sind keine eigenständigen Farbräume im physikalischen Sinne, sondern alternative mathematische Darstellungen des RGB-Modells. Statt Farben als Kombination von drei Lichtwerten (Rot, Grün, Blau) zu beschreiben, nutzen sie Parameter, die der menschlichen Farbwahrnehmung nahekommen: Welcher Farbton ist es? Wie gesättigt ist er? Wie hell oder dunkel wirkt er? Diese Beschreibungsweise macht es Designern deutlich leichter, gezielt Farbanpassungen vorzunehmen, etwa einen Ton heller zu machen, ohne Farbton und Sättigung zu verändern.

Erklärung

HSB (Hue, Saturation, Brightness), auch HSV genannt: Das HSB-Modell stellt Farben als Zylinder dar. Die drei Parameter:

• Hue (Farbton): Winkelwert von 0° bis 360° auf dem Farbkreis. Rot = 0°/360°, Gelb = 60°, Grün = 120°, Cyan = 180°, Blau = 240°, Magenta = 300°.
• Saturation (Sättigung): 0 % = Graustufe (kein Farbanteil), 100 % = vollständig gesättigte Farbe ohne Weißanteil.
• Brightness/Value (Helligkeit): 0 % = Schwarz (unabhängig von Farbton und Sättigung), 100 % = maximale Helligkeit des Farbtons.

HSB eignet sich besonders gut, wenn man ausgehend von einer gesättigten Farbe dunklere Töne ableiten möchte (Brightness reduzieren) oder eine Farbe entsättigt (Saturation reduzieren).

HSL (Hue, Saturation, Lightness): HSL verwendet denselben Farbton-Parameter wie HSB, unterscheidet sich aber in Sättigung und Helligkeit:

• Hue (Farbton): identisch mit HSB, 0°–360°.
• Saturation (Sättigung): beschreibt den Abstand zur Grauachse anders als in HSB, bei L=50 % entspricht S=100 % der reinen Farbe; bei L=0 % oder L=100 % ist immer Schwarz bzw. Weiß, unabhängig von S.
• Lightness (Lichtstärke): 0 % = Schwarz, 50 % = vollständig gesättigte Reinfarbe, 100 % = Weiß.

In HSL liegt die vollständig gesättigte Reinfarbe bei L=50 %, in HSB bei B=100 %. Das ist der wichtigste Unterschied: HSL ist symmetrisch (Weiß und Schwarz je an einem Ende), HSB ist asymmetrisch.

Praktischer Unterschied zwischen HSB und HSL:

HSB ist in Grafikprogrammen (Photoshop, Illustrator) häufiger anzutreffen, HSL ist der Standard in CSS und Figma.

Umrechnung zu RGB: Beide Modelle sind mathematisch eindeutig in RGB umrechenbar und zurück. Die Umrechnung ist bijektiv (verlustfrei), da sie nur eine andere Darstellung desselben RGB-Werts ist. Kein Qualitätsverlust entsteht beim Wechsel zwischen den Notationen.

Grenzen beider Modelle: HSB und HSL sind perceptuell nicht gleichförmig, d. h., eine gleiche numerische Änderung des Farbtons an verschiedenen Stellen des Farbkreises führt zu sehr unterschiedlichen wahrnehmbaren Unterschieden. So wirken Änderungen im Gelb-Bereich viel dramatischer als im Blau-Bereich. Für perceptuell gleichförmige Anpassungen eignen sich besser der Lab-Farbraum (CIELAB) oder das LCH-Modell (Lightness, Chroma, Hue).

HSL in CSS und Web-Design: CSS unterstützt HSL nativ: hsl(220, 90%, 56%) ist ein mittelhelles, gesättigtes Blau. Tints (Aufhellung) werden mit hohem L-Wert erzeugt, Shades (Abdunkelung) mit niedrigem L-Wert, was das systematische Erstellen von Farbpaletten in Stylesheets vereinfacht. Mit CSS Custom Properties (Variablen) lassen sich Themes kompakt verwalten: --hue: 220; color: hsl(var(--hue), 80%, 50%).

Beispiele

1. Farbpalette in Figma erstellen: In den Farbeinstellungen auf HSL umschalten. Für eine konsistente Palette Farbton konstant halten (z. B. H=220), Sättigung bei 80 % fixieren und Lightness von 20 % (dunkel) bis 90 % (hell) variieren, so entsteht eine 9-stufige, harmonische Blaupalette.
2. Farbton-Verschiebung in Photoshop: Bild → Anpassungen → Farbton/Sättigung nutzt HSL-Parameter. Mit dem Hue-Regler lässt sich der Farbton des gesamten Bilds oder einzelner Farbkanäle gezielt verschieben (z. B. +30° = Verschiebung Richtung Warm).
3. Hover-Effekte in CSS: Aus einer Basisfarbe hsl(200, 80%, 50%) wird ein Hover-State mit hsl(200, 80%, 40%) (dunklere Lightness), konsistent ohne manuelles RGB-Nachrechnen.
4. Brand Colors variieren in Adobe Illustrator: Für helle Varianten einer Brandfarbe S reduzieren oder B erhöhen, ohne den Farbton (H) zu verstellen. Praktisch für Infografiken mit Tönungs-Hierarchien.
5. UI-Farbsystem in Tokens Studio (Figma-Plugin): Design-Tokens werden als HSL-Werte definiert, primary-500: hsl(210, 100%, 50%), und über alle Varianten (100–900) durch Anpassung von L generiert, was ein vollständiges, konsistentes Farbsystem aus einem einzigen Hue-Wert erzeugt.

In der Praxis

Adobe Photoshop: Im Farbwähler oben rechts auf „H" (Hue) klicken, dann wird die Farbe nach HSB angezeigt. Unter Bild → Anpassungen → Farbton/Sättigung können H, S und L für das gesamte Bild oder einzelne Farbbereiche angepasst werden, nützlich für Batch-Retusche und stilistische Anpassungen. Das Keyboard-Shortcut Strg/Cmd+U öffnet den Dialog direkt.

Figma: Im Farbpanel auf das Dropdown-Menü klicken und zwischen „HEX", „RGB", „HSL", „HSB" und „CSS" wechseln. Der Color Picker zeigt standardmäßig HSB als Hauptansicht (Quadrat mit Brightness-Achse und Sättigungs-Gradient). HSL ist besonders nützlich, wenn man Code-Farben und Design-Farben synchron halten möchte.

Adobe Illustrator: Fenster → Farbe öffnen, dort das Flyout-Menü (drei Linien oben rechts) und „HSB" wählen, nun können Farbton, Sättigung und Helligkeit separat gesteuert werden, ohne RGB-Werte manuell zu berechnen.

Vergleich & Abgrenzung

HSB/HSL vs. RGB: RGB ist die mathematische Grundlage, HSB/HSL sind Benutzeroberflächen-Modelle darüber. Beide beschreiben exakt denselben Farbraum (sRGB), nur mit anderen Parameternamen. Für Entwickler ist RGB direkter; für Designer ist HSB/HSL intuitiver.

HSB/HSL vs. Lab: Lab ist geräteunabhängig und perceptuell gleichförmig, d. h. gleichmäßige Schritte im Lab-Raum sehen für das Auge gleich groß aus. HSB/HSL hat keine solche Eigenschaft. Für wissenschaftliche Farbarbeit oder barrierefreie Kontrast-Analysen ist Lab oder LCH besser geeignet.

HSB vs. HSL: In der Praxis: HSB eignet sich gut für das Erstellen von Schattentönen (B reduzieren), HSL für das Erstellen von Pastelltönen (L erhöhen). Figma und CSS nutzen HSL; Photoshop und Illustrator nutzen HSB. Beides kann verlustfrei konvertiert werden.

Häufige Fragen (FAQ)

Warum heißt HSV manchmal HSB und manchmal HSV? HSV (Value) und HSB (Brightness) sind identische Modelle, nur unterschiedliche Bezeichnungen für denselben dritten Parameter. „Value" ist die in der Fachliteratur und Programmierung häufigere Bezeichnung (eingeführt von Alvy Ray Smith 1978), „Brightness" ist die in Grafikanwendungen wie Photoshop gebräuchlichere Form. Beide Begriffe beschreiben denselben mathematischen Algorithmus und sind vollständig austauschbar.

Kann ich mit HSL wirklich alle sRGB-Farben beschreiben? Ja, vollständig. HSL ist eine mathematisch bijektive (umkehrbar eindeutige) Transformation des RGB-Farbraums. Jede RGB-Farbe hat genau einen entsprechenden HSL-Wert und umgekehrt. Einzige Ausnahme: Graustufen (S=0) haben keinen definierten Farbton (H ist mathematisch undefined oder 0° per Konvention), da es keinen Farbanteil gibt, der einen Winkel auf dem Farbkreis bestimmt.

Verwandte Einträge

• RGB-Farbraum (additiv)
• Lab-Farbraum, geräteunabhängige Farbe
• Gamut, Farbumfang und Gamut-Mapping
• Farbtiefe (8-bit, 16-bit, 32-bit)

Weiterführend

• Smith, Alvy Ray (1978): „Color Gamut Transform Pairs". In: ACM SIGGRAPH Computer Graphics, 12(3), S. 12–19.
• Fairchild, Mark D. (2013): Color Appearance Models. 3. Aufl. Wiley-IS&T. ISBN 978-1-119-96776-4.
• Sharma, Gaurav (Hrsg., 2003): Digital Color Imaging Handbook. CRC Press. ISBN 978-0-8493-0900-7.
• Mozilla Developer Network (2024): HSL Colors in CSS.