Farbharmonie im UI-Design verstehen

Die meisten "hässlichen" Interfaces, die ich reparieren sollte, haben kein Farbproblem in dem Sinne, wie man annimmt. Die einzelnen Farben sind in Ordnung. Was kaputt ist, ist die Beziehung zwischen ihnen – die Buttons, Links, Diagramme und Badges wurden jeweils isoliert ausgewählt, und nichts auf dem Bildschirm passt zu irgendetwas anderem. Genau diese Übereinstimmung ist es, was Farbharmonie eigentlich ausmacht. Sie ist keine Stimmung und kein Vibe; sie ist ein Satz messbarer Winkelbeziehungen auf dem Farbkreis, und sobald du diese Beziehungen erkennen kannst, baust du eine Palette in zehn Minuten, für die du sonst eine Woche bräuchtest, in der du Hex-Werte so lange verschiebst, bis irgendetwas aufhört, falsch auszusehen.

Dies ist ein praxistauglicher Leitfaden zur Farbharmonie im UI-Design – wie jedes Schema auf dem Kreis konstruiert wird, zu welchen konkreten Hex-Codes ich greifen würde und welche Fehler ich immer wieder sehe (und selbst gemacht habe).

Was Farbharmonie eigentlich ist

Farbharmonie ist das Prinzip, dass Farben, die durch feste geometrische Abstände auf dem Farbkreis miteinander verbunden sind, gemeinsam bewusst und stimmig wirken. Der Kreis umfasst 360 Grad Farbton. Jede klassische Harmonieregel – komplementär, analog, triadisch und der Rest – ist nur ein Rezept, um Punkte auf diesem Kreis in bestimmten Winkeln auszuwählen. Wähle einen Basiston, wende den Winkel an, und du erhältst Farben, die das Auge als zur selben Familie gehörig liest, statt als Zufall.

Der Grund, warum das für Interfaces noch mehr zählt als für ein Gemälde, ist, dass ein UI Aufgaben für Farbe hat. Du setzt eine Palette nicht dekorativ ein – du weist Rollen zu. Das Modell, das ich in jedem Projekt verwende, ist Dominant, Sekundär, Akzent:

• Dominant ist dein Rückgrat – Flächen, große Füllungen, die Farbe, auf der das Auge am häufigsten landet. Oft ein nahezu Neutralton, der aus deinem Primärton abgeleitet ist, statt der gesättigte Primärton selbst.
• Sekundär unterstützt es – Abschnittshintergründe, sekundäre Buttons, Hover-Zustände.
• Akzent ist der laute Ton – der primäre CTA, der aktive Tab, der Benachrichtigungspunkt. Er sollte selten sein. Je seltener er ist, desto besser funktioniert er.

Eine grobe Aufteilung, die ich im Kopf behalte, ist so etwas wie 60/30/10. Harmonie sagt dir, welche Farben im Raum erlaubt sind; die Dominant/Sekundär/Akzent-Aufteilung sagt dir, wie viel von jeder zu verwenden ist. Wer die zweite Hälfte überspringt, landet bei drei perfekt harmonischen Farben, die alle in derselben Lautstärke schreien – was eine ganz eigene Art von Hässlichkeit ist.

Wenn du dir die Rechnerei sparen willst, baut der Farbpaletten-Generator jedes dieser Schemata aus einem einzigen Hex-Code und liefert dir die HSL- und RGB-Werte – aber es lohnt sich, die Konstruktion zu verstehen, damit du weißt, welcher Ausgabe du vertrauen kannst.

Komplementär: zwei Farben, 180 Grad auseinander

Komplementärpaare liegen sich auf dem Kreis direkt gegenüber. Nimm einen Basiston und addiere 180 Grad. Blau #2563EB gegen Orange #EA580C ist das Lehrbuchbeispiel, und es ist Lehrbuch, weil es funktioniert: maximaler Farbtonkontrast, der einen Akzent förmlich gegen seinen Hintergrund vibrieren lässt.

Genau diese Vibration ist der Grund, warum Komplementärschemata im UI eine Falle sind. Zwei voll gesättigte Komplementärfarben, die nebeneinander platziert werden, kämpfen miteinander. Setze hellroten Text auf einen hellgrünen Hintergrund, und deine Augen finden keine Ruhe – die Kante scheint zu flimmern. Die Lösung besteht darin, niemals beide in voller Stärke zu verwenden. Lass die eine die große dominante Fläche sein, stark entsättigt oder abgedunkelt, und reserviere die Komplementärfarbe als kleinen, gesättigten Akzent.

In der Praxis also: Dominant ist eine gedämpfte, blau getönte Fläche wie #1E293B, der Fließtext ist nahezu weiß, und die Komplementärfarbe taucht nur auf dem primären Button als #F97316 auf. Das ist ein Komplementärschema, aber du würdest es nie als "sich beißendes Blau und Orange" beschreiben, weil du ihnen nie die gleiche Fläche gegeben hast. Stripe und Linear setzen auf genau diese Art von einzelnem, kontraststarkem Akzent gegen ein ruhiges, nahezu monochromes Feld.

Analog: Nachbarn auf dem Kreis

Analogfarben liegen innerhalb von etwa 30 Grad zueinander – drei benachbarte Segmente des Kreises, etwa #0EA5E9, #0E7490, #0D9488 (Himmelblau über Cyan bis Petrol). Weil sie einen gemeinsamen Grundton teilen, sind sie nahezu unmöglich hässlich zu machen. Das ganze Schema wirkt wie eine einzige atmende Farbe.

Das ist Stärke und Schwäche zugleich. Analoge Paletten sind ruhig, stimmig, wirken hochwertig – großartig für inhaltsschwere Produkte, Dashboards, alles, wo das Chrom in den Hintergrund treten soll. Das Problem ist der Kontrast: Wenn jede Farbe ein Cousin ist, sticht nichts heraus, und dein Call-to-Action geht unter. Mein Standardvorgehen ist, das Interface analog aufzubauen und dann eine Farbe von der gegenüberliegenden Seite des Kreises zu borgen, ausschließlich für den Akzent. Jetzt hast du analoge Ruhe plus einen einzigen komplementären Knall – was, nicht zufällig, die Split-Komplementär-Idee weiter unten ist.

Triadisch: drei Farben, 120 Grad auseinander

Triadische Schemata nutzen drei Farbtöne, die exakt 120 Grad auseinander liegen und ein gleichseitiges Dreieck auf dem Kreis bilden. Der Klassiker ist Rot–Gelb–Blau, aber ein moderneres, UI-freundlicheres Trio ist etwa #6366F1 (Indigo), #10B981 (Smaragd), #F59E0B (Bernstein).

Triadisch ist lebendig und ausgewogen zugleich, was ideal klingt, bis du versuchst, alle drei Farben gleichwertig einzusetzen, und etwas produzierst, das aussieht wie Kinderspielzeug. Die Disziplin, die Triadisch verlangt, ist eine brutale Rollenverteilung. Wähle eine der drei als deine dominante Markenfarbe, degradiere die zweite zu einer unterstützenden/sekundären Rolle und nutze die dritte nur als sparsamen Akzent. Viele Produktpaletten, die du nie als "triadisch" bezeichnen würdest, sind es tatsächlich – eine Indigo-Marke, ein smaragdgrüner Erfolgszustand, ein bernsteinfarbener Warnzustand ist eine Triade, die semantische Arbeit leistet. Das ist triadische Harmonie, die sich vor aller Augen versteckt, und es ist die klügste Art, sie zu nutzen: Lass die drei Farben auf drei Bedeutungen statt auf drei Dekorationen abbilden.

Split-Komplementär: das Schema, zu dem ich am häufigsten greife

Split-Komplementär nimmt eine Basisfarbe, findet ihre Komplementärfarbe und verwendet dann statt der Komplementärfarbe selbst die beiden Farben, die ihr benachbart sind. Statt Blau gegen reines Orange würdest du also Blau #2563EB mit #F97316 und #EAB308 kombinieren – den beiden Farbtönen, die Orange flankieren.

Das ist meine Standardempfehlung für jeden, der seine erste ernsthafte UI-Palette baut. Du bekommst fast den gesamten Kontrast eines Komplementärschemas – dein Akzent sticht immer noch gegen die dominante Basis hervor –, aber die Spannung ist weicher, und du bekommst einen zweiten Akzent gratis dazu, was wirklich nützlich ist: einen für primäre Aktionen, einen für Highlights oder sekundäre Betonung. Es ist nachsichtiger als reines Komplementär und gezähmter als Triadisch. Wenn du über Komplementär hinaus nur eine einzige Regel lernst, lerne diese.

Tetradisch und Quadratisch: Vier-Farben-Schemata für die Mutigen

Tetradisch (manchmal auch Doppelkomplementär genannt) nutzt zwei Komplementärpaare – vier Farben, die ein Rechteck auf dem Kreis bilden. Quadratisch ist der Spezialfall, in dem diese vier Farben gleichmäßig in 90-Grad-Abständen verteilt sind.

Ich bin ehrlich: Vier-Farben-Harmonien sind selten die richtige Antwort für ein fokussiertes Interface. Vier Farbtöne von vergleichbarer Stärke sind eine Menge konkurrierender Signale, und sie auszubalancieren ist echte Arbeit. Wo sie ihren Platz verdienen, ist die Datenvisualisierung – Diagramme, Tags, Multi-Kategorie-Dashboards –, wo du tatsächlich vier oder mehr unterscheidbare, gleich gewichtete Farben brauchst, die sich trotzdem wie ein Set anfühlen. Dafür gibt dir ein quadratisches Schema wie #3B82F6, #22C55E, #EF4444, #A855F7 vier klar trennbare Kategorien. Für Marken- und Layoutarbeit behandle Tetradisch als "Wähle zwei dieser vier aus, die du tatsächlich verwendest, und halte den Rest in Reserve."

Monochromatisch: ein Farbton, viele Aufgaben

Monochromatisch ist eigentlich keine Beziehung auf dem Kreis – es ist ein einzelner Farbton, der durch Variation von Helligkeit und Sättigung zu einem vollen Tonwertumfang erweitert wird. Aus einem Blau werden #EFF6FF, #BFDBFE, #3B82F6, #1D4ED8, #1E3A8A: Hintergründe, Rahmen, Füllungen, Text, alle aus einem Elternton.

Jedes ernsthafte Designsystem ist im Kern monochromatisch, selbst wenn die Marke mehrere Farbtöne verwendet, weil du pro Farbe eine 9- bis 11-stufige Skala brauchst, um Flächen, Hover-Zustände, deaktivierte Zustände und den Dark Mode abzudecken. Monochromatisch ist narrensicher für Stimmigkeit und gefährlich leicht flach zu machen – wenn jede Stufe in der Helligkeit zu nah beieinander liegt, verliert das UI seine Hierarchie. Spreize deine Skala weit und prüfe, ob benachbarte Stufen tatsächlich unterscheidbar sind.

Die Fehler, die immer wieder auftauchen

• Harmonietöne in voller Sättigung über große Flächen verwenden. Harmonie wählt die Farbtöne aus; sie sagt dir nicht, sie zu 100 % einzusetzen. Große Flächen wollen fast immer eine entsättigte oder getönte Version des harmonischen Farbtons, nicht den reinen.
• Harmonie als die ganze Aufgabe behandeln. Eine harmonische Palette ohne Dominant/Sekundär/Akzent-Verhältnis ist nur eine ausgewogene Diskussion, in der alle schreien. Weise Rollen und Flächen zu.
• Barrierefreiheit komplett vergessen. Der Kreis sagt nichts über Kontrast aus. Zwei harmonische Farben können zusammen völlig unleserlich sein. Fließtext braucht ein Kontrastverhältnis von 4.5:1 gegenüber seinem Hintergrund (3:1 für großen Text), und UI-Komponenten und Grafiken brauchen mindestens 3:1 gegenüber benachbarten Farben, gemäß den WCAG 2.1 Kontrastrichtlinien. Harmonie und Kontrast sind unabhängige Probleme – löse beide.
• "Harmonisch" über "bedeutungsvoll" stellen. Deine Erfolgs-, Warn- und Fehlerzustände tragen Bedeutung. Grün-für-Los und Rot-für-Stopp brechen manchmal eine Harmonieregel, und das ist in Ordnung. Kommunikation schlägt Geometrie jedes Mal.

Wenn du eine Sache hieraus mitnimmst: Harmonie ist die leichte Hälfte. Der Kreis reicht dir in etwa dreißig Sekunden Farben, die zueinander passen. Das Handwerk ist alles danach – zu entscheiden, welche Farbe dominant ist, mit wie wenig Akzent du auskommst und ob jemand mit eingeschränktem Sehvermögen das Ergebnis tatsächlich lesen kann. Beginne mit Split-Komplementär, halte deinen Akzent selten, prüfe deine Kontrastverhältnisse, und du bist den meisten Interfaces, die heute ausgeliefert werden, voraus.