Primär, Sekundär, Akzent: Rollenbasierte Farbe

Primär, Sekundär und Akzent sind Rollen, die eine Farbe in einem Produkt spielt, keine Farbarten — und die Leiter ist kürzer, als das Vokabular vermuten lässt. Eine Palette hat genau eine Primärfarbe (die Markenfarbe, die das Produkt identifiziert und seine Aktionen kennzeichnet: Buttons, Links, Fokus), null oder mehr Sekundärfarben (unterstützende Farbtöne für Illustration, Daten und Marketing-Flächen) und einen Akzent — der keine dritte Farbklasse ist, sondern eine Verwendung: die Hervorhebungs-Aufgabe, die meist der Primärfarbe selbst oder einer Sekundärfarbe zufällt. Um sie herum steht die feste Nebenbesetzung, die jede Palette mitbringt: eine Neutralton-Skala für Flächen und Text und die vier Funktionsfarben für Erfolg, Warnung, Fehler und Info.

Das Vokabular hat sich verheddert, weil die Begriffe aus verschiedenen Traditionen stammen — Markenidentität, Innenarchitektur, Komponentenbibliotheken — und jede sie etwas anders verwendet. Sie zu entwirren ist vor allem eine Frage danach, welche Aufgabe jede Farbe innehat — die Frage, die sich durch unseren Leitfaden zu Farbskalen zieht.

Was leistet jede Rolle eigentlich?

Primär (die Markenfarbe). Genau eine. Sie identifiziert das Produkt und kennzeichnet Interaktion: Buttons, Links, Fokusringe, ausgewählte Zustände. Dieses Genau-eine ist strukturell, nicht stilistisch — wenn zwei Farbtöne um die Aktionsfarbe konkurrieren, muss jeder Screen neu aushandeln, welcher „hier drücken” bedeutet. In der Paletten-UI von Scale Composer ist die Gruppe buchstäblich dafür dimensioniert: Marke fasst eine Farbe.

Sekundärfarben. Null oder mehr unterstützende Farbtöne — und zuerst die ehrliche Anmerkung: viele starke Interfaces haben keine. Eine Markenfarbe plus eine Neutralton-Skala plus die vier Funktionsfarben decken ein vollständiges Produkt ab — jeder Button, jedes Formular, jeder Zustand und jede Textebene ist berücksichtigt. Sekundärfarben verdienen sich ihren Platz auf Flächen, die die Primärfarbe nicht allein abdecken kann: kategoriale Datenreihen, Illustration, Marketing-Abschnitte, Sub-Marken-Bereiche. Sie sind auch die Stelle, an der Paletten aufquellen — Farbtöne, die hinzugefügt wurden, weil die Palettenseite leer aussah, und die dann durchs Produkt wandern, auf der Suche nach einer Aufgabe. In Scale Composer sind sie die offene Gruppe, hinzufügbar über das +.

Akzent. Eine Verwendung, keine Farbe. In einer Ein-Farben-Palette ist die Primärfarbe der Akzent; wo ein eigener Akzent-Farbton existiert, ist er eine Sekundärfarbe, der die Hervorhebungs-Aufgabe übertragen wurde. Akzent als Rolle zu begreifen löst die Sorge „wir müssen noch unsere Akzentfarbe festlegen” auf — vielleicht hast du sie schon.

Neutral und funktional. Die feste Besetzung: die Neutralton-Skala trägt die meisten Pixel, und die vier funktionalen Bedeutungen sind konventionsgebunden (eine feste Gruppe in Scale Composer). Keine von beiden ist optional, und keine wird eigentlich gewählt, sondern eher abgestimmt.

Wie viele Farben braucht eine Palette wirklich?

Weniger, als Palettenseiten nahelegen — und es gibt eine nützliche Proportionsregel, sofern man sie als das behandelt, was sie ist. Die 60-30-10-Regel ist eine aus der Innenarchitektur geliehene Faustregel: ein dominanter Anteil, ein sekundärer Anteil, ein kleiner Akzent-Anteil. Ehrlich auf UI übertragen verschiebt sich die Aufteilung stärker, als der Name andeutet: Neutraltöne nehmen die ~60 und meist weit mehr — eher 90 % der Pixel in einem textdichten Produkt — die Markenfarbe nimmt die ~10 als Interpunktion, und das mittlere Band ist alles Übrige zusammen: Sekundärfarben, wo es sie gibt, Tönungen, funktionale Momente.

Die Proportionen sind kein Gesetz; die Reihenfolge ist die Erkenntnis. Das Auge braucht ein dominantes, ruhiges Feld, damit die Figur sich gegen den Grund abhebt, eine untergeordnete Familie und eine seltene Hervorhebung — die Seltenheit ist es, die einen Akzent als Akzent lesbar macht. Eine Palette, in der drei Farbtöne je 30 % beanspruchen, hat keine Hierarchie, der die Aufmerksamkeit folgen könnte.

Öffne die Rollen-Anatomie einer vollständigen Palette in Scale Composer — die vier Gruppen in einer Ansicht: der einzelne Marken-Slot, die Sekundärfarben-Reihe mit ihrem +, die Neutralton-Skala und die festen vier Funktionsfarben.

Wie wählt man Sekundärfarben gut aus?

Der übliche Fehler ist das Bauchgefühl-Auswählen: ein Blaugrün, weil es frisch wirkt, ein Korallton, weil ein Moodboard einen hatte. Die Farben mögen angenehm sein, aber nichts bindet sie an die Palette — sie sind Gäste, keine Familie. Die Alternative ist, Kandidaten aus der eigenen Geometrie der Primärfarbe abzuleiten, damit die Beziehung strukturell ist, bevor sie ästhetisch ist. Aus einer Primärfarbe schlägt Scale Composer vier vor:

Die Geometrie lohnt sich zu lesen: Zwei Vorschläge sind nahe Nachbarn der Primärfarbe (tint, depth) — Harmonie durch Verwandtschaft — und zwei liegen quer über dem Farbkreis und flankieren die exakte Komplementärfarbe bei ≈83°, statt genau darauf zu landen, denn eine reine Komplementärfarbe neigt dazu, gegen ihren Partner zu vibrieren. Die klassische Farbenlehre kennt diese Nachbarschaft als Split-Komplementär-Gebiet. Die Vorschläge sind Kandidaten, keine Schlussfolgerungen: Ein Designer kuratiert — nimmt das Amber und verwirft den Rest, oder nimmt keinen. Jede Sekundärfarbe, die überlebt, wird zu einer vollständigen Farbrampe mit derselben Mechanik wie die der Marke: Helligkeitskurve, Chroma-Profil, abgeleitete Rollen.

Wie sehen echte Paletten-Zusammensetzungen aus?

Drei Zusammensetzungen, die kleinste zuerst. Die Rampenzahl setzt voraus, dass jede Farbe eine vollständige Skala ist: eine Marke + eine Neutral + vier funktionale = sechs Farbrampen, bevor überhaupt eine Sekundärfarbe existiert.

Die Empfehlung ergibt sich aus der Tabelle: Fang minimal an und füge eine Sekundärfarbe hinzu, wenn eine echte Fläche danach verlangt — ein Diagramm mit vier Reihen ist ein Grund; eine leer wirkende Palettenseite nicht. Eine Sekundärfarbe, die mit einer Aufgabe kommt, bleibt kohärent; eine, die aus dem Bauchgefühl kommt, macht sich auf die Suche nach einer.

Das + in der Sekundärfarben-Gruppe ist der Ort, an dem das Rollenmodell konkret wird. Füge eine Sekundärfarbe hinzu und leite sie aus deiner Primärfarbe ab — die vier Vorschläge erscheinen mit ihrer Farbton-Geometrie. Behalte eine nur, wenn du die Fläche benennen kannst, die sie besitzen wird.