Farbton, Sättigung, Helligkeit (HSB) einfach erklärt

Farbton, Sättigung und Helligkeit (HSB) beschreiben jede Farbe mit drei einfachen Reglern. Der Farbton sagt, welche Farbe es ist, angegeben als Winkel von 0 bis 360 Grad im Farbkreis. Die Sättigung sagt, wie intensiv sie ist, von Grau bei 0 Prozent bis voller Farbe bei 100 Prozent. Die Helligkeit sagt, wie viel Licht sie hat, von Schwarz bei 0 Prozent bis zur hellsten Version dieser Farbe bei 100 Prozent. Sobald du Farben so siehst, ist das Anpassen einer Palette kein Raten mehr.

Farbton: welche Farbe

Der Farbton ist die Position im Farbkreis. Auf Bildschirm-Farbkreisen liegt Rot bei 0 Grad, Grün bei 120 und Blau bei 240, mit Gelb, Cyan und Magenta dazwischen. Weil der Farbton ein Winkel ist, werden Farbharmonien zu einfacher Arithmetik: plus 180 Grad für eine Komplementärfarbe, plus 120 für eine Triade.

Sättigung: wie stark

Die Sättigung steuert, wie viel vom Farbton vorhanden ist. Senkst du sie, verblasst eine Farbe Richtung Grau; erhöhst du sie, wird die Farbe kräftig. Die meisten edlen Paletten liegen deutlich unter voller Sättigung. Voll gesättigte Farben schreien, und das passt zu einem Sale-Sticker, ermüdet aber auf einer ganzen Website. Gedämpfte Farbpaletten sind vor allem eine Geschichte geringerer Sättigung.

Helligkeit: wie viel Licht

In HSB gibt die Helligkeit an, wie stark die Farbe beleuchtet ist. Bei 0 Prozent ist jede Farbe Schwarz, egal welcher Farbton oder welche Sättigung. Bei 100 Prozent bekommst du die hellste Version, die der Bildschirm für diesen Farbton und diese Sättigung zeigen kann. Für ein blasses Pastell in HSB hältst du die Helligkeit hoch und senkst die Sättigung, was Weiß beimischt. Genau das ist die Idee hinter Aufhellungen, Abtönungen und Abdunklungen.

HSB vs. HSL: der Unterschied, über den alle stolpern

HSL sieht fast identisch aus: Farbton, Sättigung, Lightness. Der Farbton ist derselbe. Anders ist der dritte Regler. In HSL ist eine Lightness von 50 Prozent die reine Farbe, 0 Prozent Schwarz und 100 Prozent immer Weiß. In HSB ist eine Helligkeit von 100 Prozent bei voller Sättigung die reine Farbe, und Weiß erreichst du nur, wenn du zusätzlich die Sättigung senkst. Auch die Sättigungswerte unterscheiden sich zwischen beiden, dieselbe Farbe hat also jeweils andere Werte.

HSL in CSS nutzen

CSS versteht hsl() direkt, was es fürs Theming praktisch macht. Leg den Farbton in eine Variable, und du verschiebst die Farbe einer ganzen Oberfläche mit einer Zahl. Es gibt außerdem hwb() (Farbton, Weißanteil, Schwarzanteil), das HSB im Geist näher ist. Details stehen auf der MDN-Seite zu hsl(), und HSL-Farben geht weiter.

:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */

Warum gleiche Helligkeit nicht gleich aussieht

HSB und HSL sind Geometrie, keine Wahrnehmung. Reines Gelb und reines Blau liegen beide bei einer HSL-Lightness von 50 Prozent, doch Gelb wirkt viel heller: Nach der WCAG-Formel liegt seine relative Leuchtdichte bei etwa 0,93, die von Blau bei 0,07. Setz weißen Text auf beide, und der Unterschied ist offensichtlich. Deshalb kann eine Palette, deren HSL-Helligkeit in gleichen Schritten verläuft, holprig aussehen, und deshalb muss Textkontrast immer geprüft und nie angenommen werden.

Wahrnehmungsbasierte Modelle lösen das. OKLCH behält die freundliche Idee von Helligkeit, Buntheit und Farbton, aber seine Helligkeit folgt dem, was das Auge sieht, sodass Stufen gleichmäßig wirken. Für schnelle Anpassungen sind HSB und HSL perfekt; für eine Markenskala oder einen Verlauf ohne trübe Mitte greif zu OKLCH.

Schnelle Wege, eine Farbe mit HSB anzupassen

• Zu laut: Senk die Sättigung um 15 bis 25 Punkte, bevor du irgendetwas anderes anfasst.
• Zu stumpf: Erhöh die Sättigung leicht oder schieb den Farbton ein paar Grad wärmer.
• Hover-Zustand nötig: Senk die Helligkeit um etwa 10 Punkte.
• Hintergrundtönung nötig: Behalte den Farbton, senk die Sättigung kräftig und bring die Helligkeit nahe 100.
• Zwei Farben beißen sich: Rück einen Farbton näher an den anderen oder dämpfe eine der beiden.

Wenn du lieber mit einem fertigen Look als mit drei Reglern startest, kannst du im Markt von Gradiently Marks nach Farbwörtern wie „tiefes Petrol“ oder „warmer Pfirsich“ durchsuchen.