Unterstützende Farben aus einer Primärfarbe ableiten (Farbharmonie)

Hier ist ein Zwei-Minuten-Experiment. Nimm ein gesättigtes Blau — #2563eb, also oklch(0.546 0.215 262.9) — und drehe seinen Farbton eine halbe Umdrehung über den Kreis zu seiner Lehrbuch-Komplementärfarbe, einem Orange bei ≈83°. Rendere diese Komplementärfarbe mit der Helligkeit und dem Chroma des Blaus (≈#AB5B00, auf das beschnitten, was sRGB fassen kann) und stelle beide als flache Flächen mit einer harten Kante nebeneinander. Sieh dir die Grenze an. Sie flimmert. Jede Farbe scheint gegen die andere zu drücken, und die Kante dazwischen will nicht stillhalten. Der Effekt ist der Simultankontrast, und er ist das Erste, wovor dich die klassischen Harmonie-Regeln nicht warnen.

Farbharmonie ist die Praxis, unterstützende Farben aus einer Primärfarbe über Beziehungen auf dem Farbtonkreis abzuleiten — komplementär, split-komplementär, analog, triadisch. Ein Farbharmonie-Generator wendet diese Drehungen automatisch auf eine Ausgangsfarbe an, aber einer, der fürs UI gebaut ist, korrigiert das Lehrbuch gleich zweimal: Er versetzt um die Komplementärfarbe herum, statt genau auf ihr zu landen, und er senkt Helligkeit und Chroma jedes Kandidaten unter die der Primärfarbe, damit das Ergebnis unterstützt statt konkurriert. Heraus kommen strukturell verwandte Kandidaten — ob die Palette überhaupt einen davon braucht, bleibt eine Design-Entscheidung. Wie aus Kandidaten Rampen und Rollen werden, behandelt unser Leitfaden zu Farbskalen; in diesem Artikel geht es darum, warum die Drehungen selbst funktionieren.

Woher kommt das Harmonie-Vokabular?

Die Namen der Schemata stammen aus dem Vokabular der Malerei-Tradition, und es hilft, das offen zu sagen. Komplementär: zwei Farbtöne, die sich auf dem Kreis gegenüberliegen, 180° auseinander. Analog: enge Nachbarn, typischerweise innerhalb von 30–40°. Split-komplementär: ein Farbton plus die beiden Farbtöne, die seine Komplementärfarbe flankieren. Triadisch: drei Farbtöne im Abstand von 120°. Der klassische Farbschema-Katalog ruht auf einer Prämisse: Der Farbtonkreis ist eine Landkarte der Verwandtschaft, und Farben, deren Positionen in einer beschreibbaren geometrischen Beziehung stehen, wirken tendenziell zusammengehörig.

Diese Prämisse überträgt sich gut auf Interfaces. Der Rest der Tradition braucht Übersetzung, denn ein Gemälde und ein UI verwenden Farbe unterschiedlich. Ein Maler mischt, lasiert und vermittelt — ein Komplementärpaar in einer Landschaft begegnet sich meist über Neutraltöne und gebrochene Farbe, selten als zwei flache Flächen in voller Stärke. Ein Interface tut genau das, was die Malerei vermeidet: satte Füllungen, harte Kanten, keine Textur dazwischen. Die Schemata benennen nützliche Beziehungen; die Stärken, in denen die Malerei sie einsetzt, überleben den Wechsel zu flacher Farbe nicht.

Warum flimmern Komplementärpaare auf dem Bildschirm?

Das Flimmern im Eingangsexperiment hat einen Mechanismus. Das visuelle System kodiert Farbe teilweise über Gegenfarbkanäle, und eine kräftige Farbfläche induziert einen Hauch ihrer Komplementärfarbe in allem, was daneben liegt — das ist der Simultankontrast. Stell eine Farbe und ihre tatsächliche Komplementärfarbe bei vollem Chroma nebeneinander, und die beiden Induktionen prallen entlang der gemeinsamen Kante aufeinander, jede Fläche überzeichnet die andere. Liegen die beiden Farben zudem auf ähnlicher Helligkeit, wird die Kante noch schlimmer: Das Auge lokalisiert Kanten weitgehend über den Luminanzunterschied, und eine Grenze gleicher Helligkeit zwischen zwei kräftigen Komplementärfarben bietet ihm kaum etwas, woran es sich festhalten kann. Das Ergebnis ist der charakteristische instabile, flimmernde Rand — berühmt in der Op-Art, unerwünscht in einer Werkzeugleiste.

Nichts davon bedeutet, dass Komplementärfarben im UI unbrauchbar wären. Es bedeutet, dass das Lehrbuch-Paar — volle Stärke, gleichrangig, Seite an Seite — die eine Konfiguration ist, die sich zuverlässig danebenbenimmt. Die praxistaugliche Ableitung behält den Temperaturkontrast, den eine Komplementärfarbe bietet, und verzichtet auf den frontalen Zusammenstoß — in zwei Schritten.

Warum um die Komplementärfarbe herum versetzen, statt auf ihr zu landen?

Der erste Schritt ist ein Winkel-Schritt. Ausgehend vom Farbton 262,9° der blauen Ausgangsfarbe liegt die exakte Komplementärfarbe bei ≈83°. Der Gegenpol-Vorschlag von Scale Composer wird bei +165° statt +180° platziert — er landet bei ≈68°, einer warmen Bronze fünfzehn Grad vor dem Kollisionspunkt. Der Stahl-Vorschlag nähert sich von der anderen Seite bei +210°, ≈30° hinter der Komplementärfarbe. Die beiden Kandidaten quer über den Kreis klammern die Komplementärfarbe ein, ohne sie zu berühren — das ist im klassischen Vokabular split-komplementäres Terrain. Du behältst das meiste von dem, was die Komplementärfarbe bot (einen Farbton, der so warm ist, wie die Primärfarbe kühl ist), und trittst zugleich von der Achse herunter, auf der die Gegenfarbkanäle am heftigsten kämpfen.

Warum senken abgeleitete Kandidaten auch Helligkeit und Chroma?

Der zweite Schritt betrifft die Stärke, und er folgt aus einer einfachen Beobachtung: Drehung allein erzeugt einen Rivalen, keine Unterstützung. Eine unterstützende Farbe, die der Leuchtkraft der Primärfarbe gleichkommt, konkurriert mit ihr — zwei Farbtöne bei gleichem Chroma und ähnlicher Helligkeit beanspruchen gleich viel Aufmerksamkeit, und die Palette bekommt zwei erste Stimmen. Also dreht die praxistaugliche Ableitung jeden Kandidaten herunter. Gemessen am Chroma 0,215 der Ausgangsfarbe landen die vier Vorschläge unten bei ungefähr ≈0,05–0,08 — zwischen einem Viertel und zwei Fünfteln der Farbigkeit der Primärfarbe — und ihre Helligkeit bewegt sich in die eine oder andere Richtung deutlich weg von den 0,546 der Ausgangsfarbe. Die Intuition, die es sich zu merken lohnt: Die Farbtondrehung entscheidet, wo ein Kandidat steht; die Absenkung von Helligkeit und Chroma entscheidet, wie laut er spricht — und eine unterstützende Farbe spricht als Zweite.

Wie sehen die vier Vorschläge bei einer echten Ausgangsfarbe aus?

Führe die Ableitung an der blauen Ausgangsfarbe aus, und die Geometrie wird konkret:

Die Tabelle liest sich wie eine komprimierte Harmonie-Lektion. Aufhellung und Tiefe sind die analogen Schritte — nahe Nachbarn, einer angehoben zu einem blassen Schleier, einer abgesenkt Richtung Tinte. Gegenpol und Stahl sind die split-komplementären Schritte, die die Komplementärfarbe bei ≈83° von beiden Seiten flankieren. Und jede Zeile trägt nur einen Bruchteil des Chromas der Ausgangsfarbe: Kein Kandidat erreicht eine Stärke, bei der man ihn für eine zweite Primärfarbe halten könnte.

Öffne die vier aus diesem Blau abgeleiteten Vorschläge in Scale Composer — die Ausgangsfarbe mit ihren vier Kandidaten nebeneinander, jeweils mit sichtbarem Farbton-Versatz und heruntergedrehter Stärke gegenüber dem Original.

Was kann die Harmonie entscheiden — und was nicht?

Die ehrliche Grenze: Die Geometrie garantiert, dass Kandidaten mit der Primärfarbe verwandt sind, nicht dass sie richtig für das Produkt sind. Beziehungen auf dem Kreis sind ein Filter gegen willkürliche Farbe — eine aus dem Markenblau abgeleitete Bronze gehört zur Familie, wie es ein Korallton vom Moodboard nie sein wird — aber sie wissen nichts darüber, ob das Produkt Diagramme hat, die kategoriale Farbtöne brauchen, Marketing-Flächen, die Wärme wollen, oder keins von beidem. Viele Interfaces erledigen ihre gesamte Aufgabe mit einem Farbton plus Neutraltönen und Funktionsfarben, und für sie ist die richtige Zahl unterstützender Farben null. Diese Entscheidung liegt außerhalb der Reichweite der Harmonie.

Behandle die Ausgabe jedes Harmonie-Generators also als Shortlist, nicht als Palette. Öffne die Vorschläge und behalte höchstens einen — verwirf den Rest und behalte diesen einen nur, wenn du die Fläche, die er besetzen wird, bereits benennen kannst. Ein Kandidat, der die Kuratierung mit einer zugewiesenen Aufgabe übersteht, ist Harmonie bei ihrer eigentlichen Arbeit: Sie verengt den unendlichen Farbtonraum auf eine Handvoll strukturell solider Optionen und lässt die Entscheidung dort, wo sie hingehört.