Die Kurzfassung
- 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.
Auf dieser Seite
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. 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 |
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.
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.
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.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- 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 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.
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 und OKLCH-Farbverläufe in CSS 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 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.
Häufige Fragen
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.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
