# Komplementärfarben: Kontrast, der ausgewogen bleibt

[Canonical HTML page](https://gradiently.design/de/guide/complementary-colors)

Gegenüberliegende Farben liefern den stärksten Kontrast, den Farbe bieten kann, und den schnellsten Weg zu einem Design, das summt, oder einem, das schreit. Den Unterschied machen Proportion und Helligkeit.

## The short version

- Komplementärfarben sind Paare, die sich auf dem Farbkreis direkt gegenüberliegen, etwa Blau und Orange.
- Nebeneinander in voller Stärke und mit ähnlicher Helligkeit scheinen Komplementärfarben an ihrer gemeinsamen Kante zu flimmern.
- Am verlässlichsten nutzt du Komplementärfarben, indem eine dominiert und die andere als kleiner Akzent dient.
- Änderst du die Helligkeit oder Sättigung einer Farbe des Paares, bleibt der Kontrast, und der Misston verschwindet.
- Ein direkter Farbverlauf zwischen zwei Komplementärfarben wird in der Mitte meist grau, was eine Zwischenfarbe oder OKLCH-Interpolation behebt.

**Komplementärfarben** sind zwei Farbtöne, die sich auf dem Farbkreis direkt gegenüberliegen, wie Blau und Orange, Rot und Grün oder Gelb und Violett. Jede lässt die andere intensiver wirken, weshalb Komplementärpaare den stärksten Farbkontrast liefern, den es gibt. Sorgfältig eingesetzt macht dieser Kontrast ein einzelnes Element unübersehbar. Gleichmäßig und in voller Stärke eingesetzt, macht er ein Design unangenehm anzusehen.

Welche Paare als Komplementärfarben gelten, hängt vom Farbkreis ab. Der Malerkreis stellt Blau Orange gegenüber; der Bildschirmkreis stellt Blau Gelb gegenüber. Den Unterschied erklärt der Leitfaden zum [Farbkreis](https://gradiently.design/de/guide/color-wheel). Die folgenden Paare nutzen Gestalter am häufigsten.

## Komplementäre Farbpaare mit Codes

| Paar | Farbe A | Farbe B | Wirkt |
| --- | --- | --- | --- |
| Blau und Orange | `#1d4ed8` | `#f97316` | Energiegeladen, sportlich, klar |
| Marine und Gold | `#1e3a8a` | `#d4a017` | Klassisch, etabliert |
| Rot und Grün | `#b91c1c` | `#15803d` | Festlich, natürlich, laut |
| Violett und Gelb | `#6d28d9` | `#facc15` | Verspielt, elektrisierend |
| Petrol und Koralle | `#0f766e` | `#fb7185` | Frisch, warm, modern |
| Pflaume und Salbei | `#581c87` | `#a3b18a` | Gedämpft, redaktionell |

Sechs Gegenpaare. Die letzten drei verschieben Helligkeit und Sättigung, weshalb sie weicher wirken.

- Blau: #1d4ed8
- Orange: #f97316
- Petrol: #0f766e
- Koralle: #fb7185
- Pflaume: #581c87
- Salbei: #a3b18a

Drei der Paare als Farbfelder, jede Farbe neben ihrem Gegenüber.

## Warum Komplementärfarben flimmern

Setzt du zwei Komplementärfarben mit ähnlicher Helligkeit und voller Sättigung nebeneinander, scheint die Kante dazwischen zu flackern. Deine Augen können sich nicht festlegen, wo die eine endet. Der Effekt ist bei Rot und Grün oder Blau und Orange in gleicher Intensität am stärksten, und er macht Text in einer Farbe auf der anderen sehr schwer lesbar.

- Gleich stark: flimmert: `repeating-linear-gradient(90deg, #e0282e 0px, #e0282e 24px, #1f9d55 24px, #1f9d55 48px)`
- Dunkelrot, blassgrün: ruhig: `repeating-linear-gradient(90deg, #7f1d1d 0px, #7f1d1d 24px, #bbf7d0 24px, #bbf7d0 48px)`

Dieselben zwei Farbtöne. Trennst du sie in der Helligkeit, hört das Flimmern auf, und der Kontrast wird nutzbar.

Die Lösung ist fast nie, die Farbtöne zu ändern. Mache eine der beiden deutlich dunkler oder heller oder viel weniger gesättigt. Das Paar bleibt komplementär, aber die Kante hört auf zu kämpfen. Das löst auch die Lesbarkeit, denn Text braucht mehr Helligkeitskontrast als Farbtonkontrast; siehe [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility).

## Komplementärfarben nutzen: eine führt, eine setzt Akzente

Der verlässlichste Ansatz ist, einer Farbe den größten Teil des Raums zu geben und der anderen eine kleine, wichtige Aufgabe: ein Button, ein Preis, ein einzelnes Wort, ein Aufkleber. Der Akzent zieht den Blick an, weil er das Einzige seiner Art ist. Halb und halb dagegen teilt die Aufmerksamkeit und wirkt selten geplant.

Marineblaue Fläche, oranger Akzent: `linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)`

Etwa 90 % Marine zu 10 % Orange. Die kleine orange Fläche hat weit mehr Gewicht, als ihre Größe vermuten lässt.

- **Dominante Farbe:** Hintergründe, große Formen, der größte Teil der Fläche. Meist die dunklere oder ruhigere des Paares.
- **Akzentfarbe:** Handlungsaufforderungen, Hervorhebungen, eine Schlüsselzahl. Meist die hellere.
- **Neutraltöne:** Fast Weiß, fast Schwarz oder ein warmes Grau, damit beide Raum haben. Wenige gute Komplementärdesigns bestehen nur aus zwei Farben.
- **Proportionen:** Die [60-30-10-Regel](https://gradiently.design/de/guide/60-30-10-rule) ist ein nützlicher Ausgangspunkt, mit der Komplementärfarbe als die 10.

## Komplementäre Farbverläufe ohne graue Mitte

Mischst du zwei Komplementärfarben direkt, wird der Mittelpunkt grau oder braun. Im sRGB-Farbraum, den die meisten Tools nutzen, ergeben die Rot-, Grün- und Blauwerte zweier Gegenfarben im Mittel etwas nahe Neutral. Es ist einer der häufigsten [Fehler bei Farbverläufen](https://gradiently.design/de/guide/gradient-design-mistakes).

- Direkt: grau in der Mitte: `linear-gradient(90deg, #1d4ed8 0%, #f97316 100%)`
- Über Magenta: bleibt lebhaft: `linear-gradient(90deg, #1d4ed8 0%, #c026d3 50%, #f97316 100%)`
- OKLCH: wandert um den Kreis: `linear-gradient(in oklch 90deg, #1d4ed8 0%, #f97316 100%)`
- Kurze Mischung: weniger Grau: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 30%, #f97316 70%, #f97316 100%)`

Vier Wege, Blau und Orange zu verbinden. Nur beim ersten zeigt sich die tote Zone quer durch die Mitte der Fläche.

Die zwei stärksten Lösungen sind ein Zwischenstopp in einem Farbton zwischen dem Paar und die Interpolation in OKLCH, die sich um den Farbkreis bewegt, statt quer hindurchzuschneiden. [Trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) und [OKLCH-Farbverläufe in CSS](https://gradiently.design/de/guide/css-gradient-oklch) erklären beides im Detail.

## Wo komplementäre Paletten am besten funktionieren

Komplementärfarben passen zu Arbeiten, die schnell auffallen und aus der Ferne gelesen werden müssen. Weniger geeignet sind sie für langes Lesen, ruhige Räume oder alles, was leise wirken soll, wo [Analogfarben](https://gradiently.design/de/guide/analogous-colors) besser abschneiden.

- **Handlungsaufforderungen.** Ein warmer Button auf einer kühlen Seite oder umgekehrt ist der klassische Einsatz. Man findet ihn ohne Suchen.
- **Sport und Veranstaltungen.** Trikots, Plakate und Tickets nutzen Gegenfarben, weil sie quer durch ein Stadion oder eine Straße lesbar sind.
- **Essen und Handel.** Food-Styling setzt oft warme Gerichte gegen kühle Teller oder Hintergründe, damit sie hervortreten; ein Rabattaufkleber in der Komplementärfarbe der Verpackung fällt im Regal auf.
- **Daten und Karten.** Zwei gegenüberliegende Farbtöne zeigen zwei Seiten eines Vergleichs klar, solange Beschriftungen sie für Menschen stützen, die Farben anders sehen.
- **Porträts und Produktfotos.** Ein Hintergrund in der Komplementärfarbe der Hauptfarbe des Motivs löst es ohne harte Kontur heraus.

## Fehler bei Komplementärfarben, die du vermeidest

### Vermeiden

- Gleiche Mengen beider Farben
- Text in einer Komplementärfarbe auf dem Hintergrund der anderen
- Beide Farben in voller Sättigung und mit ähnlicher Helligkeit
- Ein direkter Farbverlauf zwischen dem Paar

### Besser

- Eine dominante Farbe und ein kleiner Akzent
- Text in einem Neutralton nahe Weiß oder Schwarz
- Eine Farbe tiefer, blasser oder ruhiger als die andere
- Eine Zwischenfarbe oder OKLCH-Mischung

Wirkt ein Komplementärpaar auch ausgewogen noch zu angespannt, probiere geteilt komplementär: ein Farbton plus die zwei neben seinem Gegenüber. Es behält die Energie und mildert den Misston. Wie das geht, zeigt [triadische und geteilt komplementäre Paletten](https://gradiently.design/de/guide/triadic-colors).

## FAQ

### Was sind Komplementärfarben?

Komplementärfarben sind zwei Farbtöne, die sich auf dem Farbkreis gegenüberliegen, etwa Blau und Orange oder Rot und Grün. Zusammen erzeugen sie den stärksten Farbkontrast.

### Was ist die Komplementärfarbe von Blau?

Auf dem traditionellen Malerkreis ist es Orange. Auf dem RGB-Bildschirmkreis, den digitale Werkzeuge nutzen, ist es Gelb.

### Warum scheinen Komplementärfarben zu flimmern?

Berühren sich zwei Gegenfarben mit ähnlicher Helligkeit und voller Sättigung, findet das Auge an der Kante keinen Halt. Macht man eine Farbe dunkler, heller oder weniger gesättigt, hört es auf.

### Wie mache ich einen Farbverlauf zwischen Komplementärfarben?

Füge einen mittleren Stopp in einem Farbton zwischen beiden hinzu oder interpoliere in OKLCH. Eine direkte sRGB-Mischung zwischen Komplementärfarben wird in der Mitte meist grau.

### Wie viel von jeder Komplementärfarbe sollte ich nutzen?

Lass eine dominieren und nutze die andere als kleinen Akzent, zum Beispiel etwa 90 % zu 10 %, mit Neutraltönen, damit beide Raum haben.