Softonic

Komplementärfarbenfinder

Schritt 1 / 3

Grundfarbe eingeben

Unterstützt #RGB, #RRGGBB, ganzzahliges rgb() und prozentuales hsl(). Die Berechnung bleibt im Browser; die Funnel-URL enthält die Farbe und wird bei Seitenaufrufen gesendet.

Komplementärfarben liegen sich auf einem digitalen Farbkreis gegenüber. Gib einen streng geprüften HEX-, RGB- oder HSL-Wert ein, um das HSL-Komplement, geteilte Komplementärfarben, tetradische Begleiter und genaue WCAG-Kontrastwerte zu berechnen. Alles geschieht lokal im Browser.

Wie das Komplement berechnet wird

  1. 1

    Gib eine beliebige Farbe ein

    Verwende #RGB, #RRGGBB, rgb() mit Ganzzahlen oder hsl() mit Prozentwerten. Der vollständige Wert wird vor der Berechnung geprüft.

  2. 2

    Farbe um 180° drehen

    HSL-Komplement: 180° zur Farbe hinzufügen, Sättigung und Helligkeit gleich halten.

  3. 3

    Split-Komplement abgeleitet

    Zwei Farben bei 150° und 210° von der Basis, eine sanftere Alternative zum direkten Komplement, wenn der Kontrast zu hoch ist.

  4. 4

    Zugänglichkeits-Hinweise erscheinen

    Kontrastverhältnis des Paares gegen Weiß und Schwarz, plus eine Warnung, wenn das Paar wahrscheinlich bei der Verwendung als fg/bg die WCAG AA nicht besteht.

Beispiele

Basisfarbe Hex Komplement (HSL) Hex
Reines Rot #FF0000 Cyan #00FFFF
Koralle #FF7F50 Aqua-Türkis #50D0FF
Waldgrün #228B22 Lila #8B228B
Königsblau #4169E1 Gold-Orange #E1B941
Lavendel #E6E6FA Blassgelb #FAFAE6

Die angezeigten HEX-, RGB- und HSL-Werte beschreiben dieselbe sRGB-Farbe. Kopiere ein Ergebnis für CSS oder ein anderes Designwerkzeug.

HSL-Komplement vs RYB-Komplement

  • HSL (Bildschirm): Rot ↔ Cyan, Grün ↔ Magenta, Blau ↔ Gelb. Das ist die Geometrie des aus sRGB abgeleiteten HSL-Winkels in CSS, keine Simulation von Lichtmischung.
  • RYB (Künstler): Rot ↔ Grün, Blau ↔ Orange, Gelb ↔ Violett. Das ist eine traditionelle Lehrkonvention, keine Vorhersage für das Mischen bestimmter Pigmente.

Dieser Finder verwendet bewusst nur das digitale HSL-Modell. Eine RYB-Umrechnung für Malfarben gibt es nicht, weil Pigmentkomplemente von Material und Mischung abhängen.

Wo Komplementärfarben gut funktionieren

  • CTA-Buttons gegen Markenhintergründe. Kombiniere Primärfarbe mit ihrem Komplement, um den Button hervorzuheben.
  • Datenvisualisierung Dual-Serien-Diagramme (Gewinn vs Verlust, vorher vs nachher).
  • Illustrationsschatten: Der Schatten eines orangefarbenen Kürbisses sieht in Blau überzeugender aus als in einem dunkleren Orange.
  • Sportbranding: Viele Teams verwenden komplementäre oder Split-Komplement-Paletten (blau/orange, rot/grün, gelb/lila).

Wo sie scheitern

  • Fließtext auf Hintergrund: direkte Komplementärfarben (rot auf grün, blau auf orange) sind unangenehm zu lesen. Hohe chromatische Aberration verursacht visuelle Ermüdung.
  • Vollflächige Verwendung: Ein Bildschirm, der 50% rot und 50% grün ist, ist ermüdend. Verwende Komplement für Akzente (5-10% der Fläche), nicht für die Hauptfarbe.
  • Markenkohärenz: Komplementärfarben wirken unruhig. Die meisten modernen Marken verwenden monochromatische oder analoge + einen Akzent, nicht duale Komplementärfarben.

Split-Komplement

Das Split-Komplement (Basis + 150° + 210°) ist oft eine bessere praktische Wahl:

  • Beibehaltung des hohen Kontrasts mit dem Komplementärbereich.
  • Vermeidung der direkten Komplementärvibration.
  • Bereitstellung von zwei Akzenten für ein geschichtetes Design.

Beispiel: Basis = blau → Komplement = orange (hart) → Split-Komplement = rot-orange + gelb-orange (reicher).

Entsättigung von Komplementen

Reine Komplementärfarben sehen selten bei voller Sättigung gut aus. Reduziere die Sättigung um 20-40% bei einer oder beiden für eine ruhigere Palette:

  • Rot (S=100%) + Cyan (S=100%) = vibrierend.
  • Rot (S=60%) + Cyan (S=60%) = klassische Plakatpalette.
  • Marken-Ziegel (S=45%) + Staubiges Türkis (S=30%) = modern, verwendbar.

Überprüfung vor der Verwendung

  • Kontrastverhältnis des Paares: der Finder berichtet dies. Unter 4.5:1 besteht AA für Text nicht.
  • Test auf neutralem Hintergrund: Komplementärfarben sehen gegen Weiß, Grau, Schwarz unterschiedlich aus.
  • Drucktest, wenn das das Ziel ist, CMYK kann Sättigung und Komplementärbeziehungen im Vergleich zu RGB verschieben.

Häufig gestellte Fragen

Sie ordnen Farbtöne nach verschiedenen Konventionen. HSL verwendet einen aus sRGB abgeleiteten Zahlenwinkel; das traditionelle RYB-Rad verteilt bekannte Künstlergrundfarben auf einem gedachten Kreis. Keines der Räder sagt das Mischen realer Lichtquellen oder Farben voraus.

Ja, sie sind synonym in der Farbtheorie. “Gegensätzlich auf dem Farbkreis” und “komplementär” beziehen sich auf dieselbe Beziehung.

Selten. Direkte Komplementärfarben bestehen normalerweise die WCAG-Kontrastanforderungen nicht, wenn sie als fg/bg verwendet werden, da sie eine ähnliche Helligkeit haben. Erhöhe den Helligkeitsunterschied (dunkler Text auf hellem Hintergrund), um zu bestehen.

Ja, das Ergebnisfeld enthält direktes Komplement, Split-Komplement (zwei flankierende Farben) und tetradische Vierer. Wähle, was deinem Designziel entspricht.

Verwandte Tools

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Binär-zu-ASCII-Konverter

Fügen Sie Binärdaten (durch Leerzeichen getrennte Bytes oder einen langen Bitstrom) ein und erhalten Sie den ASCII-Text, den sie darstellen. Unterstützt 7-Bit- und 8-Bit-Codierungen.

JSON-Formatierer

Fügen Sie JSON ein, um es mit 2 oder 4 Leerzeichen lesbar zu formatieren, kompakt zu minifizieren oder vor dem Kopieren schnell die Syntax zu prüfen.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.

Base64 zu Hex-Konverter

Konvertieren Sie einen Base64-String in seine zugrunde liegenden Bytes, die als Hexadezimal dargestellt werden. Nützlich zum Überprüfen von Tokens, Schlüsseln, Zertifikaten und JWTs.

Binär zu Dezimal

Konvertieren Sie Binärzahlen sofort in Dezimalzahlen. Zeigt die Positionsausweitung, damit Sie sehen können, wie jedes Bit beiträgt.