Farbharmonie: Wie man Farbschemata erstellt, die wirklich funktionieren

Farbharmonie ist kein Geschmack. Sie ist Geometrie. Jede Palette, die sich richtig anfühlt, ist eine feste Beziehung auf dem Farbrad, und man kann sie absichtlich reproduzieren.

Das ist das ganze Geheimnis, das die meisten "Farbtheorie"-Artikel unter einer Musterkollektion begraben. Die Farben in einem guten Schema sind keine Freunde, die zufällig miteinander auskommen. Sie sind Punkte, die in bewussten Winkeln um ein Rad herum platziert werden, und der Winkel ist der Grund, warum sie funktionieren.

Sobald man die Geometrie erkennt, hört das Aussuchen von Farben auf, eine Stimmung zu sein, der man nachjagt, und wird zu einer Entscheidung, die man trifft. Das ist ein System, kein Moodboard.

Was Farbharmonie wirklich bedeutet

Farbharmonie ist die Anordnung von Farben auf eine Weise, die das Auge als geordnet statt als zufällig liest. Harmonie entsteht, wenn die Beziehungen zwischen den Farben konsistent sind, nicht wenn die Farben einzeln hübsch aussehen.

Warum der Aufwand? Weil das Urteil schnell und unerbittlich ist. Laut der Interaction Design Foundation, die Forschung der Universität Basel und von Google zitiert, beurteilen Menschen die Attraktivität eines Designs in etwa 17 bis 50 Millisekunden, und dieses Schnellurteil läuft größtenteils auf Farbe und Komposition. Es gibt keinen zweiten ersten Eindruck.

Harmonie trägt auch Bedeutung. Wie Joann und Arielle Eckstut es formulieren: "Farben können Emotionen symbolisieren, die zur Persönlichkeit einer Marke passen", zitiert von der Interaction Design Foundation. Die Beziehung setzt das Gefühl, bevor ein einziges Wort gelesen wird. Wer die tiefere Ebene dessen verstehen möchte, was jeder Farbton kommuniziert, erklärt wir in einem separaten Artikel, was jede Farbe tatsächlich signalisiert.

Das Farbrad ist das ganze Spiel

Das Farbrad ist eine Karte, die zeigt, wo jeder Farbton im Verhältnis zu jedem anderen Farbton sitzt. Harmonieschemata sind einfach Formen, die man auf diese Karte legt. Man dreht die Form, erhält eine neue Palette und behält dabei dieselbe Balance.

Das ist keine Überlieferung. Wie Sensational Color erklärt, sind die klassischen Harmonien "Farbkombinationen, die das Spektrum ausbalancieren", und man kann "geometrische Formen verwenden, um die Beziehung der Farbtöne auf dem Farbrad zu visualisieren". Die Form ist das Rezept. Das Rad ist die Küche.

Drei Beziehungen erledigen den Großteil der Arbeit:

• Gegenüberliegende Farbtöne sitzen sich auf dem Rad gegenüber und erzeugen Kontrast.
• Benachbarte Farbtöne sitzen nebeneinander und erzeugen Kohäsion.
• Gleichmäßig verteilte Farbtöne teilen das Rad in gleiche Segmente und erzeugen Balance.

Wer diese drei beherrscht, hat die Schemata abgedeckt, die 90 % der Marken tatsächlich einsetzen.

Die sechs Schemata, die zählen

Es gibt sechs klassische Harmonien, die es wert sind, sie zu kennen. Jede ist eine geometrische Form, die um das Rad gedreht wird, laut Sensational Color, und jede erzeugt ein vorhersehbares Gefühl.

Man braucht nicht alle sechs von Anfang an. Die meisten praktizierenden Designer arbeiten mit drei davon: komplementär, analog und triadisch. Die anderen drei sind Variationen, auf die man zurückgreift, wenn das Basisschema an seine Grenzen stößt. Hier ist, wann jedes der drei Kernschemata seinen Platz verdient.

Komplementär: maximaler Kontrast, minimaler Aufwand

Komplementär bedeutet zwei Farbtöne, die sich direkt auf dem Rad gegenüberliegen, wie Blau und Orange, Rot und Grün oder Lila und Gelb. Die Gegenüberstellung ist der Punkt.

Warum funktioniert das wahrnehmungspsychologisch? Gegenüberliegende Farbtöne teilen kaum Wellenlängennachbarn, sodass das Auge maximale Trennung liest. Diese Trennung ist Kontrast, und Kontrast ist Aufmerksamkeit. Deshalb ist ein komplementärer Akzent auf einem neutralen Untergrund das zuverlässigste "Schau hier her"-Werkzeug im Design.

FedEx ist der Lehrbuchfall: ein lila-orangefarbenes Wortmarke, zwei Farbtöne, die sich auf dem Rad gegenüberliegen. Der Kontrast ist so sauber, dass er in jeder Größe überlebt, sogar versteckt im Negativraum des Pfeils.

Der Haken: Komplementär bei voller Sättigung, nebeneinander, in gleichen Mengen, wird vibrieren. Zwei Gegensätze, die mit gleicher Lautstärke schreien, kämpfen um dieselbe Aufmerksamkeit und erschöpfen das Auge. Die Lösung sind Proportionen, auf die wir weiter unten eingehen.

Analog: ruhig, kohäsiv, risikoarm

Analog bedeutet drei bis vier Farbtöne, die nebeneinander auf dem Rad sitzen. Man denke an Gelb über Gelbgrün bis hin zu Grün. Sie sind Nachbarn, also verschmelzen sie.

Der Grund, warum sich das fließend anfühlt, ist die Wellenlängennähe. Benachbarte Farbtöne teilen den größten Teil ihres Spektralbereichs, sodass die Übergänge zwischen ihnen sanft sind und das Auge sie als eine Familie liest. Es gibt keinen Kampf, weil es keine Opposition gibt.

Das Stripe-Branding ist das sauberste Beispiel in der Tech-Branche. Sein charakteristischer Hero-Gradient fließt durch benachbarte Blau-, Lila- und Türkistöne, Farbtöne, die nebeneinander auf dem Rad sitzen. Der Effekt ist hochwertig und ruhig, weil nichts im Gradient streitet.

Analog ist das risikoärmste Schema, das man wählen kann, was genau der Grund ist, warum es flach wirken kann. Ohne Opposition muss man Kontrast durch Helligkeit (hell versus dunkel) statt durch Farbton erzeugen. Die Helligkeitswerte richtig hinbekommen und analog sieht teuer aus. Sie überspringen und es sieht nach Nebel aus.

Triadisch: ausgewogene Energie ohne Chaos

Triadisch bedeutet drei Farbtöne, die gleichmäßig um das Rad verteilt sind, jeweils ein Drittel voneinander entfernt. Ein gleichseitiges Dreieck auf das Rad legen und die drei Punkte ablesen.

Die gleichmäßige Verteilung ist das, was es zum Funktionieren bringt. Jeder Farbton ist von den anderen beiden gleich weit entfernt, sodass keine einzelne Farbe durch ihre Position dominiert. Man erhält die Lebhaftigkeit mehrerer deutlicher Farben ohne den Frontalzusammenstoß eines komplementären Paares. Es ist Energie mit einem Schiedsrichter.

Die Falle ist, dass drei lebhafte Farbtöne in gleicher Stärke schnell zum Zirkus werden. Triadisch bleibt nur ausgewogen, wenn ein Farbton führt und die anderen zwei unterstützen. Die Geometrie gibt einem Balance der Position, nicht Balance der Proportion. Proportion ist immer noch die eigene Aufgabe.

Das ist der rote Faden für jedes Schema: Das Rad gibt einem die Beziehung, man entscheidet, wie viel von jeder Farbe man einfüllt.

Wie echte Marken ihr Schema auswählen

Marken wählen keine Schemata zum Spaß. Sie wählen das Schema, das das Gefühl erzeugt, das die Marke braucht, und wenden es dann mit Disziplin an. Hier sind vier, die sich sauber der Geometrie zuordnen lassen.

Spotify ist der Disziplin-Fall. Die Identität beruht auf einem einzigen Grün, variiert durch Töne und Schattierungen statt durch neue Farbtöne. Das ist Monochrom richtig gemacht: Tiefe durch Helligkeit, nicht durch Farbzugabe. Ein Farbton, totale Wiedererkennbarkeit.

Duolingo wendet dieselbe Logik als Live-Produkt an. Die Oberfläche führt mit einem dominanten Grün und zieht eine kleine Auswahl harmonisierter Akzente für Zustände und Belohnungen heran. Es ist farbenfroh ohne chaotisch zu sein, weil die Akzente dem Grün dienen statt mit ihm zu konkurrieren.

Man beachte, dass keine dieser Marken mehr Farben verwendet als nötig. Die Zurückhaltung ist die Marke.

Braucht man eine Palette, die über eine ganze Marke trägt, nicht nur über einen einzelnen Screen? Brainy baut Farbsysteme. Brainy eine Markenpalette bauen lassen.

Die Fehler, die eine Harmonie ruinieren

Die meisten kaputten Paletten scheitern aus denselben wenigen Gründen. Keiner davon liegt darin, "hässliche" Farben zu wählen. Sie liegen darin, die Beziehung zu ignorieren.

• Gleiche Proportionen. Jeder Farbe die gleiche Menge Raum zu geben, entfernt die Hierarchie und das Auge findet keinen Ruhepunkt.
• Volle Sättigung überall. Wenn jeder Farbton bei maximaler Intensität ist, führt nichts, und das Ganze summt.
• Kein Helligkeitskontrast. Farben mit gleicher Helligkeit, besonders in analogen Schemata, werden zu Schlamm, sobald sie nebeneinander sitzen.
• Zu viele Farbtöne. Ab vier verschiedenen Farbtönen wird es sehr schwer, Harmonie von Hand zu halten, weshalb tetraedrische Schemata mehr Paletten ruinieren als retten.
• Kontext ignorieren. Eine Palette, die auf dem Monitor gesungen hat, kann auf einem Telefon in der Sonne sterben. Die Beziehung muss auf dem echten Bildschirm überleben.

Die tiefste Lösung ist Einheit, und es gibt einen alten Malertrick dafür. Wie die Künstlerin Mallery Jane es beschreibt: "Eine Möglichkeit, Farbharmonie zu schaffen, ist eine Technik namens Mutterfarbe: Man nimmt ein bisschen von einer Farbe (Mutterfarbe) und fügt sie allen Mischungen hinzu." Alles teilt dann einen gemeinsamen Unterton, sodass die Palette als eine Familie gelesen wird statt als ein Komitee.

Ein Workflow, um eine Palette aus einer Farbe zu bauen

Paletten erstellen auf coolors.co

Man braucht keine Inspiration. Man braucht einen Prozess. Die Interaction Design Foundation legt einen wiederholbaren vor, den praktizierende Designer tatsächlich nutzen: Inspiration finden, eine dominante Farbe wählen, das Farbrad für Beziehungen konsultieren, Generatoren verwenden, Hierarchie durch Proportion definieren, Kontrast sicherstellen, Prototypen erstellen, mit Nutzern testen und auf Feedback iterieren.

Hier ist dieser Prozess auf einen Workflow komprimiert, den man von einer einzigen Basisfarbe aus durchführen kann.

1. Eine Basisfarbe wählen. Von der Marke, dem Produktgefühl oder der einen Farbe ausgehen, die man nicht aufgeben kann. Das ist der Anker.
2. Eine Beziehung wählen, keine Farbe. Zuerst das Gefühl entscheiden, dann die Geometrie die anderen Farbtöne liefern lassen. Ruhe bedeutet analog. Punch bedeutet komplementär. Lebhaftigkeit bedeutet triadisch.
3. Die anderen Farbtöne vom Rad ablesen. Die passende Form ablegen und die Punkte nehmen. Nicht nach Augenmaß. Das Rad ist genauer als das Bauchgefühl.
4. Helligkeitswerte richtig stellen, bevor man Farbtöne hinzufügt. Ein starker Ansatz, den die Künstlerin Chou (@hong_chou_) formuliert, ist, "mit einer ziemlich monochromen Farbpalette zu beginnen und sich zunächst darauf zu konzentrieren, den Kontrast und die Helligkeitswerte richtig hinzubekommen", dann "einige andere Farbtöne in die hellsten Bereiche einzuführen... ohne die Harmonie zu verlieren." Helligkeit ist das Skelett. Farbton ist die Haut.
5. Mit einer Mutterfarbe vereinheitlichen. Eine Spur der Basisfarbe in jede andere Farbe mischen, damit alle einen gemeinsamen Unterton teilen.
6. Proportionen zuweisen. Die 60-30-10-Regel verwenden, damit eine Farbe führt, eine unterstützt und eine als Akzent dient. Dazu mehr im nächsten Schritt.
7. Im Kontext testen, dann iterieren. Auf echten Bildschirmen, in echten Größen, gegen echte Inhalte prüfen. Anpassen. Veröffentlichen.

Die Stimmung dem Schema zuordnen

Zuerst das Gefühl wählen, dann ist das die Tabelle, auf die man zurückgreift.

Zur Proportion: Der Grund, warum Schritt sechs wichtig ist, liegt darin, dass die Beziehung allein keine Hierarchie schafft. Die 60-30-10-Regel behebt das. Wie House Beautiful es beschreibt, nimmt man "eine dominante Farbe für 60 Prozent, eine Sekundärfarbe für 30 Prozent und einen Akzentton für die verbleibenden 10 Prozent". Das decken wir vollständig in einem eigenen Artikel ab, also ist das hier nur die Erinnerung, nicht die Lektion: Die dominante Farbe ist in der Regel die ruhige Grundlage, und der Akzent ist dort, wo ein komplementärer Farbton seinen Nutzen beweist.

Die Tools, die die Radmathematik erledigen

Ausprobieren auf color.adobe.com

Man muss keine Winkel von Hand berechnen. Eine Handvoll kostenloser Tools erledigt die Geometrie und gibt einem die Hex-Codes.

Eine Warnung: Tools machen es leicht, das Denken zu überspringen. Ein Generator gibt einem eine mathematisch gültige Beziehung, aber er kennt weder die Marke, noch die Kontrastanforderungen, noch ob der Akzent einen Zugänglichkeitstest auf Weiß besteht. Das Tool erledigt die Radmathematik, das Urteil bleibt beim Designer. Weitere Farb- und Design-Analysen findet man gesammelt an einem Ort.

FAQ

Was ist der Unterschied zwischen einem Farbschema und Farbharmonie?

Ein Farbschema ist die spezifische Auswahl an Farben, die man gewählt hat. Farbharmonie ist die Beziehung, die diese Farben als geordnet statt zufällig erscheinen lässt. Jedes gute Schema basiert auf einer Harmonie, aber man kann ein Schema ohne Harmonie zusammenstellen und landet bei Rauschen.

Wie viele Farben sollte eine Palette haben?

Für die meisten Marken erledigen drei bis fünf alles. Eine dominante, eine oder zwei sekundäre, eine oder zwei Akzente, angewendet mit der 60-30-10-Proportion, die House Beautiful beschreibt. Ab vier verschiedenen Farbtönen wird Harmonie schwer von Hand zu halten, weshalb disziplinierte Marken wie Spotify einen einzigen Farbton über viele Töne führen statt zu wechseln.

Welches Farbschema ist für Anfänger am besten geeignet?

Analog oder monochrom. Beide sind verzeihend, weil sie direkten Kontrast vermeiden. Monochrom ist kaum kaputt zu kriegen, da man innerhalb eines Farbtons arbeitet, und analog verlangt nur, den Helligkeitskontrast zwischen Nachbarfarbtönen zu managen.

Wie gestalte ich komplementäre Farben, die nicht zusammenstoßen oder vibrieren?

Sie nicht in gleichen Mengen oder gleicher Sättigung einsetzen. Einen Farbton den Raum dominieren lassen und den Gegenpol als kleinen, oft stärker gesättigten Akzent halten. Die 60-30-10-Aufteilung existiert genau dafür, um zu verhindern, dass zwei Gegensätze mit gleicher Lautstärke kämpfen.

Beeinflusst Farbharmonie tatsächlich, wie Nutzer reagieren?

Sie beeinflusst den ersten Eindruck messbar. Die Interaction Design Foundation, die Forschung der Universität Basel und von Google zitiert, stellt fest, dass Menschen die Attraktivität eines Designs in 17 bis 50 Millisekunden beurteilen, größtenteils auf Basis von Farbe und Komposition. Harmonie ist das, was dieses Schnellurteil liest.

Kann ich einfach einen Palettengenerator verwenden und die Theorie überspringen?

Man kann in Sekunden eine gültige Beziehung generieren, ja. Was ein Generator nicht kann: Proportion setzen, Helligkeitskontrast beheben, Zugänglichkeit prüfen oder die Bedeutung der Marke kennen. Die Theorie ist das, was eine gültige Palette in eine funktionierende verwandelt.

Aufhören, bei Farbe zu raten

Farbharmonie ist ein System, das man anwenden kann, kein Talent, das man entweder hat oder nicht. Das Rad kodiert die Beziehungen, die sechs Schemata sind Formen, die man darauf legt, und Proportion plus Helligkeit verwandeln eine Beziehung in eine Palette, die hält.

Eine Basisfarbe wählen, ein Gefühl wählen und die anderen Farbtöne aus der Geometrie ablesen. Helligkeitswerte richtig stellen, mit einer Mutterfarbe vereinheitlichen, 60-30-10 aufteilen und dort testen, wo es tatsächlich lebt. Das ist die gesamte Methode, und sie schlägt Instinkt jedes Mal.

Eine Palette, die sich richtig anfühlt, ist nie ein Zufall. Sie ist eine Beziehung auf dem Rad, die man benennen und wiederverwenden kann.

Braucht man eine Palette, die über eine ganze Marke trägt, nicht nur über einen einzelnen Screen? Brainy baut Farbsysteme. Brainy eine Markenpalette bauen lassen.