Farbharmonie-Generator

Was ist Farbharmonie?

Farbharmonie ist die Kunst, Paletten zu wählen, deren Farbtöne intentional statt zufällig wirken – und hinter der Kunst steckt eine einfache Geometrie. Der Farbkreis ordnet Farbtöne kreisförmig nach ihrer Position im sichtbaren Spektrum an; harmonische Paletten sind Mengen von Punkten auf diesem Kreis, deren relative Winkel zuverlässige visuelle Beziehungen erzeugen. Komplementäre Paare (einander gegenüber) maximieren Kontrast und Energie. Analoge Sets (nah beieinander) wirken ruhig und einheitlich. Triadische Trios sind lebendig, aber ausgewogen. Jedes Schema ist eine erprobte Formel, keine starre Regel – sie geben dir einen Ausgangspunkt, von dem aus du justieren kannst.

So nutzen Sie diesen Generator

Wähle eine Basisfarbe und ein Schema. Das Raster unten zeigt jede Farbe der Harmonie, mit Hex-, RGB- und HSL-Werten für jede. Klicke auf eine Karte, um ihren Hex-Wert zu kopieren; klicke unter dem Codeblock auf Kopieren, um eine fertig einfügbare :root-Deklaration mit CSS-Custom-Properties zu schnappen. Wechsle die Schemas zum Vergleichen – derselbe Basisfarbton erzeugt durch unterschiedliche geometrische Beziehungen völlig unterschiedliche Stimmungen.

Das richtige Schema für die Aufgabe wählen

Komplementär funktioniert für Call-to-Actions und Warnsysteme, bei denen Kontrast der Punkt ist. Analog ist unschlagbar für Hero-Verläufe, Stimmungsbilder und naturnahe Marken. Triadisch ist großartig für Kinderprodukte-UI, Gaming-Marken und Infografiken mit drei kategorischen Gruppen. Tetradisch und Quadratisch geben dir vier Farben, können aber kollidieren, wenn alle vier mit gleicher Gewichtung verwendet werden – wähle eine dominante, einen Akzent, und setze die anderen beiden sparsam ein. Monochromatische Paletten passen wunderbar zu einem starken Neutral und sehen nie veraltet aus.

Die Mathematik: Farbtonrotation

Jedes Schema ist eine Rotation um den HSL-Farbtonring, wobei Sättigung und Helligkeit der Basis unverändert bleiben. complementary ist (h + 180°). split-complementary nimmt die Basis plus (h + 150°) und (h + 210°) – eine sanftere Alternative zur reinen Komplementärfarbe. analogous ist (h − 30°, h, h + 30°). triadic ist (h, h + 120°, h + 240°). tetradic ist das Rechteck bei (h, h + 60°, h + 180°, h + 240°). square verteilt vier Punkte gleichmäßig: (h, h + 90°, h + 180°, h + 270°). monochromatic behält den Farbton bei und variiert die Helligkeit über fünf gleichmäßig verteilte Stufen.

Spickzettel: Schema zu Stimmung

Komplementär – energiegeladen, aufmerksamkeitsstark, polarisierend. Geteilt komplementär – kraftvoll, aber sanfter als reine Komplementärfarben; großartig für Erstanwender:innen. Analog – ruhig, harmonisch, ideal für Natur- und Wellnessmarken. Triadisch – verspielt, ausgewogen, lebendig. Tetradisch – vielseitig, reichhaltig, braucht eine dominierende Farbe. Quadratisch – kraftvoll und ausgewogen; schwerer umzusetzen als tetradisch. Monochromatisch – minimalistisch, anspruchsvoll, barrierefreundlich, wenn mit einem Neutral gepaart.

Häufig gestellte Fragen

Wie wähle ich eine Basisfarbe?

Beginne mit dem meistgenutzten Farbton der Marke – oder, wenn du bei null anfängst, wähle eine Farbe, deren Stimmung zur Marke passt: warme Gelb- und Orangetöne für energiegeladen, kühle Blau- und Petroltöne für vertrauenswürdig, tiefe Rottöne für ernst, Grüntöne für naturnah. Das Schema überträgt diese Stimmung dann auf die sekundären Slots.

Warum sehen meine Farben im monochromatischen Modus ausgewaschen aus?

Der monochromatische Modus variiert die Helligkeit, behält aber Farbton und Sättigung bei. Wenn deine Basisfarbe eine niedrige Sättigung hat, komprimieren sich die helleren und dunkleren Varianten Richtung Grau. Für reichhaltigere monochromatische Paletten starte mit einer gesättigten Basis und ziehe in Erwägung, Sättigung in einer Bildbearbeitungs-App zusammen mit der Helligkeit anzupassen.

Soll ich alle vier Farben einer tetradischen Palette gleichmäßig verwenden?

Fast nie. Verwende die 60-30-10-10-Regel: 60 % dominante Farbe, 30 % sekundär, je 10 % für die zwei Akzente. Vier-Farben-Paletten mit gleicher Gewichtung wirken chaotisch – gib einer Farbe das Rampenlicht und den anderen unterstützende Rollen.

Sind diese Schemas wissenschaftlich exakt?

Sie sind geometrisch definiert, nicht perzeptuell kalibriert. Der HSL-Farbkreis spiegelt nicht wider, wie das menschliche Auge Farbtonabstände wahrnimmt – Gelb und Grün erscheinen näher, als die Mathematik suggeriert, während Grüntöne eine viel breitere wahrgenommene Region als Blautöne abdecken. Nutze die Schemas als Ausgangspunkte und justiere nach Augenmaß.

Kann ich meine Palette speichern?

Klicke auf Kopieren beim CSS-Variablen-Block, um die Palette in deine Zwischenablage zu legen, und füge sie dann in das Stylesheet deines Projekts ein. Wir speichern keine Paletten serverseitig – alles bleibt lokal in deinem Browser.

Was ist der Unterschied zwischen geteilt komplementär und komplementär?

Reines Komplementär verwendet zwei Farben, die direkt gegenüberliegen auf dem Kreis – maximaler Kontrast, aber visuell intensiv. Geteilt komplementär ersetzt das einzelne Gegenüber durch zwei flankierende Farben (±30° vom Gegenüber) und mildert so den Kontrast bei gleicher Energie. Es ist das einfachere Schema, wenn du noch nie eine Palette gebaut hast.

Farbharmonie-Generator