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

[Canonical HTML page](https://gradiently.design/de/guide/hue-saturation-brightness)

Hex-Codes sind für Maschinen. Farbton, Sättigung und Helligkeit sind die Art, wie Menschen wirklich über Farbe denken: welche Farbe, wie stark, wie hell. Lerne die drei Regler, und jeder Farbwähler ergibt Sinn.

## The short version

- Farbton, Sättigung und Helligkeit, kurz HSB, beschreiben eine Farbe mit drei Zahlen: Der Farbton ist ihr Winkel im Farbkreis, die Sättigung ihre Stärke und die Helligkeit, wie viel Licht sie hat.
- HSB heißt auch HSV, wobei V für Value steht; beide Namen beschreiben dasselbe Modell.
- HSL ist ein enger Verwandter, bei dem eine Helligkeit von 50 Prozent die reine Farbe ergibt und 100 Prozent immer Weiß.
- Design-Tools wie Figma und Photoshop bieten HSB-Farbwähler, während CSS hsl() unterstützt, aber kein HSB.
- Weder HSB noch HSL entspricht der Helligkeit, die das Auge wahrnimmt, daher eignen sich wahrnehmungsbasierte Modelle wie OKLCH besser für gleichmäßige Skalen.

**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](https://gradiently.design/de/guide/color-wheel). 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.

Farbton von 0 bis 360 Grad: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Der volle Farbtonbereich bei maximaler Sättigung und Helligkeit. Der Streifen beginnt und endet mit Rot, weil der Farbton ein Kreis ist.

## 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](https://gradiently.design/de/guide/muted-color-palettes) sind vor allem eine Geschichte geringerer Sättigung.

- Sättigung 0%: #808080
- Sättigung 25%: #7f609f
- Sättigung 50%: #7f40bf
- Sättigung 75%: #7f20df
- Sättigung 100%: #7f00ff

Ein violetter Farbton bei fester Helligkeit, nur die Sättigung ändert sich. Links reines Grau, rechts volle Farbe.

## 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](https://gradiently.design/de/guide/tints-tones-shades).

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

| Farbe | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Reines Rot | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violett | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Tiefes Petrol | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Leuchtendes Orange | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Weiß | `#ffffff` | Beliebiger Farbton, 0%, 100% | Beliebiger Farbton, beliebige Sättigung, 100% |

Der Farbton stimmt überein; Sättigung und dritter Wert nicht. Prüfe immer, welches Modell ein Farbwähler nutzt, bevor du Zahlen kopierst.

### HSB (auch HSV genannt)

- Helligkeit 100% bei Sättigung 100% ist die reine Farbe
- Weiß braucht Helligkeit 100% und Sättigung 0%
- In vielen Farbwählern von Design-Tools, auch in Photoshop und Figma
- Nicht direkt in CSS verfügbar

### HSL

- Lightness 50% ist die reine Farbe
- Lightness 100% ist immer Weiß
- Nativ in CSS als `hsl()` schreibbar
- Praktisch für hellere und dunklere Versionen

## 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), und [HSL-Farben](https://gradiently.design/de/guide/hsl-colors) geht weiter.

```css
: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 */
```

Ein Farbton, vier Aufgaben. Die Helligkeit macht weiche und tiefe Versionen, die Sättigung die gedämpfte.

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

- Gelb, HSL 60° 100% 50%: #ffff00
- Grün, HSL 120° 100% 50%: #00ff00
- Rot, HSL 0° 100% 50%: #ff0000
- Blau, HSL 240° 100% 50%: #0000ff

Vier Farben mit exakt derselben HSL-Helligkeit. Auf Weiß schafft das Gelb etwa 1,07:1, das Blau etwa 8,6:1.

Wahrnehmungsbasierte Modelle lösen das. [OKLCH](https://gradiently.design/de/guide/oklch-explained) 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](https://gradiently.design/de/guide/gradient-interpolation) 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.

## FAQ

### Was sind Farbton, Sättigung und Helligkeit?

Der Farbton ist der Winkel einer Farbe im Farbkreis, die Sättigung ihre Intensität und die Helligkeit, wie viel Licht sie hat. Zusammen beschreiben sie jede Bildschirmfarbe.

### Ist HSB dasselbe wie HSV?

Ja. HSV steht für Hue, Saturation, Value, und Value bedeutet dasselbe wie Brightness, also Helligkeit.

### Was ist der Unterschied zwischen HSB und HSL?

In HSB ist eine Helligkeit von 100 Prozent bei voller Sättigung die reine Farbe. In HSL ist eine Lightness von 50 Prozent die reine Farbe und 100 Prozent Weiß.

### Kann ich HSB in CSS nutzen?

Nicht direkt. CSS unterstützt `hsl()`, `hwb()` und `oklch()`, also rechne HSB-Werte in eines davon um.

### Was ist der Unterschied zwischen Farbton und Sättigung?

Der Farbton ist, welche Farbe es ist, etwa Rot oder Blau. Die Sättigung ist, wie stark diese Farbe ist, von Grau bis kräftig.