Komplementärfarben-Rechner: Farbharmonien berechnen

Eine Komplementärfarbe liegt auf dem Farbkreis genau gegenüber der Ausgangsfarbe, also um 180 Grad gedreht. Der Rechner wandelt den eingegebenen HEX-Wert zuerst in HSL um und addiert 180 zum Farbton-Winkel.

Aus #3366CC mit einem Farbton von 220 Grad wird so 400 Grad, modulo 360 ergibt das 40 Grad, was dem HEX-Wert #CC9933 entspricht.

Komplementärfarben erzeugen den stärksten visuellen Kontrast und werden in Design und Kunst eingesetzt, um Aufmerksamkeit zu lenken, Call-to-Action-Elemente hervorzuheben oder Spannung im Bild aufzubauen.

Beide Farben zusammen enthalten alle drei Primärfarben des Farbkreises, weshalb sie sich bei subtraktiver Mischung gegenseitig zu einem neutralen Grau aufheben.

Der HSL-Farbkreis basiert auf dem additiven RGB-Farbmodell, wie es Bildschirme verwenden: Rot bei 0 Grad, Grün bei 120 Grad und Blau bei 240 Grad sind gleichmäßig verteilt.

Der RYB-Farbkreis dagegen stammt aus der traditionellen Farbenlehre und verteilt Rot, Gelb und Blau als Primärfarben gleichmäßig. Das führt dazu, dass die Komplementärfarbe von Blau im HSL-Modell Gelb ist, im RYB-Modell dagegen Orange.

Für Webdesign, UI und CSS ist HSL die richtige Wahl, weil Monitore im RGB-Farbraum arbeiten. Für Malerei, Illustration und physische Farbmischung liefert der RYB-Modus die Farben, die beim tatsächlichen Mischen den erwarteten Kontrast erzeugen.

Der Rechner interpoliert den RYB-Farbkreis über definierte Stützpunkte und bildet die Ergebnisse zurück in HEX, sodass du sie auch digital weiterverwenden kannst.

Triadenfarben bilden ein gleichseitiges Dreieck auf dem Farbkreis: Ausgangsfarbe, plus 120 Grad und plus 240 Grad. Für #3366CC ergeben sich im HSL-Modell die Triade #CC3366 bei 340 Grad und #66CC33 bei 100 Grad.

Alle drei Farben haben denselben Sättigungswert und dieselbe Helligkeit, sind aber visuell klar unterscheidbar.

Triadenfarben eignen sich besonders für Dashboards, Infografiken und Diagramme, bei denen drei Kategorien gleichwertig dargestellt werden sollen.

Sie wirken lebendiger als Analogfarben, aber harmonischer als willkürlich gewählte Farben, weil ihr gleichmäßiger Abstand auf dem Farbkreis eine mathematisch fundierte Balance garantiert.

Bei der Anwendung empfiehlt es sich, eine der drei Farben als Hauptfarbe dominant einzusetzen und die beiden anderen als Akzente.

Analogfarben sind die direkten Nachbarn einer Farbe auf dem Farbkreis, im Rechner um jeweils 30 Grad nach links und rechts verschoben. Für #3366CC bei 220 Grad ergeben sich 250 Grad (#4C33CC, ein Violettblau) und 190 Grad (#33B2CC, ein Cyanblau).

Analogfarben wirken harmonisch, ruhig und professionell, weil sie denselben Grundton teilen und sich nur leicht unterscheiden.

Sie eignen sich für Hintergrundverläufe, Markenpaletten mit einem einheitlichen Farbklima und überall dort, wo die Farbgebung nicht ablenken, sondern unterstützen soll.

Im Vergleich dazu erzeugen Komplementärfarben maximalen Kontrast und eignen sich für Highlights und Akzente. Oft kombiniert man beides: Analogfarben als Grundpalette und eine Komplementärfarbe als einzelnen Akzent.

Das WCAG-Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei Farben nach der Formel der relativen Leuchtdichte. Der Rechner berechnet dieses Verhältnis zwischen der Eingabefarbe und Weiß.

Ein Wert von 4,5:1 oder höher erfüllt die WCAG-2.1-Anforderung AA für normalen Text (unter 18 Punkt), für großen Text ab 18 Punkt oder 14 Punkt fett reichen 3:1 aus. Für #3366CC ergibt sich 5,37:1, was beide Schwellen erfüllt.

Der Kontrastwert bezieht sich ausschließlich auf die Lesbarkeit von Text auf weißem Hintergrund und sagt nichts über Farbharmonie aus. Für andere Hintergrundfarben musst du das Verhältnis separat berechnen.

Werte unter 3:1 gelten generell als schlecht lesbar; Werte über 7:1 erfüllen das strengere AAA-Niveau.

Ja, alle Ergebnisse sind normalisierte HEX-Codes in Großbuchstaben, die du direkt in CSS-Eigenschaften wie color, background-color oder border-color einsetzen kannst. Die Schreibweise #CC9933 ist die Standardnotation, die jeder Browser versteht.

Für die Umrechnung in RGB oder HSL – etwa für rgba-Werte mit Transparenz oder hsl-basierte Design-Tokens – nutzt du den Farb-Konverter.

Ein typischer Workflow: Hauptfarbe in den Komplementärfarben-Rechner eingeben, die gewünschte Harmonie als HEX kopieren, im Farb-Konverter in HSL umrechnen und daraus Custom Properties ableiten, bei denen du nur den Helligkeitswert für Hover- und Disabled-Zustände variierst.

Im HSL-Modell sind Rot, Grün und Blau als Primärfarben gleichmäßig bei 0, 120 und 240 Grad verteilt, weil Bildschirme additiv mit diesen drei Farben arbeiten.

Im RYB-Modell sind Rot, Gelb und Blau die Primärfarben, und Gelb nimmt einen größeren Bereich des Kreises ein als im HSL-Modell.

Dadurch verschiebt sich die Position jeder Farbe auf dem Kreis, und die Komplementärfarbe von zum Beispiel Blau wird zu Orange statt zu Gelb.

Der Rechner verwendet definierte Stützpunkte für die Zuordnung zwischen HSL- und RYB-Graden und interpoliert dazwischen linear. Das Ergebnis entspricht dem, was ein Maler beim physischen Mischen erwarten würde.

Die Verschiebung betrifft besonders den Bereich zwischen Gelb und Grün, wo der RYB-Kreis deutlich von der HSL-Verteilung abweicht.

Der Rechner arbeitet ausschließlich im sRGB-Farbraum und verarbeitet keine Alpha-Kanäle, ICC-Profile oder Druckfarbräume wie CMYK.

Die Farbkreis-Rotation basiert auf dem HSL-Modell, das Sättigung und Helligkeit unabhängig vom Farbton behandelt – wahrnehmungsbasierte Farbräume wie CIELAB oder OKLCH würden bei gleichen Helligkeitswerten visuell gleichmäßigere Ergebnisse liefern, sind aber rechnerisch aufwendiger und für die meisten Designentscheidungen nicht nötig.

Das WCAG-Kontrastverhältnis wird nur gegen Weiß berechnet, nicht gegen beliebige Hintergrundfarben. Die RYB-Interpolation ist eine Näherung über Stützpunkte und bildet den physikalischen Mischprozess vereinfacht ab.

Für farbverbindliche Druckfreigaben sind die Ergebnisse nicht geeignet, weil sie den Druckprozess und das Substrat nicht berücksichtigen.