Komplementärfarben: Paare, Beispiele & Hex-Werte (2026)

# Komplementärfarben: Ein praktischer Leitfaden für Designer (mit Hex-Werten)

Komplementärfarben sind Farbpaare, die sich auf gegenüberliegenden Seiten des Farbkreises befinden — Rot und Grün, Blau und Orange, Gelb und Lila. Nebeneinander platziert, lässt jede Farbe die andere heller wirken. Genau deshalb greifen Marken zu ihnen, wenn sie einen auffälligen Blickfang wollen. Sie haben den höchsten Kontrast aller Farbpaare, und dieser Kontrast ist sowohl ihre Stärke als auch ihre Falle.

Dieser Leitfaden ist für Designer, die diese Paare in echtem UI, Markenarbeit oder Social Media einsetzen möchten. Wir behandeln 12 nützliche Paare mit Hex-Codes, die 60-30-10-Regel, Markenbeispiele, die du hundertmal gesehen hast, Barrierefreiheit und die Varianten (Split-Komplementär, Doppel-Komplementär), die den Konflikt abmildern. Am Ende weißt du, wann Komplementär funktioniert, wann es scheitert und wie du eine Farbpalette baust, die deinen Nutzern keine Kopfschmerzen bereitet.

Was sind Komplementärfarben genau?

Komplementärfarben sind zwei Farben, die sich auf gegenüberliegenden Seiten des Farbkreises befinden. Auf einem 12-teiligen Kreis bedeutet das, sie liegen 180 Grad auseinander. Das Auge nimmt diese Paare als den größtmöglichen Kontrast wahr. Es gibt keine Überschneidung in ihren Wellenlängen, also vermischen sie sich nicht so wie Nachbarn auf dem Kreis.

Es gibt zwei gängige Farbmodelle, und jedes hat seine eigenen Komplementärpaare:

• RYB-Kreis (traditionell, farbenbasiert) — Rot und Grün, Blau und Orange, Gelb und Lila. Das ist der Kreis, den man im Kunstunterricht lernt.
• RGB-Kreis (digitale Bildschirme) — Rot und Cyan, Grün und Magenta, Blau und Gelb. Das nutzt dein Monitor.

Für die meisten Designarbeiten — Marke, Web, Druck — sind die RYB-Paare immer noch der Standard. Bildschirme rendern in RGB, aber Designer denken in RYB. Die Hex-Codes in diesem Leitfaden verwenden die RYB-Paare, weil das ist, was du in Designbriefings, Markenrichtlinien und Pinterest-Moodboards siehst.

Für das größere Bild davon, wie der Farbkreis funktioniert und wie alle Schemata zusammenpassen, schau dir unseren Leitfaden zur Farbtheorie an.

Warum Komplementärfarben so lebendig wirken

Zwei Dinge passieren, wenn Komplementärpaare nebeneinander liegen:

Simultankontrast. Dein Gehirn vergleicht benachbarte Farben und drückt sie auseinander. Ein Grau neben Rot wirkt leicht grünlich. Dasselbe Grau neben Grün wirkt leicht rötlich. Bei echten Komplementären werden beide Seiten verstärkt — das Orange wirkt oranger, das Blau blauer.

Nachbild-Wahrnehmung. Starre 20 Sekunden auf eine rote Form, dann schau auf eine weiße Wand. Du siehst einen grünen Geist. Deine Netzhaut ermüdet die rot-empfindlichen Zellen, und die grün-empfindlichen Zellen übernehmen für einen Moment. Designer nutzen das — ein roter CTA auf einem grünen Hintergrund wirkt schon „aktiv", weil dein Auge auf das gegenüberliegende Signal eingestellt ist.

Die Wissenschaft dahinter heißt Gegenfarbtheorie. Deshalb wirken Komplementärpaletten stärker als jede andere Harmonie.

Die 12 nützlichsten Komplementärfarbpaare

Unten findest du die 12 Paare, die du tatsächlich verwenden wirst. Jedes Paar hat eine reine Version (maximale Vibration) und eine sanftere Variante, wenn du dieselbe Harmonie in geringerer Lautstärke brauchst.

1. Rot und Grün — `#E63946` / `#2A9D8F`

Das klassische Weihnachtspaar, aber auch FedEx, Heineken und die meisten Sporttrikots. Reines #FF0000 / #00FF00 ist zu heiß für UI. Diese gedämpften Versionen behalten die Energie, ohne die Augen zu verbrennen.

2. Blau und Orange — `#264653` / `#F4A261`

Das meistgenutzte Paar in Filmplakaten seit 2005, weil es bei kleinen Größen am besten sichtbar ist. Hi-Vis-Sicherheitskleidung nutzt es aus demselben Grund. Hex oben ist die gedämpfte „Filmplakat"-Version. Rein ist #0000FF / #FFA500.

3. Gelb und Lila — `#FFD60A` / `#5A189A`

Lakers Basketball, Crown Royal, Cadbury. Gelb ist der hellste Farbton, den dein Auge sehen kann, und tiefes Lila ist der dunkelste. Der Helligkeitsunterschied trägt dieses Paar schon, bevor der Farbunterschied einsetzt.

4. Rot-Orange und Blau-Grün — `#E76F51` / `#2EC4B6`

Das „warme Sonnenuntergang"-Paar. Foto-Marken, Lebensmittelmarken, Reise-Websites. Sanfter als Rot/Grün, weil beide Farben warm sind. Trotzdem hoher Kontrast.

5. Gelb-Orange und Blau-Violett — `#FFB627` / `#3D348B`

Wird von Banken und Fintech-Apps verwendet, die sowohl sicher (Blau) als auch freundlich (Gelb-Orange) wirken wollen. Üblich bei Challenger-Banken und Budget-Apps.

6. Gelb-Grün und Rot-Violett — `#9BC53D` / `#C3447A`

Das seltenste Paar auf der Liste, weil beide Farben ungewöhnlich sind. Genau deshalb lieben es Start-up-Marken — sofortige Aufmerksamkeit. Beauty- und Lifestyle-Marken nutzen es stark.

7. Koralle und Türkis — `#FF6F61` / `#008080`

Koralle ist ein warmes, leicht gedämpftes Rot-Orange. Türkis ist ein kühles Blau-Grün. Zusammen wirken sie als „modern" und „designed". Üblich auf Landing Pages, SaaS-Hero-Sections und Instagram-Marken.

8. Senf und Indigo — `#D4A017` / `#3F37C9`

Senf ist gedämpftes Gelb-Orange. Indigo ist tiefes Blau-Violett. Die Kombination wirkt redaktionell und selbstbewusst. Magazine, Kunstgalerien und High-End-Foto-Marken nutzen dieses.

9. Lachs und Salbei — `#FA8072` / `#9CAF88`

Beide Farben sind sehr gedämpft. Das Paar ist technisch komplementär, liest sich aber fast neutral. Perfekt für Hochzeitspapeterie, Beauty-Verpackung und jede Marke, die Wärme ohne Lautstärke will.

10. Burgund und Waldgrün — `#800020` / `#228B22`

Tiefes Rot und tiefes Grün. Die erwachsene Version des Weihnachtspaares. Wird von Luxusmarken, klassischen Restaurants und Heritage-Labels verwendet. Hat Gewicht, ohne festlich zu wirken.

11. Pfirsich und staubiges Blau — `#FFCBA4` / `#6E8898`

Tönungen (hellere Versionen) des Orange/Blau-Paares. Sanft genug für Hintergründe, Babymarken und Wellness-Apps. Das Komplement funktioniert noch, nur im Flüsterton.

12. Mandarine und Azurblau — `#F28C28` / `#007FFF`

Beide Farben sind gesättigt, aber auf unterschiedlichen Helligkeitsstufen. Mandarine ist hell, Azurblau ist tief. Das ist das Paar, das Spotify, Reddit und viele Gaming-Marken verwenden, wenn sie Energie ohne Migräne wollen.

Für ein Tool, mit dem du jede Komplementärfarbe aus einem Bild oder Bildschirm sampeln kannst, gibt unser kostenloser Farbwähler den Hex-Wert und sein exaktes Komplement mit einem Klick zurück.

So verwendest du Komplementärpaare, ohne dein Design zu ruinieren

Die Paare zu kennen ist der einfache Teil. Sie gut zu nutzen ist, woran die meisten Paletten scheitern.

Die 60-30-10-Regel

Die einzige nützlichste Regel beim Arbeiten mit Komplementärfarben:

• 60 % — Hauptfarbe (ein Neutral oder eine Farbe des Paares, gedämpft)
• 30 % — zweite Farbe (die andere Hälfte des Paares)
• 10 % — Akzent (die reine, gesättigte Version einer der beiden Farben)

Du verwendest fast nie beide Hälften eines Komplementärpaares in voller Stärke und gleichen Mengen. Das ist das Rezept für eine 1990er-GeoCities-Seite. Stattdessen trägt eine Farbe den Raum. Die andere taucht als Akzent auf — ein Button, ein Highlight, ein Icon.

Wo Komplementärpaare glänzen

• Call-to-Action-Buttons. Oranger „Anmelden"-Button auf einer blauen Seite ist aus gutem Grund der meistgeklickte Button im SaaS.
• Blickfänger. Das Auge auf ein Element auf einer vollen Seite ziehen — eine Preisstufe, ein Hero-Bild, einen Sale-Tag.
• Sport- und Teamidentität. Wo du willst, dass Fans das Trikot aus der hinteren Reihe erkennen.
• Filmplakate und Buchcover. Hohe Sichtbarkeit in Thumbnail-Größe.
• Datenvisualisierung. Zwei-Eimer-Diagramme (Gewinn vs. Verlust, vorher vs. nachher), bei denen das Auge sie auf einen Blick trennen muss.

Wo Komplementärpaare versagen

• Fließtext. Roter Text auf Grün (oder umgekehrt) ist unleserlich. Reserviere Komplementäre nur für Überschriften und Akzente.
• Große gleiche Blöcke. Zwei riesige Blöcke reiner Komplementärfarbe nebeneinander vibrieren. Deine Nutzer fühlen es, bevor sie es benennen können.
• Volle Dashboards. Eine Oberfläche, in der jedes Element um Aufmerksamkeit kämpft, ist eine, die niemand benutzt.
• Druck bei niedriger Auflösung. Besonders Zeitungsdruck — das Paar trennt sich schlecht und wirkt matschig.

Modifikatoren, die den Konflikt zähmen

Wenn ein reines Komplement zu laut ist, hast du drei Stellschrauben:

1. Tönungen — füge Weiß hinzu. #FF0000 wird zu #FFB3B3. Gleicher Farbton, geringere Lautstärke.
2. Schattierungen — füge Schwarz hinzu. #FF0000 wird zu #660000. Tief, edel, weniger aggressiv.
3. Dämpfung — ziehe es Richtung Grau. #FF0000 wird zu #B36B6B. Modern, designed, „weicher Marken"-Look.

Die meisten professionellen Paletten verwenden eine gedämpfte Hauptfarbe und einen gesättigten Akzent. Das behält die Harmonie des Komplements bei und überspringt den Konflikt.

Komplementärfarben in berühmten Marken

Du siehst täglich Komplementärpaletten, ohne sie zu benennen. Hier sind acht, die du sicher gesehen hast.

• FedEx — Lila #4D148C und Orange #FF6600. Der Pfeil im Negativraum bekommt die ganze Aufmerksamkeit. Aber die Farbwahl macht das Wortmarken-Logo aus einem Lieferwagen bei 100 km/h sichtbar.
• Mastercard — Rot #EB001B und Gelb-Orange #F79E1B. Nicht reines Komplement, aber sehr nah dran. Die Überlappung zwischen den Kreisen erzeugt eine dritte Farbe, die Teil der Markenmagie ist.
• Lakers — Lila #552583 und Gelb-Gold #FDB927. Reines Gelb und Lila, abgestimmt auf Arenasichtbarkeit und TV-Übertragung.
• The Simpsons — gelbe Haut, blaue Haare (Marge). Matt Groening wählte Farben, mit denen Zuschauer einen Charakter in der Geschwindigkeit eines Animations-Cels identifizieren konnten. Das Komplementärpaar lässt die Silhouette herausstechen.
• IKEA — Blau #0058A3 und Gelb #FBD914. Schwedische Flaggenfarben, aber auch das sichtbarste Farbpaar von einem Autobahnschild.
• Nickelodeon (klassisch) — Orange #F47D31 gegen die blautönigen Medien drumherum. Der orangene Splat ist auf 1/100 eines Bildschirms lesbar.
• Heineken — Grünes #007A33 Etikett mit einem roten #E1001A Stern. Der rote Stern ist klein, leistet aber den Großteil der Schwerstarbeit für die Marke.
• Dunkin' — Pink #FF671F (orange-lastig) und Braun-Lila #522398. Ein modernes Komplement, abgemildert durch das warme Pink und das kühle Braun.

Was eint diese? Keine davon nutzt 50/50-Aufteilungen. Jede Marke hier wählt eine Hauptfarbe und nutzt das Komplement als Akzent — meist 80/20 oder steiler.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Variationen des Komplementärschemas

Reines Komplementär ist das Schema mit dem höchsten Kontrast, aber auch das am schwersten auszubalancierende. Drei Varianten geben dir den größten Teil des Schwungs mit weniger Risiko eines Konflikts.

Split-Komplementär

Wähle eine Farbe, dann verwende die zwei Farben neben ihrem direkten Komplement anstelle des Komplements selbst. Statt Blau + Orange würdest du also Blau + Rot-Orange + Gelb-Orange verwenden.

Das gibt dir Kontrast ohne den frontalen Konflikt. Es ist das sicherste „Hochenergie"-Schema und wahrscheinlich das meistgenutzte im modernen Webdesign. Wenn reines Komplementär sich wie Schreien anfühlt, fühlt sich Split-Komplementär wie Betonung an.

Beispiel-Palette: #264653 (Blau) + #E76F51 (Rot-Orange) + #F4A261 (Gelb-Orange).

Doppel-Komplementär (tetradisch)

Zwei Komplementärpaare gleichzeitig — vier Farben, die ein Rechteck auf dem Kreis bilden. Also Blau + Orange + Gelb + Lila oder Rot + Grün + Blau + Orange.

Das ist das ausdrucksstärkste Schema, aber auch das einfachste zu ruinierende. Die Regel: Wähle eine Farbe als Hauptfarbe, nutze die anderen als Akzente. Editorial-Design und Lifestyle-Marken nutzen das, wenn sie ein „reichhaltiges, geschichtetes" Gefühl wollen.

Nah-Komplementär

Eine Farbe, gepaart mit einem Farbton 20-30 Grad versetzt von ihrem echten Komplement. Etwas weniger harmonisch, aber moderner. Funktioniert großartig, wenn reines Komplement zu klischeehaft wirkt — zum Beispiel Marken, die „Blau und Orange" wollen, ohne wie jedes andere Start-up auszusehen.

Für andere Schemata — die ruhige, nebeneinander liegende analoge Palette oder die einfarbige monochromatische Palette — siehe diese Leitfäden. Dieser Artikel bleibt bei Komplementär.

Tools zum Auswählen von Komplementärpaletten

Du kannst Komplementärpaletten auf verschiedene Arten erstellen:

• Aus einem Bild sampeln. Ziehe eine Markenfarbe aus einem Logo, Hero-Foto oder der Seite eines Konkurrenten. Unser Farbpaletten-Extraktor nimmt jedes Bild und gibt die Top-5-Farbpalette plus vorgeschlagene Komplemente zurück.
• Vom Bildschirm wählen. Wenn du mitten in Pinterest eine großartige Palette entdeckst, schnappt sich der Farbwähler den genauen Hex-Wert eines beliebigen Pixels und zeigt sein Komplement sofort an.
• Von Grund auf bauen. Beginne mit einer Saat-Farbe und lass den Farbpaletten-Generator ein vollständiges Komplementär-, Split-Komplementär- oder Analogschema erstellen — mit Hex, RGB und HSL für jeden Swatch.
• Hex zu RGB konvertieren. Sobald du deine Palette gewählt hast, gibt unser Hex-zu-RGB-Konverter die Werte für CSS, Designtools oder Druckspezifikationen.

Externe Tools, die es zu kennen lohnt: Adobe Color zeigt jedes Schema auf einem Live-Kreis. Coolors ist der schnellste Weg, um zu sperren und zu drehen, bis du eine funktionierende Kombination findest. Der Sessions College Farbrechner ist eine praktische Schnellreferenz für die Mathematik hinter jedem Schema.

Barrierefreiheit: Komplementärfarben und Kontrast

Die große Falle bei Komplementärpaaren: Hoher Farbkontrast bedeutet nicht hoher Helligkeitskontrast. Rot und Grün haben maximalen Farbkontrast, aber ähnliche Helligkeit. Sie scheitern an WCAG-Kontrast für Fließtext, und sie sind unsichtbar für rot-grün farbenblinde Nutzer (etwa 8 % der Männer).

Zwei Regeln, damit dich das nicht beißt:

1. Prüfe immer den Helligkeitskontrast separat. Nutze einen Kontrastprüfer, um sicherzustellen, dass dein Paar WCAG AA besteht (4,5:1 für normalen Text, 3:1 für großen Text). Viele „lebendige" Paare scheitern bei kleinen Textgrößen.
2. Verschlüssele Bedeutung niemals nur in Farbe. Ein rotes Fehlericon neben einem grünen Erfolgsicon ist für einen farbenblinden Nutzer unsichtbar. Füge ein Icon, ein Label oder eine Form hinzu, damit die Botschaft auch ankommt, wenn die Farbe es nicht tut.

Für einen tieferen Einblick in WCAG-Farbkontrast-Standards, einschließlich der Mathematik hinter dem 4,5:1-Verhältnis, siehe unseren vollständigen Leitfaden. Die Mindestkontrast-Spezifikation des W3C ist die offizielle Quelle.

Komplementärpaletten in freier Wildbahn einfangen

Wenn du eine großartige Palette in jemandem anderen Produkt, Social-Post oder Markenasset entdeckst, ist der schnellste Weg, sie zu speichern, den Bildschirm zu schnappen und die Farben herauszuziehen. ScreenSnap Pro macht den Screenshot, und unsere Farbtools übernehmen den Rest. Lege das Bild in den Paletten-Extraktor und du hast die Hex-Codes in Sekunden.

ScreenSnap Pro ist ein einmaliger Kauf für 29 $ (kein Abo). Es funktioniert auf Mac und Windows und kommt mit den Annotationswerkzeugen und über 150 Verlaufshintergründen, die du zum Markieren von Referenzaufnahmen brauchst. Eingebaute OS-Screenshots geben dir die Bitmap. Der Extraktor verwandelt sie in eine nutzbare Palette.

Häufig gestellte Fragen

Was ist das Komplement von Rot?

Rots Komplement ist Grün. Auf dem RYB-Farbkreis liegt Rot bei 0° und Grün bei 180°. Im digitalen RGB ist Rots Komplement Cyan (#FF0000 wird zu #00FFFF). Für die meisten Designarbeiten verwende Grün. Für reine Bildschirmarbeit wie Motion Graphics ist Cyan korrekter.

Sind Rot und Grün wirklich komplementär?

Ja — auf dem RYB-Farbkreis, den Designer und Künstler verwenden. Sie sind 180° auseinander, und dein Auge sieht sie als maximale Gegensätze. Deshalb hinterlässt das Anstarren von Rot einen grünen Geist. Auf dem RGB-Kreis, den Monitore verwenden, ist Rots echtes Komplement Cyan. Aber in der Praxis verwenden die meisten Paletten-Tools und Markenrichtlinien immer noch das RYB-Paar.

Wie finde ich das Komplement einer Farbe?

Der schnellste Weg ist ein Farbwähler-Tool. Gib einen Hex-Code ein, und es gibt das Komplement zurück. Von Hand kannst du das Komplement finden, indem du die RGB-Werte umkehrst: ziehe jeden Kanal von 255 ab. Also wird #FF6600 (255, 102, 0) zu #0099FF (0, 153, 255). Oder öffne den Farbwähler, füge deinen Hex ein und lies das Komplement vom Kreis ab.

Was ist der Unterschied zwischen Komplementär und Split-Komplementär?

Komplementär verwendet zwei Farben direkt gegenüberliegend auf dem Kreis. Split-Komplementär verwendet drei Farben: deine Basisfarbe plus die zwei Farben neben ihrem Komplement (anstelle des Komplements selbst). Split ist sanfter. Du behältst den hohen Kontrast, überspringst aber den frontalen Konflikt. Deshalb bevorzugen die meisten modernen Webdesigner es für vollständige UI-Paletten.

Was sind die besten Komplementärpaare für Branding?

Es kommt auf das Gefühl an, das du willst. Für Energie und Sichtbarkeit (Sport, Tech, Fast Food) verwende Blau/Orange oder Gelb/Lila bei voller Sättigung. Für Klasse (Luxus, Editorial, Beauty) dämpfe beide Hälften — Burgund/Waldgrün oder Koralle/Türkis. Für Wärme (Wellness, Kinder, Lifestyle) verwende Tönungen — Pfirsich/staubiges Blau. Die Regel: Wähle eine Hauptfarbe (60-70 %) und verwende das Komplement als Akzent.

Warum wirken Komplementärfarben so lebendig?

Zwei Gründe. Erstens, Simultankontrast — dein visuelles System drückt benachbarte Farben auseinander, sodass jede Seite gesättigter aussieht, als sie es tatsächlich ist. Zweitens, Gegenfarbtheorie: Rot-Grün und Blau-Gelb werden von gegensätzlichen Neuronenpaaren in deiner Netzhaut verarbeitet. Wenn beide gleichzeitig feuern, fühlt sich das Signal verstärkt an. Zusammen macht das Komplemente zum kontrastreichsten Paar, das das menschliche Auge sehen kann.

Kann ich drei Komplementärfarben gleichzeitig verwenden?

Nicht direkt. Per Definition ist „komplementär" eine Zwei-Farben-Beziehung. Aber du kannst ein doppel-komplementäres (oder tetradisches) Schema verwenden, das zwei Komplementärpaare zu insgesamt vier Farben kombiniert. Wähle eine als Hauptfarbe, verwende den Rest als Akzente. Das ist das reichste Schema, aber auch das am leichtesten zu übertreibende, daher bleiben die meisten Designer bei Split-Komplementär.

Ist Komplementär dasselbe wie gegenüberliegende Farben?

Im lockeren Gebrauch, ja — „gegenüberliegende Farben" bedeutet fast immer komplementär. Streng genommen kann „gegenüberliegend" jedes Paar quer über den Kreis bedeuten, während „komplementär" 180° auseinander bedeutet. Paare, die 160° oder 200° auseinander liegen, werden als nah-komplementär bezeichnet.

Baue Paletten schneller mit den richtigen Tools

Komplementärfarben sind die kontrastreichste Harmonie, die du bekommen kannst. Das macht sie perfekt für Akzente, CTAs und Blickfänger — und zur Katastrophe für Fließtext oder gleich große Blöcke. Wähle eine Farbe als Hauptfarbe, verwende das Komplement zu 10-30 %, lehne dich auf Tönungen, Schattierungen und Dämpfung, wenn das reine Paar zu laut wirkt, und überprüfe immer den Helligkeitskontrast separat für die Barrierefreiheit.

Wenn du bereit bist zu bauen, nimmt der Farbpaletten-Generator einen Saat-Hex und gibt vollständige komplementäre, split-komplementäre und tetradische Paletten in Sekunden zurück. Der Farbwähler sampelt jedes Pixel vom Bildschirm oder Bild und zeigt sein Komplement live. Und um Inspiration in freier Wildbahn einzufangen, fließt der Screenshot- und Annotations-Workflow von ScreenSnap Pro (29 $ einmalig, Mac und Windows) direkt in den Paletten-Extraktor, damit du nie wieder eine großartige Kombination verlierst.

Für das größere Bild davon, wie Komplementär mit den anderen Harmonien zusammenpasst, deckt der Farbtheorie-Hub alle sechs Schemata nebeneinander ab.