Komplementärfarben: Definition, Farbkreis, Farbpaare und Einsatz im Webdesign

Rot und Grün, Blau und Orange, Gelb und Violett: So lernt man Komplementärfarben in der Schule. Wer am Bildschirm mit einem Farbwähler arbeitet, bekommt jedoch andere Paare angezeigt. Dort liegt Rot gegenüber von Cyan und Gelb gegenüber von Blau. Beides ist richtig, denn welche Farben komplementär sind, hängt vom Farbmodell ab. Dieser Beitrag erklärt die Grundlagen, zeigt die wichtigsten Farbpaare mit Hex-Werten und worauf Sie beim Einsatz im Webdesign achten sollten.

Was sind Komplementärfarben?

Komplementärfarben sind zwei Farben, die sich im Farbkreis genau gegenüberliegen und gemischt eine unbunte Farbe ergeben: bei Licht Weiß, bei Farbstoffen ein dunkles Grau bis Schwarz. Der Begriff kommt vom lateinischen „complementum“, Ergänzung. Jede der beiden Farben ergänzt die andere also zu einem neutralen Ganzen. Man spricht auch von Gegenfarben oder Ergänzungsfarben.

Daraus ergeben sich zwei Eigenschaften, die für die Gestaltung wichtig sind. Nebeneinander bilden Komplementärfarben den größtmöglichen Unterschied im Farbton und wirken besonders kräftig. Miteinander vermischt heben sie sich dagegen gegenseitig auf. Malerinnen und Maler nutzen das, um eine zu grelle Farbe zu „brechen“: Eine kleine Menge der Komplementärfarbe macht sie gedeckter.

Lichtfarben und Körperfarben: zwei Arten der Farbmischung

Um zu verstehen, warum es unterschiedliche Farbpaare gibt, hilft ein Blick auf die Farbmischung. Die Farbenlehre unterscheidet zwei grundlegende Fälle.

Bei der additiven Mischung entsteht Farbe durch Licht, das sich addiert. Jedes Pixel eines Bildschirms besteht aus roten, grünen und blauen Lichtpunkten. Bei der subtraktiven Mischung schlucken Farbstoffe jeweils einen Teil des Lichts. Je mehr Farbstoffe übereinanderliegen, desto dunkler wird es. Weil Cyan, Magenta und Gelb zusammen kein sattes Schwarz ergeben, kommt im Druck Schwarz als vierte Farbe hinzu. Daher der Name CMYK.

Die beiden Systeme hängen eng zusammen: Die Grundfarben des einen sind die Komplementärfarben des anderen. Cyan ist die Komplementärfarbe von Rot, Magenta die von Grün und Gelb die von Blau.

Der Farbkreis nach Johannes Itten

Der bekannteste Farbkreis im deutschsprachigen Raum stammt von Johannes Itten (1888 bis 1967). Der Schweizer Maler und Kunstpädagoge lehrte ab 1919 am Bauhaus in Weimar. Bekannt wurde sein zwölfteiliger Farbkreis vor allem durch das Buch „Kunst der Farbe“ von 1961. Er ist bis heute in Schulen, Kunstunterricht und Designausbildung verbreitet.

Ittens Farbkreis baut auf drei Grundfarben auf: Gelb, Rot und Blau. Aus ihnen entstehen die Mischfarben zweiter Ordnung Orange, Grün und Violett und daraus sechs Mischfarben dritter Ordnung. Komplementär sind jeweils die Farben, die sich im Kreis gegenüberliegen. Dabei gilt ein einfaches Prinzip: Die Komplementärfarbe einer Grundfarbe ist die Mischung der beiden anderen Grundfarben. Gelb liegt also gegenüber von Violett, das aus Rot und Blau entsteht.

Für Ittens Farben gibt es keine verbindlichen Hex-Werte, weil er mit Malfarben gearbeitet hat und nicht mit Bildschirmfarben. Aus heutiger Sicht wird sein Farbkreis auch kritisiert: Er beruht auf künstlerischer Erfahrung und nicht auf der Physiologie des Sehens, und mit Gelb, Rot und Blau lassen sich viele Farben nicht mischen. In der Drucktechnik haben sich deshalb Cyan, Magenta und Gelb als Grundfarben durchgesetzt. Als Denkmodell für Harmonie und Kontrast ist Ittens Farbkreis trotzdem nützlich. Ähnliche Paare kannte bereits Johann Wolfgang von Goethe in seiner Farbenlehre.

Komplementärfarben in modernen Farbmodellen

Am Bildschirm arbeiten Designer mit anderen Modellen. Das wichtigste ist RGB, meist dargestellt als Farbkreis im HSL-Modell. Dort wird jede Farbe über einen Farbton in Grad beschrieben: Rot liegt bei 0 Grad, Gelb bei 60, Grün bei 120, Cyan bei 180, Blau bei 240 und Magenta bei 300 Grad. Die Komplementärfarbe liegt immer 180 Grad weiter.

Im Vergleich mit Itten zeigen sich die Unterschiede deutlich: Zu Rot gehört am Bildschirm Cyan statt Grün, zu Gelb Blau statt Violett und zu Blau Gelb statt Orange. Für den Druck mit CMYK gelten dieselben Paare wie bei RGB, weil beide Systeme direkt aufeinander aufbauen.

Einen dritten Ansatz verfolgt die Gegenfarbtheorie, die auf den Physiologen Ewald Hering im 19. Jahrhundert zurückgeht. Nach ihr verarbeitet unser Sehsystem Farben in den Gegensätzen Rot und Grün sowie Gelb und Blau. Wahrnehmungsorientierte Farbräume wie CIELAB und das Natural Color System (NCS) bauen auf diesem Prinzip auf.

Komplementärfarbe bestimmen

Für einen Hex-Wert lässt sich die Komplementärfarbe auf zwei Arten ermitteln, die zu unterschiedlichen Ergebnissen führen können:

• Invertieren: Jeder der drei Farbkanäle wird von FF abgezogen. Aus #0066CC wird #FF9933. Dabei kehrt sich auch die Helligkeit um: Aus einem mittleren Blau wird ein helles Orange.
• Farbton drehen: Im HSL-Modell wird nur der Farbton um 180 Grad gedreht, Sättigung und Helligkeit bleiben gleich. Aus #0066CC wird #CC6600, ein Orange in derselben Helligkeitsstufe.

Beide Ergebnisse sind Komplementärfarben im RGB-Sinn, denn der Farbton ist in beiden Fällen derselbe. Für die Gestaltung ist der Unterschied aber wichtig, wie der Abschnitt zum Webdesign zeigt. Werkzeuge wie Adobe Color bieten eine Harmonieregel „Komplementär“, die das Gegenstück direkt am Farbkreis anzeigt. In CSS können Sie die Komplementärfarbe in aktuellen Browsern mit der relativen Farbsyntax sogar berechnen lassen:

:root {
  --marke: #0066cc;
  --gegenfarbe: hsl(from var(--marke) calc(h + 180) s l); /* ergibt #cc6600 */
}

Wer ältere Browser unterstützen muss oder die Farbe ohnehin von Hand feinjustiert, trägt den berechneten Wert besser fest im Designsystem ein.

Wirkung von Komplementärfarben

Komplementärkontrast

Nebeneinander steigern sich Komplementärfarben gegenseitig in ihrer Leuchtkraft. Rot wirkt neben Grün röter, Blau neben Orange blauer. Dieser Komplementärkontrast zieht den Blick an und wirkt spannungsreich. Bei großen, gesättigten Flächen kann er aber auch grell und unruhig aussehen. Johannes Itten zählte ihn zu seinen sieben Farbkontrasten, neben Farbe-an-sich-Kontrast, Hell-Dunkel-Kontrast, Kalt-Warm-Kontrast, Simultankontrast, Qualitätskontrast und Quantitätskontrast.

Simultankontrast

Unser Auge erzeugt zu jeder Farbe gleichzeitig ihre Gegenfarbe. Ein neutrales Grau auf rotem Grund wirkt deshalb beispielsweise leicht grünlich, auf grünem Grund leicht rötlich. Im Webdesign erklärt das, warum eine Markenfarbe auf verschiedenen Hintergründen unterschiedlich aussieht und warum graue Texte auf farbigen Flächen manchmal einen Farbstich zu haben scheinen.

Nachbild

Wer längere Zeit auf eine kräftige Farbe schaut und dann auf eine weiße Fläche blickt, sieht ein Nachbild in der Gegenfarbe. Dieser sogenannte Sukzessivkontrast gilt als ein Grund dafür, dass OP-Kleidung häufig grün oder blau ist: Auf diesen Farben stört das Nachbild nach dem Blick auf rotes Blut weniger.

Flimmern bei gleicher Helligkeit

Wenn zwei Komplementärfarben gleich hell und stark gesättigt sind, entsteht an ihren Kanten ein unangenehmes Flimmern. Schrift in solchen Kombinationen scheint zu vibrieren und lässt sich kaum lesen. Ein kräftiges Rot auf einem gleich hellen Petrol ist ein typisches Beispiel. Für Plakate und Kunst kann dieser Effekt gewollt sein, für Texte auf einer Website ist er ein Problem.

Das richtige Mengenverhältnis

Komplementärfarben wirken ausgewogener, wenn sie nicht in gleichen Mengen auftreten. Itten griff dafür auf die Lichtwerte zurück, die Goethe den Farben zuordnete, und leitete daraus harmonische Flächenverhältnisse ab: Gelb zu Violett etwa 1 zu 3, Orange zu Blau 1 zu 2, Rot zu Grün 1 zu 1. Das hellere Gelb braucht also weniger Fläche als das dunklere Violett. Als grobe Orientierung ist das bis heute hilfreich.

Komplementärfarben im Webdesign

Im Webdesign sind Komplementärfarben vor allem ein Werkzeug für Akzente. Eine Seite, die überwiegend in Blautönen gestaltet ist, lenkt mit orangefarbenen Buttons den Blick genau dorthin, wo Besucher klicken sollen. Die Akzentfarbe sollte dafür sparsam eingesetzt und für die wichtigsten Aktionen reserviert werden. Eine verbreitete Faustregel verteilt die Farben im Verhältnis 60 zu 30 zu 10: viel neutrale Grundfarbe, etwas Markenfarbe, wenig Akzent.

Kontrast nach WCAG prüfen

Komplementär heißt nicht automatisch kontrastreich im Sinne der Barrierefreiheit. Die Web Content Accessibility Guidelines (WCAG) messen den Helligkeitsunterschied, nicht den Unterschied im Farbton. Für normalen Text verlangen sie auf der üblichen Konformitätsstufe AA mindestens 4,5:1, für große Schrift sowie für Bedienelemente wie Buttons und Formularfelder mindestens 3:1. Die folgenden Beispiele zeigen, wie unterschiedlich Komplementärpaare abschneiden:

Die Lösung liegt fast immer in der Helligkeit. Kombinieren Sie eine dunkle Variante der einen Farbe mit einer hellen Variante der anderen, zum Beispiel Dunkelblau mit hellem Orange. So bleibt die Spannung des Komplementärkontrasts erhalten, und Texte sind trotzdem gut lesbar. Ein einfacher Test: Wandeln Sie einen Screenshot in Graustufen um. Wenn Schrift und Hintergrund dann ineinanderlaufen, fehlt der Helligkeitskontrast. Mehr zu den Anforderungen lesen Sie in unserem Beitrag zu den WCAG und auf der Seite Barrierefreie Website.

Weitere Praxistipps

• Gesättigte Komplementärfarben nie großflächig direkt nebeneinander einsetzen, sondern mit neutralen Flächen trennen
• Für Flächen und Hintergründe hellere oder gedecktere Varianten nutzen, die volle Sättigung dem Akzent vorbehalten
• Rot und Grün nicht als einziges Unterscheidungsmerkmal verwenden, weil viele Menschen eine Rot-Grün-Sehschwäche haben
• Farben auch im dunklen Modus und auf mobilen Geräten im Tageslicht prüfen, mehr dazu im Beitrag zum Responsive Webdesign
• Alle Farbwerte als feste Tokens im Designsystem hinterlegen, damit sie überall gleich eingesetzt werden, wie im Ratgeber zum Corporate Design beschrieben

Welche Assoziationen einzelne Farben wecken können, lesen Sie in unserem Beitrag zur Farbpsychologie.

Verwandte Farbschemata

Der Komplementärkontrast ist nur eine von mehreren Farbharmonien, die sich am Farbkreis ablesen lassen. Die Gradangaben beziehen sich auf den Farbkreis im HSL-Modell.

Komplementärfarben im Alltag

Komplementäre Farbkombinationen findet man an vielen Stellen. Rot und Grün prägen die Weihnachtszeit. Vincent van Gogh setzte in seinem Gemälde „Das Nachtcafé“ von 1888 bewusst auf den Gegensatz von Rot und Grün. In Filmplakaten und beim Color Grading von Kinofilmen ist die Kombination aus Orange für Hauttöne und Blaugrün für Schatten und Hintergründe so verbreitet, dass sie unter dem Namen „Orange and Teal“ bekannt ist. Das Farbpaar Blau und Gelb, bekannt etwa von IKEA, zeigt die Unterschiede zwischen den Modellen: Im RGB-Farbkreis gelten Blau und Gelb als Komplementärfarben, bei Itten nicht.

Unterstützung bei Ihrer Farbpalette

Häufige Fragen