# Grundlagen der Farbtheorie für Menschen, die nicht gestalten

[Canonical HTML page](https://gradiently.design/de/guide/color-theory-basics)

Du brauchst keine Kunsthochschule, um Farben gut zu wählen. Sechs Ideen erklären fast jede Farbentscheidung, und jede lässt sich in wenigen Minuten lernen.

## The short version

- Die Farbtheorie ist eine Sammlung praktischer Ideen dazu, wie Farben zueinander stehen, sich kombinieren und beeinflussen, was Menschen zuerst sehen.
- Jede Farbe lässt sich durch drei Eigenschaften beschreiben: Farbton, die Farbfamilie; Sättigung, wie intensiv sie ist; und Helligkeit, wie nah sie an Weiß oder Schwarz liegt.
- Helligkeitskontrast ist für die Lesbarkeit wichtiger als Farbtonkontrast, weshalb ein Design auch in Graustufen funktionieren sollte.
- Farbharmonien wie komplementär, analog, triadisch und monochromatisch sind Positionen auf dem Farbkreis, die zuverlässig ausgewogen aussehen.
- Die meisten guten Paletten nutzen eine dominante Farbe, ein oder zwei unterstützende Farben und einen kleinen Akzent.

**Farbtheorie** ist die Sammlung praktischer Ideen, mit denen Gestalterinnen und Gestalter Farben wählen, die zusammenpassen und tun, was sie tun sollen. Sie läuft auf sechs Dinge hinaus: Farbton, Sättigung, Helligkeit, Temperatur, Harmonie und Kontrast. Wenn du diese verstehst, kannst du erklären, warum eine Palette ruhig oder laut wirkt, warum manche Texte schwer lesbar sind und warum zwei Farben sich beißen.

Diese Seite ist der Ausgangspunkt für jeden Farbartikel im Leitfaden. Jeder Abschnitt verlinkt auf einen tieferen, wenn du ihn brauchst.

## Farbton, Sättigung und Helligkeit

Jede Farbe lässt sich mit drei Eigenschaften beschreiben. Der **Farbton** ist die Farbfamilie: Rot, Orange, Grün, Blau. Die **Sättigung** (auch Buntheit oder Chroma) ist, wie intensiv sie ist, von Grau bis lebhaft. Die **Helligkeit** ist, wie nah sie an Schwarz oder Weiß liegt. Ändere eine und halte die anderen fest, und du siehst, was jede bewirkt.

- Farbton: die Farbfamilie: `linear-gradient(90deg, #ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`
- Sättigung: Grau bis leuchtendes Violett: `linear-gradient(90deg, #939393 0%, #7c3aed 100%)`
- Helligkeit: dunkles bis helles Violett: `linear-gradient(90deg, #1e0a3c 0%, #7c3aed 50%, #ede9fe 100%)`

Drei Eigenschaften, drei Verläufe. Der zweite und dritte behalten denselben Farbton und ändern nur eine Sache.

Mit diesen dreien beschreiben Farbcodes wie HSL und OKLCH Farbe, was sie im Code leicht anpassbar macht. [Farbcodes erklärt](https://gradiently.design/de/guide/color-codes-explained) behandelt HEX, RGB, HSL und OKLCH.

## Warme und kühle Farben

Farben haben auch eine Temperatur. Rot, Orange und Gelb wirken warm; Blau, Grün und Violett wirken kühl. Warme Farben wirken tendenziell näher und energiegeladener, kühle weiter weg und ruhiger. Die Temperatur ist aber relativ: Ein Violett mit viel Rot darin kann neben einem reinen Blau warm wirken.

- Ziegel: #b91c1c
- Mandarine: #ea580c
- Sonne: #facc15
- Petrol: #0d9488
- Kobalt: #2563eb
- Violett: #6d28d9

Drei warme und drei kühle Farben. In einer Palette, die beides mischt, führt meist eine Temperatur.

[Warme und kühle Farben](https://gradiently.design/de/guide/warm-and-cool-colors) geht weiter, auch dazu, wie du Temperaturen in einem Farbverlauf mischst.

## Farbharmonie und Farbkreis

Ordnest du Farbtöne im Kreis an, sehen manche Beziehungen zuverlässig ausgewogen aus. Das sind die Farbharmonien. Sie sind keine Regeln, aber gute Ausgangspunkte, wenn du unsicher bist. Wie du sie liest, erklärt der Leitfaden zum [Farbkreis](https://gradiently.design/de/guide/color-wheel).

| Harmonie | Wo die Farben sitzen | Wie es wirkt |
| --- | --- | --- |
| [Monochromatisch](https://gradiently.design/de/guide/monochromatic-color-scheme) | Ein Farbton in mehreren Helligkeiten | Ruhig, einheitlich, edel |
| [Analog](https://gradiently.design/de/guide/analogous-colors) | Nachbarn auf dem Farbkreis | Harmonisch, natürlich, mühelos |
| [Komplementär](https://gradiently.design/de/guide/complementary-colors) | Einander gegenüber | Hoher Kontrast, energiegeladen |
| Geteilt komplementär | Ein Farbton plus die zwei neben seinem Gegenüber | Lebendig, aber weniger angespannt |
| [Triadisch](https://gradiently.design/de/guide/triadic-colors) | Drei Farbtöne im gleichen Abstand | Verspielt, ausgewogen, kräftig |

Die fünf Harmonien, denen du am häufigsten begegnest.

- Monochromatisches Blau: `linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #bfdbfe 100%)`
- Analog: Blau, Petrol, Grün: `linear-gradient(135deg, #1d4ed8 0%, #0891b2 50%, #059669 100%)`
- Komplementär: Blau, Bernstein, Pink: `linear-gradient(135deg, #1d4ed8 0%, #db2777 50%, #f59e0b 100%)`
- Triadisch: Grün, Violett, Orange: `linear-gradient(135deg, #16a34a 0%, #7c3aed 50%, #ea580c 100%)`

Jede Harmonie als Farbverlauf. Komplementäre Paare brauchen eine Farbe in der Mitte, sonst wird die Mischung grau.

## Kontrast: warum manche Farben schwer lesbar sind

Kontrast ist der Unterschied zwischen zwei Farben. Fürs Lesen zählt vor allem der Helligkeitsunterschied, nicht der Farbton. Roter Text auf grünem Grund kann aus zwei sehr verschiedenen Farbtönen bestehen und trotzdem schwer lesbar sein, weil beide ähnlich hell sein können. Viele Menschen mit Farbsehschwäche können sie gar nicht unterscheiden.

### Nur Farbtonkontrast

- Rot auf Grün mit ähnlicher Helligkeit
- Blau auf Lila
- Orange auf Pink
- Verschwindet in Graustufen

### Helligkeitskontrast

- Fast Weiß auf tiefem Marineblau
- Fast Schwarz auf blassem Gelb
- Dunkle Tinte auf hellem Pastell
- Bleibt in Graustufen lesbar

Der Graustufentest ist die schnellste Prüfung: Schalte dein Design auf Grau und sieh nach, ob die Worte noch hervortreten. Für Text legen die Web Content Accessibility Guidelines Mindestkontraste fest, 4,5:1 für Fließtext und 3:1 für große Schrift. Wie du sie misst, erklärt [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility).

## Proportion: wie viel von jeder Farbe

Dieselben fünf Farben können ruhig oder chaotisch wirken, je nachdem, wie viel du von jeder nutzt. Ein nützlicher Standard ist eine dominante Farbe, die den größten Teil des Raums füllt, ein oder zwei unterstützende Farben und ein kleiner Akzent für das, was auffallen soll. Die [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule) ist die gängige Fassung dieser Idee.

- Dominant: tiefes Marineblau: #0f172a
- Stütze: Schiefer: #334155
- Stütze: Dunst: #e2e8f0
- Akzent: Orange: #f97316

Ein dominantes Dunkel, zwei ruhige Stützen und ein warmer Akzent. Der Akzent wirkt, weil er selten ist.

## Was Farben bedeuten

Farben tragen Assoziationen, aber diese sind erlernt, nicht eingebaut, und unterscheiden sich nach Kultur und Kontext. Grün kann Natur, Geld oder „los“ bedeuten; Rot kann Gefahr, Glück oder einen Sale bedeuten. Sieh Bedeutung als Frage an deine Zielgruppe und Branche, nicht als festes Wörterbuch. [Farbpsychologie](https://gradiently.design/de/guide/color-psychology) trennt, was trägt, von dem, was nicht trägt, und [Farbbedeutungen rund um die Welt](https://gradiently.design/de/guide/color-meanings-around-the-world) zeigt, wie stark sie sich unterscheiden.

## Farbtheorie in die Praxis bringen

1. **Beginne mit einer Farbe** Wähle die Farbe, die am wichtigsten ist: deine Markenfarbe oder eine aus einem Foto. Dabei hilft [eine Palette aus einem Bild gewinnen](https://gradiently.design/de/guide/color-palette-from-image).
2. **Wähle eine Harmonie** Entscheide, ob die Palette ruhig (monochromatisch oder analog) oder energiegeladen (komplementär oder triadisch) sein soll.
3. **Baue eine Helligkeitsspanne auf** Ergänze eine sehr dunkle und eine sehr helle Version für Text und Hintergründe. Den meisten Paletten fehlen genau diese.
4. **Lege Proportionen fest** Entscheide, welche Farbe dominiert, welche unterstützt und welche der Akzent ist.
5. **Teste Kontrast und Kontext** Prüfe den Textkontrast, mach den Graustufentest und sieh dir die Palette in einem echten Layout an, nicht nur als Farbfelder.

Für Markenarbeit macht [Markenfarben auswählen](https://gradiently.design/de/guide/how-to-choose-brand-colors) aus diesen Schritten eine vollständige Methode.

## FAQ

### Was ist Farbtheorie?

Farbtheorie ist eine Sammlung praktischer Ideen dazu, wie Farben zueinander stehen, wie sie sich zu harmonischen Paletten verbinden und wie Kontrast beeinflusst, was Menschen sehen und lesen.

### Was sind die drei Eigenschaften einer Farbe?

Farbton, die Farbfamilie; Sättigung, wie intensiv oder grau sie ist; und Helligkeit, wie nah sie an Schwarz oder Weiß liegt.

### Was sind die wichtigsten Farbharmonien?

Monochromatisch, analog, komplementär, geteilt komplementär und triadisch. Jede beschreibt, wo Farben auf dem Farbkreis relativ zueinander liegen.

### Was ist für die Lesbarkeit wichtiger, Farbton oder Helligkeit?

Die Helligkeit. Text braucht einen klaren Helligkeitsunterschied zum Hintergrund, weshalb ein lesbares Design auch in Graustufen funktioniert.

### Haben Farben universelle Bedeutungen?

Nein. Farbassoziationen sind erlernt und unterscheiden sich zwischen Kulturen, Branchen und Kontexten, prüfe sie also an deiner Zielgruppe.