Komplementärfarben
Finde das exakte Gegenstück zu jeder Farbe – berechnet im wahrnehmungsnahen OKLCH-Raum, damit das Paar dieselbe Buntheit behält – und lerne, maximalen Kontrast zu nutzen, ohne dass er schreit. Kostenlos und 100 % im Browser.
Was zwei Farben komplementär macht
Komplementärfarben liegen sich auf dem Farbkreis direkt gegenüber – eine Farbtondrehung um 180°. Blau steht warmem Orangegold gegenüber, Rot einem Cyangrün, Violett einem Gelbgrün. Diese Paarung ist keine beliebige Ästhetik: Dein Sehsystem kodiert Farbe in Gegenfarbkanälen, und gegenüberliegende Farbtöne reizen die entgegengesetzten Enden dieser Kanäle maximal. Deshalb hinterlässt das Anstarren eines roten Quadrats ein cyanfarbenes Nachbild – und deshalb lässt eine direkt daneben gesetzte Komplementärfarbe eine Farbe stärker gesättigt wirken: Jede schiebt die andere in Richtung ihres eigenen Gegenteils.
Warum die Gegenfarben dieses Tools besser aussehen als HSL-Gegenfarben
Dreht man den Farbton im gewöhnlichen HSL um 180°, ist das „Gegenteil“ eines tiefen, eleganten Blaus ein grelles, helles Orange – HSL tut so, als wären alle Farbtöne gleich hell, und deshalb wirft dich die Drehung bei einer völlig anderen wahrgenommenen Helligkeit wieder aus. Diese Seite dreht stattdessen in OKLCH: Die Komplementärfarbe erbt die wahrgenommene Helligkeit und Buntheit deiner Farbe, ein gedämpftes Marineblau bekommt also ein gedämpftes, würdevolles Bernstein statt eines Signalorange. Fällt das mathematische Gegenteil aus dem Bereich, den Bildschirme darstellen können, wird es vom CSS-Color-4-Algorithmus in den darstellbaren Farbraum abgebildet – auf die nächstgelegene Farbe mit gleichem Charakter gezogen.
Maximalen Kontrast nutzen, ohne dass es schreit
- Brich die Symmetrie. Der klassische Fehler ist 50/50 – zwei gesättigte Gegenfarben zu gleichen Teilen flimmern an der Kante und ermüden das Auge. Ziel sind eher 80/20: Eine Farbe regiert, die andere setzt Akzente.
- Nimm einer Seite die Sättigung. Ein voll gesättigter Akzent auf einer heruntergefahrenen Komplementärfarbe (oder umgekehrt) behält die Energie und verliert den Lärm.
- Setz Text nie in der einen Komplementärfarbe auf die andere. Gegenfarben mit gleicher Helligkeit haben trotz allem Farbton-Drama einen miserablen Lesekontrast – prüfe jedes Textpaar im Kontrast-Checker.
- Lass die Helligkeit entscheiden. Ein dunkles Blau gegen ein helles, warmes Gold ist ein Komplementärschema und zugleich lesbar; der Helligkeitsabstand erledigt die Lesbarkeit, der Farbtonabstand die Emotion.
Wo Komplementärschemata sich bezahlt machen
Call-to-Action-Buttons vor einem Markenhintergrund, Identitäten aus Sport und Gaming, Food-Fotografie (der Orange-Türkis-Look, der das Farbgrading im Film beherrscht, ist ein Komplementärschema), saisonaler Handel (Blau/Gold, Rot/Grün) und jeder Moment, in dem ein Element unübersehbar sein muss. Ist das Paar mit voller Wucht immer noch zu laut, tauscht die Split-Komplementär-Variante das exakte Gegenteil gegen dessen zwei Nachbarn – gleiche Richtung, weniger Spannung. Alles hier läuft zu 100 % in deinem Browser; speichere das Paar in „Meine Farben“ und probier es im realistischen Farb-Tester aus.
Häufige Fragen
Was ist die Komplementärfarbe von Blau?
Ein warmes Orangegold. Der genaue Wert hängt von deinem Blau ab – gib es oben ein, und das Tool berechnet das wahrnehmungsnahe Gegenstück; bei #3564c4 landet es eher im Bernsteinbereich als bei reinem Orange und behält so denselben zurückhaltenden Charakter.
Wie finde ich eine Komplementärfarbe von Hand?
Auf einem HSL-Farbkreis addierst du 180 zum Farbton und rechnest bei 360 wieder von vorn. Das ist die schnelle Näherung; dieses Tool verfeinert sie durch die Drehung in OKLCH, sodass das Ergebnis auch zur wahrgenommenen Helligkeit und Buntheit deiner Farbe passt.
Eignen sich Komplementärfarben für Text und Hintergrund?
Für sich genommen meist nicht – gegenüberliegende Farbtöne mit ähnlicher Helligkeit haben einen schlechten Lesekontrast und flimmern an den Kanten. Nutze einen großen Helligkeitsunterschied und bestätige das Verhältnis im Kontrast-Checker.
Warum wirkt meine Farbe neben ihrer Komplementärfarbe stärker?
Simultankontrast: Das Sehsystem treibt benachbarte Farben entlang der Gegenfarbachsen auseinander, deshalb wirkt jede der beiden neben der anderen gesättigter als allein.
Komplementär oder Split-Komplementär – was soll ich nehmen?
Komplementär für maximale Wucht bei sorgfältiger Dosierung; Split-Komplementär, wenn du denselben gerichteten Kontrast willst, aber mit sanfterer Spannung und einer Farbe mehr zum Arbeiten.