Komplementärfarben

Was sind Komplementärfarben?

Komplementärfarben sind Farben, die sich im gewählten Farbkreis gegenüberstehen. Dadurch entsteht ein starker Farbkontrast. Das kann gut funktionieren, wenn du eine Akzentfarbe suchst, zum Beispiel für Buttons, Markierungen, Diagramme oder eine zweite Farbe in einer Illustration.

Wichtig ist der gewählte Farbkreis. Am Bildschirm arbeitest du meist mit RGB und HSL. In der Malerei und im Kunstunterricht ist der Farbkreis nach Itten verbreitet. Deshalb kann dieselbe Ausgangsfarbe unterschiedliche Ergebnisse liefern: Rot ergibt im RGB-Farbkreis #00FFFF, nach Itten aber #00FF00. Bei Blau ist es ähnlich: Im RGB-Farbkreis gehört #FFFF00 dazu, nach Itten #FF8000.

Der Rechner akzeptiert HEX, rgb(…), hsl(…) oder Farbnamen und gibt dir die passende Gegenfarbe für den gewählten Farbkreis aus.

Wie berechnet man Komplementärfarben?

Im RGB- und HSL-Modell wird die Komplementärfarbe über den Farbton berechnet: Du nimmst den HSL-Farbton, addierst 180° und setzt den Wert wieder auf den Farbkreis zurück. Sättigung und Helligkeit bleiben dabei gleich. Für das RGB-Negativ gilt dagegen: Jeder RGB-Kanal wird von 255 abgezogen. Das kann gleich aussehen, muss es aber nicht.

Ein Beispiel: Die Farbe #3366CC wird als rgb(51, 102, 204) und hsl(220°, 60 %, 50 %) beschrieben. Für die Komplementärfarbe im RGB-Farbkreis wird der Farbton verschoben:

• Farbton: 220° + 180° = 40°
• Sättigung und Helligkeit bleiben gleich
• Ergebnis: #CC9933

Der Rechner zeigt dazu auch die CSS-Werte: #CC9933 entspricht rgb(204, 153, 51) und hsl(40°, 60 %, 50 %). In diesem Beispiel ist das RGB-Negativ ebenfalls #CC9933. Das liegt an der konkreten Ausgangsfarbe. Bei #2E7D32 ist die berechnete Komplementärfarbe #7D2E79, das RGB-Negativ aber #D182CD. Wenn du eine gestalterische Gegenfarbe suchst, ist die HSL-Komplementärfarbe meist die passendere Angabe.

RGB-Farbkreis oder Itten: Warum kommen andere Gegenfarben heraus?

Der RGB-Farbkreis beschreibt Bildschirmfarben. Er passt zu Webdesign, CSS, Apps, Präsentationen und digitalen Grafiken. Hier sind typische Paare Rot und Cyan, Grün und Magenta sowie Blau und Gelb. Deshalb hat #00FF00 im RGB-Farbkreis die Komplementärfarbe #FF00FF. Gelb #FFFF00 führt zu #0000FF.

Der Farbkreis nach Itten stammt aus der Malerei. Er orientiert sich stärker an Farbmischung mit Pigmenten und an klassischen Kunstunterricht-Paaren. Dort ist Rot mit Grün verbunden, Blau mit Orange und Gelb mit Violett. Deshalb ergibt #FF0000 nach Itten #00FF00, während im RGB-Farbkreis #00FFFF herauskommt.

Das ist kein Fehler, sondern ein anderer Bezugspunkt. Wenn du eine Website gestaltest, nimm RGB. Wenn du ein Bild malst, eine Unterrichtsaufgabe löst oder mit dem 12-teiligen Itten-Farbkreis arbeitest, nimm Itten. Bei Mischfarben werden die Unterschiede besonders sichtbar: Orange #FF8000 hat nach Itten #0000FF als Komplementärfarbe, im RGB-Farbkreis steht dazu #007FFF.

Farbharmonie mit Triade, Split-Komplementär und Analogfarben

Eine direkte Komplementärfarbe wirkt oft kräftig. Für Akzente kann das gut sein, für große Flächen manchmal zu hart. Darum zeigt der Rechner weitere Farbharmonien an.

Split-Komplementärfarben liegen neben der eigentlichen Gegenfarbe. Bei #3366CC sind das #CC4C33 und #B3CC33. Diese Kombination ist häufig etwas ruhiger als die direkte Gegenfarbe #CC9933, behält aber den klaren Kontrast. Für ein Interface könntest du die Grundfarbe für Navigation oder Überschriften verwenden und eine Split-Farbe für Hinweise oder Statusflächen.

Triadische Farben verteilen sich gleichmäßiger im Farbkreis. Bei #3366CC sind die Triadenfarben #CC3366 und #66CC33. Das wirkt bunter und eignet sich eher für Diagramme, Illustrationen oder Paletten mit mehreren gleich starken Farben.

Analogfarben liegen nahe an deiner Ausgangsfarbe. Bei #3366CC sind das #4D33CC und #33B3CC. Sie sind besser, wenn du eine ruhige Palette brauchst, etwa für Hintergründe, Kartenflächen oder abgestufte UI-Elemente. Analogfarben erzeugen weniger Spannung als Komplementärfarben, dafür wirken sie zusammen oft geschlossener.

Kontrast prüfen: Komplementärfarbe ist nicht automatisch gut lesbar

Eine passende Gegenfarbe ist noch keine Garantie für gute Lesbarkeit. Der Rechner zeigt deshalb das Kontrastverhältnis nach WCAG an. Das ist besonders relevant, wenn Text auf einer Farbe steht oder wenn eine Farbe als Button, Badge oder Hinweisfläche genutzt wird.

Bei #3366CC ist die Komplementärfarbe #CC9933, aber der Kontrast zwischen beiden liegt nur bei 2,09 : 1 und wird als nicht barrierefrei bewertet. Dieselbe Ausgangsfarbe hat zu Weiß 5,37 : 1 und zu Schwarz 3,91 : 1. Weiß ist hier also die bessere Textfarbe, während Schwarz nur für große Schrift bewertet wird.

Weitere Beispiele zeigen, warum du den Kontrast separat prüfen solltest:

• #0000FF zu #FFFF00 erreicht 8,00 : 1 und AAA.
• #00FF00 zu #FF00FF erreicht 2,29 : 1 und ist nicht barrierefrei.
• #FFFF00 zu Weiß erreicht 1,07 : 1 und ist nicht barrierefrei.
• #FFFF00 zu Schwarz erreicht 19,56 : 1 und AAA.

Typische Fehler entstehen, wenn Komplementärfarbe und Textfarbe verwechselt werden. Nutze die Gegenfarbe lieber als Akzent und prüfe für Text immer den konkreten Vordergrund-Hintergrund-Kontrast. Auch die ungefähren Farbnamen sind nur eine Orientierung. Für CSS, Designsysteme und Dokumentation solltest du die HEX-, RGB- oder HSL-Werte übernehmen.