Komplementärfarben-Finder
Finden Sie die Komplementärfarbe (das Gegenteil) jeder Farbe, ihr RGB-Inverses und die lesbare Textfarbe dafür.
1.309 Aufrufe
So funktioniert es
Zwei Farben sind komplementär, wenn sie exakt an gegenüberliegenden Punkten des Farbkreises liegen, also 180° im Farbton auseinander. Mathematisch wandelt dieses Tool Ihre Farbe in das HSL-Modell um, nimmt ihren Farbtonwert und addiert 180° modulo 360 — ein Farbton von 40° (Orange) wird so beispielsweise zu 220° (Blau). Sättigung und Helligkeit bleiben unangetastet, sodass die Komplementärfarbe eine echte Drehung auf dem Kreis ist, keine zufällig andere Farbe. Nebeneinander gestellt verstärken sich Komplementärfarben optisch gegenseitig, weshalb die Komplementärfarbe die natürliche Wahl für Akzente, Buttons und Call-to-Actions ist, die sich gegen ein von der Grundfarbe geprägtes Design abheben sollen.
Dieser Effekt hat eine Grundlage im menschlichen Sehen selbst. Blickt man mehrere Sekunden auf eine gesättigte Farbe und schaut dann auf eine schlichte weiße Fläche, entsteht ein vorübergehendes Nachbild in etwa der Komplementärfarbe — ein echter physiologischer Effekt, verursacht durch die vorübergehende Ermüdung der farbempfindlichen Zapfenzellen in der Netzhaut. Das trägt mit dazu bei, dass komplementäre Paare zusammen besonders lebendig und "wach" wirken: Das Auge wird durch denselben Mechanismus vorbereitet, der auch Nachbilder erzeugt. Neben der Komplementärfarbe berechnet dieses Tool auch das RGB-Inverse (255 minus jeden Kanal — das klassische „Fotonegativ") und wählt anhand der wahrgenommenen Leuchtdichte Ihrer Eingabe eine lesbare Textfarbe (Schwarz oder Weiß).
Was Sie wissen sollten
- Komplementärfarbe und Inverse sind nicht dieselbe Operation — sie stimmen nur bei voll gesättigten Farben überein; bei allem Gedämpften, Pastellfarbenen oder Grauen liefern die beiden Berechnungen sichtbar unterschiedliche Ergebnisse.
- Verwenden Sie die Komplementärfarbe sparsam. Zwei Komplementärfarben in voller Kraft und gleichen Anteilen neigen dazu, optisch zu "vibrieren" und das Auge zu ermüden; eine 90/10-Balance wirkt beabsichtigt statt aufdringlich.
- Der Textfarben-Vorschlag ist ein Ausgangspunkt, keine WCAG-Garantie — prüfen Sie das tatsächliche Kontrastverhältnis für Fließtext vor der Veröffentlichung mit einem dedizierten Prüfwerkzeug.
- Ein durchgerechnetes Beispiel: Für
#2563EB(ein mittleres Blau, Farbton ≈ 221°) liegt die Komplementärfarbe nahe Farbton 41° (ein warmes Bernstein-/Orangeton) und das RGB-Inverse ist#DA9C14— hier optisch in derselben Nachbarschaft, weil die Ausgangsfarbe recht gesättigt ist, doch bei einem gedämpften Graublau würden die beiden Methoden deutlich auseinanderlaufen.
Häufig gestellte Fragen
Komplementärfarbe vs. Inverse — was ist der Unterschied?
Die Komplementärfarbe dreht nur den Farbton auf dem Farbkreis (+180°) und lässt Sättigung und Helligkeit identisch; das RGB-Inverse dreht jeden Kanal unabhängig um (255−R, 255−G, 255−B), wie ein Fotonegativ. Bei einer gesättigten Grundfarbe können beide ähnlich aussehen, doch bei einem mittleren Grau oder Pastellton laufen sie deutlich auseinander — das Inverse eines mittleren Grautons bleibt mittelgrau, während dessen "Komplementärfarbe" technisch undefiniert ist, da eine vollständig entsättigte Farbe keinen Farbton zum Drehen besitzt.
Warum sieht man beim Wegschauen von einer Farbe deren Komplementärfarbe?
Das ist der "Nachbild"-Effekt: Die Zapfenzellen in Ihrer Netzhaut, die eine bestimmte Farbe wahrnehmen, ermüden nach anhaltender Belichtung vorübergehend. Schauen Sie danach auf eine neutrale weiße Fläche, reagieren die ermüdeten Zellen schwächer, während die anderen normal reagieren, und Ihr Gehirn interpretiert dieses Ungleichgewicht als Wahrnehmung der Komplementärfarbe — ein echtes physiologisches Phänomen, das in der Netzhautchemie verwurzelt ist, keine optische Täuschung oder Einbildung.
Wann sollte ich die Komplementärfarbe verwenden?
Als kleinen, bewussten Akzent — Buttons, Links, Hervorhebungen, Badges — über einem von der Grundfarbe dominierten Design. Beide Farben in voller Kraft zu etwa gleichen Anteilen zu verwenden, wirkt eher unruhig und ermüdet das Auge, statt gepflegt zu wirken; Designer entsättigen oder verdunkeln daher meist eine der beiden Farben, um den Effekt abzumildern.
Wie wird die lesbare Textfarbe bestimmt?
Anhand der wahrgenommenen Leuchtdichte der Farbe mittels der YIQ-Formel, die Rot, Grün und Blau nach der Empfindlichkeit des menschlichen Auges für jede dieser Farben gewichtet (Grün trägt weit mehr zur wahrgenommenen Helligkeit bei als Blau): helle Hintergründe erhalten dunklen Text, dunkle Hintergründe erhalten hellen Text, sodass die Kombination auf einen Blick lesbar bleibt.
Warum genau 180° und kein anderer Winkel?
Der Farbkreis stellt den Farbton als einen 360°-Zyklus dar, und 180° ist mathematisch der einzige Punkt mit maximalem Winkelabstand von jedem beliebigen Farbton — der weiteste Punkt, den eine Farbe von einer anderen einnehmen kann, während sie auf demselben Kreis bleibt. Genau diese maximale Trennung erzeugt den stärksten visuellen Kontrast; jeder kleinere Winkel (wie die für triadische Harmonie verwendeten 120°) opfert etwas von diesem Kontrast zugunsten von mehr Balance zwischen drei statt zwei Farben.
Ähnliche Tools
Problem melden
Komplementärfarben-Finder
Kommentare
Noch keine Kommentare — schreiben Sie den ersten!