# Tints, Tones und Shades: so baust du eine Farbskala

[Canonical HTML page](https://gradiently.design/de/guide/tints-tones-shades)

Eine einzige Markenfarbe reicht zum Gestalten nie. Aufhellen, Abtönen und Abdunkeln machen daraus eine ganze Familie, und eine gute Skala lässt eine Palette Text, Buttons, Hintergründe und Diagramme tragen.

## The short version

- Tints, Tones und Shades sind drei Wege, eine Farbe zu variieren: Ein Tint fügt Weiß hinzu, ein Tone Grau und ein Shade Schwarz.
- Tints wirken heller und weicher, Tones ruhiger und gedämpfter, Shades tiefer und ernster.
- Eine Farbskala ist eine Reihe von Tints und Shades eines Farbtons, meist nummeriert von 50 oder 100 für die hellste bis 900 für die dunkelste Stufe.
- Wer in einem wahrnehmungsbasierten Farbraum wie OKLCH mischt, hält die Stufen einer Skala optisch gleichmäßig.
- Eine gute Skala gibt jeder Stufe eine Aufgabe, etwa Hintergründe, Rahmen, Text und Hover-Zustände, und prüft den Kontrast zwischen Stufen, die aufeinandertreffen.

**Tints, Tones und Shades** sind die drei Wege, eine Farbe zu verändern, ohne ihren Farbton zu ändern. Ein **Tint** ist die Farbe mit Weiß gemischt, sie wird heller und weicher. Ein **Shade** ist die Farbe mit Schwarz gemischt, sie wird tiefer. Ein **Tone** ist die Farbe mit Grau gemischt, sie wird leiser und gedämpfter. Stell dir Tints, Tones und Shades als Weiß, Grau und Schwarz vor, die einem Farbton beigemischt werden. Ordnest du eine Reihe von Tints und Shades, hast du eine Farbskala: das Werkzeug, das aus einer einzelnen Markenfarbe etwas macht, mit dem du wirklich gestalten kannst.

## Tint, Tone und Shade im direkten Vergleich

Den Unterschied siehst du am leichtesten, wenn du von einer Farbe ausgehst und sie in drei Richtungen schiebst. Hier ist die Basis ein Violett, `#7c3aed`, in Schritten von 20 Prozent gemischt.

| Art | Gemischt mit | Wirkung | Beispiel aus #7c3aed |
| --- | --- | --- | --- |
| Tint | Weiß | Heller, weicher, luftiger | `#b089f4` mit 40 Prozent Weiß |
| Tone | Grau | Gedämpft, ruhiger, natürlicher | `#7e64ac` mit 60 Prozent Grau |
| Shade | Schwarz | Tiefer, schwerer, ernster | `#4a238e` mit 40 Prozent Schwarz |

Der Farbton bleibt in jedem Fall Violett. Nur Helligkeit und Sättigung ändern sich.

- Tint 90 %: #f2ebfd
- Tint 60 %: #cbb0f8
- Tint 20 %: #9661f1
- Basis-Violett: #7c3aed
- Shade 20 %: #632ebe
- Shade 60 %: #32175f
- Shade 80 %: #190c2f

Tints links, Shades rechts. Diese Reihe ist schon der Großteil einer nutzbaren Skala.

- Basis-Violett: #7c3aed
- Tone 20 %: #7d48d7
- Tone 40 %: #7e56c1
- Tone 60 %: #7e64ac
- Tone 80 %: #7f7296

Tones behalten ungefähr dieselbe Helligkeit und verlieren stattdessen Farbe, deshalb wirken von Tones geprägte Paletten ruhig und erwachsen.

## Was Tints, Tones und Shades mit einem Design machen

Jede Richtung ändert die Stimmung genauso wie die Farbe. Tints wirken sanft, jung und offen, deshalb bestehen [Pastell-Farbpaletten](https://gradiently.design/de/guide/pastel-color-palettes) meist aus Tints. Shades wirken reich, ernst und hochwertig, das Terrain [dunkler Farbpaletten](https://gradiently.design/de/guide/dark-color-palettes). Tones wirken erwachsen und natürlich, die Basis fast jeder [gedämpften Farbpalette](https://gradiently.design/de/guide/muted-color-palettes).

- Tints: weich und offen: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tones: ruhig und erwachsen: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Shades: tief und ernst: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

Dasselbe Violett in drei Richtungen. Tints heben die Stimmung, Tones beruhigen sie, Shades geben ihr Gewicht.

## So baust du eine Farbskala aus einem Hex-Wert

Die meisten Designsysteme nummerieren ihre Skala von 50 oder 100 (am hellsten) bis 900 (am dunkelsten), mit der Markenfarbe irgendwo um 500. Einheitlichkeit zählt mehr als die Zahlen: Jede Farbe in deinem System sollte dieselben Stufen haben, damit `200` immer einen hellen Hintergrund meint und `700` immer Text. Fünf gut gewählte Stufen schlagen elf, die niemand unterscheiden kann, und Zwischenstufen kannst du ergänzen, sobald echte Designs zeigen, wo sie fehlen.

1. **Platziere deine Markenfarbe** Entscheide, zu welcher Stufe sie gehört. Eine mittlere Farbe wie `#7c3aed` sitzt bei 500; ein sehr dunkles Marken-Navy vielleicht bei 800.
2. **Mach das helle Ende** Misch für 400 bis 50 in Richtung Weiß. Die hellste Stufe sollte kaum gefärbt sein, hell genug für einen Seitenhintergrund.
3. **Mach das dunkle Ende** Misch für 600 bis 900 in Richtung Schwarz. Die dunkelste Stufe sollte dunkel genug für Fließtext auf der hellsten sein.
4. **Gleich die Stufen an** Sieh dir die Reihe aus der Entfernung an. Wirken zwei Nachbarn fast gleich und eine andere Lücke wie ein Sprung, korrigiere sie nach Auge.
5. **Verschieb den Farbton an den Enden leicht** Reines Schwarz kann Shades schmutzig wirken lassen. Viele Designer schieben dunkle Stufen ein paar Grad Richtung Blau oder Violett und helle Richtung warm.
6. **Prüfe die Paare, die aufeinandertreffen** Teste Textstufen auf Hintergrundstufen auf Kontrast, mit [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) als Leitfaden.

| Stufe | Hex | Typische Aufgabe |
| --- | --- | --- |
| 50 | `#f2ebfd` | Seiten- oder Kartenhintergrund |
| 100 | `#e5d8fb` | Dezente Flächen, ausgewählte Zeilen |
| 200 | `#cbb0f8` | Rahmen, Trennlinien, deaktivierte Zustände |
| 400 | `#9661f1` | Icons, große dekorative Formen |
| 500 | `#7c3aed` | Markenfarbe, primäre Buttons |
| 600 | `#632ebe` | Button-Hover, Links |
| 700 | `#4a238e` | Überschriften auf hellen Hintergründen |
| 800 | `#32175f` | Fließtext auf Tints |
| 900 | `#190c2f` | Hintergrund im Dark Mode |

Eine violette Skala mit einer Aufgabe für jede Stufe. Weiß auf 500 hat etwa 5,7:1, Stufe 800 auf Stufe 100 etwa 10,9:1, beides über dem Richtwert 4,5:1.

## Tints und Shades in CSS machen

Du musst nicht mehr jede Stufe von Hand berechnen. CSS `color-mix()` mischt zwei Farben in einem gewählten Farbraum, sodass eine ganze Skala einer Variable folgen kann. Mischen in OKLCH hält die Stufen fürs Auge gleichmäßiger als normales sRGB, ein Punkt, den [OKLCH erklärt](https://gradiently.design/de/guide/oklch-explained) behandelt. Die Browserunterstützung ist breit; Details findest du unter [color-mix() bei MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix).

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Ändere `--brand`, und jeder Tint, Shade und Tone ändert sich mit.

## Tints und Shades in Farbverläufen

Die saubersten Verläufe sind oft nur ein Farbton, der vom Tint zum Shade wandert. Weil nichts den Farbkreis kreuzt, entsteht in der Mitte kein grauer Streifen, und das Ergebnis wirkt wie Licht, das auf ein einziges Material fällt. [Monochrome Farbschemata](https://gradiently.design/de/guide/monochromatic-color-scheme) nutzen dieselbe Idee für ganze Paletten.

- Violett, Tint zu Shade: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violett, von oben beleuchtet: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terrakotta, Tint zu Shade: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Flieder-Tint zu Violett-Tone: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Verläufe aus einem Farbton. Jeder bedient sich nur aus seiner eigenen Skala.

Ein Gradiently Mark funktioniert ähnlich: ein Rezept verwandter Farben, durch das Licht läuft. Wenn du darauf gestaltest, vertiefen sich die Farben nahe deinen Worten oder hellen auf, sodass Text ohne Kasten dahinter lesbar bleibt.

## FAQ

### Was ist der Unterschied zwischen Tint, Tone und Shade?

Ein Tint ist eine Farbe mit Weiß gemischt, ein Tone eine Farbe mit Grau und ein Shade eine Farbe mit Schwarz.

### Ist ein Pastellton ein Tint?

Ja. Pastelltöne sind Tints: Farben, die mit viel Weiß aufgehellt sind, was sie weich und wenig intensiv macht.

### Wie viele Stufen sollte eine Farbskala haben?

Die meisten Designsysteme nutzen neun bis elf Stufen, nummeriert von 50 oder 100 bis 900. Für kleine Projekte reichen weniger, solange jede eine klare Aufgabe hat.

### Wie mache ich in CSS einen dunkleren Shade einer Farbe?

Nutze `color-mix(in oklch, yourcolour 70%, black)` und pass den Prozentwert an. Niedrigere Prozentwerte ergeben dunklere Shades.

### Warum sehen meine Shades matschig aus?

Das Mischen mit reinem Schwarz entzieht auch Sättigung. Misch in OKLCH und schieb die dunkelsten Stufen leicht Richtung Blau oder Violett, damit sie satt bleiben.