Farbharmonien-Explorer
Klicke auf den interaktiven Farbkreis, um alle Farbharmonie-Beziehungen von jeder Basisfarbe aus zu erkunden. Sieh komplementäre, geteilt-komplementäre, analoge, triadische, tetradische und monochromatische Harmonien auf dem Kreis hervorgehoben, mit HEX- und HSL-Werten. Als CSS-Variablen exportieren. Läuft vollständig in deinem Browser - ohne Anmeldung.
Enter a base color or click anywhere on the color wheel to explore all harmony relationships. Click a harmony type to see its colors highlighted on the wheel. All processing runs locally in your browser.
Click the wheel to pick a hue
Hue
217°
Sat
91%
Light
60%
Two colors directly opposite on the color wheel (180° apart). High contrast, vibrant combination.
Base
#3C83F6
217° 91% 60%
Complement
#F6AF3C
37° 91% 60%
:root {
--color-1: #3c83f6;
--color-2: #f6af3c;
}Warum unseren Farbharmonien-Explorer nutzen?
- Interaktiver Farbkreis: Der Explorer rendert einen lebendigen Farbkreis, den du anklicken kannst, um jeden Farbton zu wählen. Die Harmonie-Punkte aktualisieren sich sofort, während du dich auf dem Kreis bewegst, und zeigen genau, wo jede Harmonie-Farbe liegt.
- Sofortige Harmonie-Berechnung: Alle sieben Harmonietypen - komplementär, geteilt-komplementär, analog, triadisch, tetradisch, doppelt geteilt-komplementär und monochromatisch - aktualisieren sich in Echtzeit, wenn du die Basisfarbe änderst.
- Sichere und private Verarbeitung: Deine Farbdaten verlassen nie dein Gerät. Der Explorer läuft vollständig in deinem Browser mit canvasbasiertem Rendering, es werden keine Daten hochgeladen.
- 100 % kostenlos für immer: Nutze diesen Explorer ohne Anmeldung, Abo, Ratenlimits oder versteckte Paywalls. Erkunde so viele Farbkombinationen, wie du brauchst, völlig kostenlos.
Was ist ein Farbharmonien-Explorer?
Ein Farbharmonien-Explorer ist ein Tool, das die mathematischen Beziehungen zwischen Farben auf dem Farbkreis visualisiert. Die Farbharmonielehre definiert bestimmte Winkelbeziehungen zwischen Farbtönen, die visuell ansprechende Kombinationen ergeben - zum Beispiel erzeugen 180° auseinanderliegende Farben (komplementär) hohen Kontrast, während 30° auseinanderliegende Farben (analog) sanfte, natürliche Übergänge schaffen. Dieser Explorer rendert einen interaktiven Farbkreis, berechnet alle sieben wichtigen Harmonietypen aus deiner Basisfarbe und exportiert die Ergebnisse als CSS-Variablen - alles läuft lokal in deinem Browser.
Wie unser Farbharmonien-Explorer funktioniert
- Basisfarbe eingeben oder wählen: Gib einen HEX-Farbcode in das Eingabefeld ein oder klicke irgendwo auf den Farbkreis, um einen Farbton zu wählen. Die Harmonie-Punkte aktualisieren sich sofort auf dem Kreis.
- Harmonietyp auswählen: Klicke auf eine der sieben Harmonie-Karten, um ihre Farben auf dem Kreis hervorgehoben und als einzelne Farbfelder mit HEX- und HSL-Werten zu sehen.
- Palette kopieren oder exportieren: Klicke auf ein Farbfeld, um seinen HEX-Wert zu kopieren, nutze HEX kopieren für alle Farben auf einmal, oder nutze den CSS-Variablen-Export, um einen sofort nutzbaren Block mit CSS-Custom-Properties zu kopieren.
Die sieben Farbharmonie-Typen
- Komplementär: zwei Farben direkt gegenüber auf dem Kreis (180° auseinander). Erzeugt maximalen Kontrast und visuelle Spannung - ideal für Call-to-Action-Schaltflächen und wirkungsstarke Designs.
- Geteilt-komplementär: Basisfarbe plus zwei an ihren Komplementär angrenzende Farben (±30° vom Komplementär). Weniger Spannung als komplementär, aber weiterhin hoher Kontrast - eine sicherere Wahl für die meisten Designs.
- Analog: fünf benachbarte Farben auf dem Kreis (±30° und ±60°). Harmonisch und natürlich wirkend - häufig in der Natur und genutzt für ruhige, stimmige Designs.
- Triadisch: drei Farben gleichmäßig in 120°-Intervallen verteilt. Lebendig und ausgewogen - bietet starken visuellen Kontrast und bewahrt dennoch Harmonie.
Wichtige Einschränkungen
Der Farbharmonien-Explorer berechnet Harmoniebeziehungen nur anhand des Farbtonwinkels und behält Sättigung und Helligkeit deiner Basisfarbe über alle Harmonie-Farben bei. In der Praxis wirst du Sättigung und Helligkeit einzelner Harmonie-Farben an deinen Designkontext anpassen wollen. Der CSS-Variablen-Export nutzt generische Namen (--color-1, --color-2…) - benenne sie entsprechend den Konventionen deines Designsystems um, bevor du sie produktiv einsetzt.
Häufig gestellte Fragen
Ein Farbharmonien-Explorer visualisiert die mathematischen Beziehungen zwischen Farben auf dem Farbkreis. Er berechnet alle wichtigen Harmonietypen aus einer Basisfarbe und zeigt sie als interaktive Farbfelder.
Klicke irgendwo auf den farbigen Ring des Kreises, um einen Farbton zu wählen. Die Basisfarbe wird sofort aktualisiert und alle Harmoniebeziehungen werden neu berechnet.
Komplementär nutzt eine Farbe direkt gegenüber (180°) für maximalen Kontrast. Geteilt-komplementär nutzt zwei an den Komplementär angrenzende Farben (±30°) und bietet ähnlichen Kontrast bei weniger visueller Spannung.
Ja. Die gesamte Verarbeitung findet ausschließlich in deinem Browser statt. Es werden keine Farbdaten an einen Server gesendet.
Ja. Das Tool ist 100 % kostenlos, ohne Anmeldung, Abo und Nutzungsgrenzen.
Klicke auf ein beliebiges Feld, um seinen HEX-Wert zu kopieren. Nutze «HEX kopieren», um alle Farben als kommagetrennte Liste zu kopieren. Nutze «CSS kopieren», um einen Block mit CSS-Custom-Properties zu kopieren.
Er erzeugt einen :root-Block mit den Custom Properties --color-1, --color-2… für alle Farben der aktiven Harmonie, bereit zum Einfügen in dein Stylesheet.
Der Explorer behält Sättigung und Helligkeit deiner Basisfarbe über alle Harmonie-Farben hinweg bei, um visuelle Konsistenz zu schaffen. Einzelne Farben kannst du nach dem Export in deinem Design-Tool anpassen.
Monochromatisch nutzt denselben Farbton mit variierender Helligkeit und Sättigung, um eine Reihe von hell bis dunkel zu erzeugen - das ergibt elegante, stimmige Paletten.