Eine vollständige Palette aus einer einzigen Markenfarbe erzeugen

Das Rebranding geht live, und die Marke kommt als eine einzige freigegebene Farbe an — sagen wir das Blau #2563eb — plus ein Logo, eine Schriftart und ein Stapel Mood-Bilder. Dann öffnet jemand das Produkt-Backlog: Hover-Zustände, deaktivierte Buttons, Input-Rahmen, Tabellenstreifen, ein Erfolgs-Toast, ein Fehlerzustand, Chart-Serien, ein Dark Theme. Zehn Stufen einer Marken-Rampe, zehn Neutraltöne, vier Funktionsfarben mit eigenen Rampen, rund siebzehn semantische Rollen pro Oberfläche — die Oberfläche braucht in der Größenordnung von hundert zusammengehörigen Werten, und die Richtlinie benennt genau einen. Diese Lücke ist der Punkt, an dem die meisten Rebrandings auf ihr erstes Engineering-Ticket treffen.

Die Lücke lässt sich durch Ableitung schließen: Eine einzige Markenfarbe kann eine vollständige Palette in fester Reihenfolge erzeugen — (1) die Ausgangsfarbe wird zu ihrer eigenen zehnstufigen Rampe, (2) eine Neutralton-Skala wird nach derselben Helligkeitslogik gebaut, mit einem Hauch des Markenfarbtons, (3) Kandidaten für unterstützende Farben werden aus der Farbton-Geometrie der Ausgangsfarbe vorgeschlagen, (4) die vier Funktionsfarben werden auf das Sättigungsniveau der Palette abgestimmt, und (5) semantische Rollen werden gegen Kontrast-Untergrenzen zugewiesen. Die Erzeugung bringt dich auf kohärente 80 % — die verbleibenden Entscheidungen sind Design-Urteil. Dieser Artikel geht die Ableitung der Reihe nach durch; die Rampen-Mechanik darunter steckt in unserem Leitfaden zu Farbskalen.

Wie wird aus einem einzigen Hex-Wert eine Rampe?

Stufe eins. #2563eb wird zu oklch(0.546 0.215 262.9) umgerechnet, und jede Koordinate speist einen anderen Teil der Rampe. Der Farbton, 262,9°, wird über alle zehn Stufen gehalten. Das Chroma, 0,215, wird zum Sättigungs-Höhepunkt der Rampe, wobei die Farbe zu den Enden hin ausläuft. Die Stufen selbst laufen von einem fast weißen L ≈0,97 (#F1F5FE) hinunter zu L ≈0,25 (#192233) entlang einer Helligkeitskurve — und die eigene Helligkeit der Ausgangsfarbe, 0,546, liegt zwischen dem erzeugten 500 (L ≈0,63) und 600 (L ≈0,52). Die Rampe klammert die Markenfarbe ein, statt sie zwangsläufig zu reproduzieren, und welche dieser beiden Stufen als Arbeits-Kern dient, ist eine der Urteilsentscheidungen, die später kommen.

Woher kommt die Neutralton-Skala?

Stufe zwei. Die Neutraltöne nutzen dieselbe Helligkeitsmaschinerie erneut, bei nahezu null Sättigung — nahezu null, nicht null: ein Hauch von Chroma, ausgerichtet auf den Markenfarbton (hier 262,9°), denn reine Grautöne mit gleichen Kanälen wirken neben einer farbigen Palette meist losgelöst. Das Ergebnis sind zehn Grautöne, die unmerklich ins Blaue tendieren, sodass die Seiten, Karten und Rahmen — der Großteil der Pixel einer Oberfläche — zur selben Familie gehören wie die Marken-Rampe. Der Neutralton erbt seine Struktur von der Ausgangsfarbe; seine Temperatur bleibt eine Entscheidung, die ein Designer überschreiben kann.

Woher kommen die unterstützenden Farben?

Stufe drei — und der Punkt, an dem die Ableitung sichtbar wird. Ausgehend von der Position der Ausgangsfarbe auf dem Farbtonkreis schlägt Scale Composer vier unterstützende Kandidaten vor — Rotationen des Markenfarbtons, jede zusätzlich in Helligkeit oder Chroma zurückgedreht, sodass sie unterstützt statt zu konkurrieren:

Die Ableitung aus der Kreisgeometrie ist der klassische Farbschema-Zug — Beziehungen zwischen Farbtonwinkeln stehen stellvertretend für visuelle Verwandtschaft — und die ehrliche Grenze gehört gleich daneben: Die Geometrie garantiert, dass die Kandidaten verwandt mit der Markenfarbe sind, nicht, dass sie richtig für die Marke sind. Diese vier sind Vorschläge, die ein Designer kuratieren soll — behalte die Bronze und verwirf den Rest, oder behalte keinen. Jeder, der überlebt, wird zu einer eigenen vollständigen Rampe, auf derselben Maschinerie wie die der Marke.

Öffne die ganze Ableitung aus diesem Blau in Scale Composer — die Ausgangsfarbe, ihre Rampe, die getönten Neutraltöne, die vier unterstützenden Vorschläge und die Funktionsfarben, alle aus dem einzigen Hex-Wert erzeugt.

Was passiert mit Erfolg, Warnung, Fehler und Info?

Stufe vier. Die vier funktionalen Absichten behalten ihre konventionellen Farbtöne — Nutzer kommen bereits auf Grün, Bernstein, Rot und Blau trainiert an — aber ihre Sättigung wird auf das Niveau der Palette abgestimmt, sodass eine gedämpfte Marke Funktionsfarben ergibt, die murmeln statt zu schreien, und eine kräftige Marke vier ergibt, die sich behaupten können. Jede wird als vollständige Rampe erzeugt, denn ein Fehlerzustand braucht eine blasse Tönung, einen mittelstarken Kern und eine lesbare Textstufe — nicht ein einziges Rot.

Wo kommen Rollen und Kontrastprüfungen ins Spiel?

In Stufe fünf bekommen die Farben ihre Aufgaben. Pro Oberfläche werden rund siebzehn semantische Rollen abgeleitet — Hintergrund, geschichtete Textebenen, Rahmen, Aktionsfarben — wobei WCAG-Kontrast-Untergrenzen durchgesetzt und APCA parallel geprüft werden. Eine dunkle Variante wird abgeleitet statt invertiert, auf ihrer eigenen Helligkeitskurve mit einem Chroma-Schub von rund 20 %, denn dunkle Umgebungen dämpfen die wahrgenommene Farbigkeit. Diese Stufe verwandelt die Palette von einem Bild in ein Artefakt: Das Ergebnis wird als DTCG, CSS, Tailwind oder Figma-Variablen exportiert, mit Hex daneben.

Was braucht immer noch einen Designer?

Die verbleibenden 20 % konzentrieren sich auf ein paar benannte Entscheidungen. Welche unterstützenden Kandidaten überleben — kein Generator weiß, ob das Produkt einen Illustrations-Farbton oder eine zweite Datenserie braucht. Ob der Arbeits-Kern der Marke der 500er oder der 600er ist — meist entscheidet der Kontrast zu weißem Text. Wie warm sich die Neutraltöne anfühlen sollen. Wie laut die funktionalen vier in genau diesem Produkt sein dürfen. Die Ableitung garantiert, dass die Palette kohärent ist; nur das Urteil kann sie richtig machen. Was die Ableitung über Tempo hinaus beiträgt, ist, dass das ganze System eine Funktion seiner Ausgangsfarbe bleibt — was es wiederholbar macht.

Und diese Eigenschaft ist das, was sich am schnellsten testen lässt. Tausche die Ausgangsfarbe aus und sieh zu, wie das System neu ableitet — ersetze das Blau durch eine andere Markenfarbe, und jede Stufe oben rechnet neu: Rampe, Neutraltöne, unterstützende Vorschläge, Kontrastbeziehungen. Eine so gebaute Palette ist eine Entscheidung plus Kuration, und das Tool macht den ersten Teil sofort, damit der zweite die Aufmerksamkeit bekommt.