Wie man eine Markenfarbpalette erstellt, die tatsächlich funktioniert
Ein Leitfaden für professionelle Designer zur Entwicklung einer Markenfarbpalette, die auch im Dunkelmodus, in deaktivierten Zuständen und auf allen Oberflächen jenseits des Logos überzeugt. Fünf echte Marken im Überblick.
Die meisten Farbpaletten für Marken werden für die Logo-Präsentation erstellt und sehen gut aus, solange sie nicht für den Einsatz im Produkt gedacht sind.
Eine funktionierende Farbpalette besteht nicht aus fünf Farben. Sie ist ein mehrschichtiges System: eine Basisfarbe, eine neutrale Farbskala, semantische Farben, Statusfarben und ein Dark-Mode-Konzept, das bereits vor der Entwicklung von Figma existierte. Dieser Artikel erläutert die einzelnen Schichten, zeigt fünf erfolgreiche Beispiele und schließt mit der Reihenfolge der Implementierung ab.
Warum die meisten Farbpaletten scheitern
Die meisten Farbpaletten scheitern nicht an den Farben selbst, sondern daran, dass sie für die Logo-Präsentation und nicht für den Produktiveinsatz konzipiert wurden.
Der typische Prozess läuft folgendermaßen ab: Ein Designer erstellt ein Moodboard, wählt fünf Farben aus, die zum Briefing passen, kennzeichnet sie als Primär-, Sekundär-, Akzent-, Hell- und Dunkelfarben und übergibt die Palette an die Teams, die für Produkt, Website, Dokumentation und Kampagnen zuständig sind. Keines dieser Teams war bei der Auswahl der fünf Farbmuster anwesend.
Die „Sekundärfarbe“ hat keinen brauchbaren Mitteltonbereich. Die „Primärfarbe“ ist für Fließtext zu gesättigt. Niemand hat sich für ein neutrales Grau entschieden, also erfindet der Designer einfach eins.
Das Dark-Mode-Team gibt auf und kehrt alles per CSS-Filter um. Die Farbpalette hat ihren Zweck für die Präsentation erfüllt. Für die eigentliche Arbeit hat sie versagt.
Die fünf Ebenen einer funktionierenden Farbpalette
Eine Farbpalette, die sich in der realen Markenarbeit bewährt, besteht aus fünf Ebenen, nicht aus fünf Farben. Designer, die Markensysteme in großem Umfang entwickeln, diskutieren darüber, in welche Ebene eine Farbe gehört, nicht darüber, welcher Grünton „am besten zu uns passt“.
| Ebene | Funktion | Typische Anzahl |
|-------|--------------|----------------|
| Anker | Trägt zur Markenwiedererkennung bei | 1 (ggf. 1 Unterstützung) |
| Neutrale Farben | Oberflächen, Text, Rahmen, Hintergründe | 9–12 Schritte |
| Semantisch | Erfolg, Warnung, Kritisch, Info | 3–5 Farbfamilien |
| Status | Hover, Fokus, Gedrückt, Deaktiviert | Jeder interaktiven Farbe zugeordnet |
| Dunkel | Dunkelmodus-Auflösung jeder Ebene | Vollständiges paralleles Set |
Beachten Sie, was in dieser Liste fehlt. Keine „sekundäre Markenfarbe“, keine „tertiäre“ und kein „Akzent 2“. Die meisten Marken, die glauben, eine zweite Markenfarbe zu benötigen, brauchen eigentlich eine umfassendere neutrale Farbpalette oder einen kräftigeren Anker.
Die Reduzierung auf eine Ebene ist der Fehler. Die Ebenen sind das Feature.
Ankerfarbe zuerst und zuletzt auswählen
Der Anker ist die Farbe, die die Markenwiedererkennung auf jeder Oberfläche gewährleistet und zweimal ausgewählt wird: einmal am Anfang und einmal, nachdem festgelegt wurde, wo sie platziert werden soll.
Die erste Farbwahl ist richtungsweisend. Der Ankerfarbton sollte diejenige Farbe sein, die auch ohne Wortmarke die Marke noch erkennbar macht. Die Farbwahl ist gleichzeitig eine emotionale Aussage, und hier entscheidet Farbpsychologie bereits die Hälfte der Arbeit, bevor die endgültige Farbgebung festgelegt wird. Denken Sie an Stripe Lila, Linear Lila, Figma Blau, Notion Schwarz, Slack Magenta. Eine einzige Farbe vermittelt die Markenidentität.
Die zweite Farbwahl ist technischer Natur. Nachdem die neutrale Farbpalette erstellt wurde, benötigt der Ankerfarbton fast immer eine kleine Anpassung. Er muss sich vom neutralen Hintergrund abheben, benötigt eine optimierte Version im Dunkelmodus und sollte beim Hovern und Drücken nicht verwaschen wirken. Professionelle Markensysteme verwenden 5–9 Ankerfarbstufen, nicht nur eine einzige festgelegte Farbgebung.
Die Neutraltöne bilden die Palette
Ein Großteil einer ausgelieferten Benutzeroberfläche besteht aus neutralen Farben. Eine Marke ohne eine wirklich aussagekräftige Neutraltonskala hat keine Palette, sondern nur ein Moodboard.
Eine wirklich aussagekräftige Neutraltonskala umfasst neun bis zwölf Stufen von nahezu Weiß bis nahezu Schwarz, abgestimmt auf die jeweilige Basisfarbe. Reine Grautöne wirken oft neben einer warmen Basisfarbe leblos und neben einer blauen Basisfarbe zu kühl.
Die Neutraltonskala ist der entscheidende Faktor für die Gestaltung von zugänglicher Farbkontrast. Jede Oberflächenstufe hat eine Textstufe und eine kontrastierende Rahmenstufe. Jede Stufe hat eine Funktion: Hintergrund, dezenter Hintergrund, Oberfläche, erhabene Oberfläche, Überlagerung, Trennlinie, Rahmen, gedämpfter Text, Standardtext, fetter Text.
Die Marken mit den überzeugendsten Neutraltönen behandeln Neutraltöne als Hauptbestandteil ihrer Palette, nicht als Füllmaterial. Die Basisfarbe ist das Aushängeschild. Die Neutraltöne repräsentieren das ganze Land.
Drei Marken, die die Bedeutung von Ankerfarben perfektionieren
Diese drei Marken setzen eine zurückhaltende Ankerfarbe auf eine tiefe, neutrale Farbpalette. Die Ankerfarbe bleibt erkennbar, weil sie nie zu dominant wirkt.
Notion
Sehen Sie es live auf notion.com/product
Notion verkörpert Minimalismus pur. Fast die gesamte Arbeitsfläche ist in einem dezenten Off-White mit schwarzer Schrift gehalten. Ein tiefes Marineblau bildet die Marketinglinie, während die semantische Ebene die sichtbaren Farben – Rot, Orange, Blau und Grün für Aufgabenzustände – übernimmt.
Was Sie sich abschauen können: Wählen Sie eine Ankerfarbe und fragen Sie sich dann, ob die Marke eine zweite benötigt. Die ehrliche Antwort ist meistens nein.
Linear
Sehen Sie es live auf linear.app
Linear verwendet die deutlichste Farbpalette mit Fokus auf dunkle Elemente in dieser Kategorie. Der Ankerton ist ein einzelnes Lila. Die neutralen Farben decken die gesamte Farbpalette des Dunkelmodus ab (Oberfläche, dezente Oberfläche, erhabene Oberfläche, Überlagerung) und erfüllen jeweils unterschiedliche Funktionen.
Was Sie sich abschauen können: Wenn das Produkt einen Dunkelmodus bietet, erstellen Sie die dunkle Farbpalette mit der gleichen Sorgfalt wie die helle – nicht nur als Filter.
Stripe
Sehen Sie es live auf stripe.com/payments.
Stripe setzt im SaaS-Bereich auf die klarste Gestaltung der Ankerpunkte. Das violettstichige Lila findet sich ausschließlich in CTAs, Inline-Links, Illustrationen und Markenbotschaften. Wenn Lila erscheint, wird es vom Auge als Handlungssignal und nicht als Dekoration wahrgenommen.
Was Sie sich abschauen können: Je zurückhaltender die Basisfarbe, desto einprägsamer die Marke. Unaufdringliche Basisfarben wirken wie Rauschen.
Zwei Marken, bei denen neutrale Farben im Mittelpunkt stehen
Diese beiden Marken zeigen, was passiert, wenn die neutrale Farbpalette selbst die Marke trägt und die Basisfarbe entweder monochrom oder auf bestimmte Rollen reduziert ist.
Supabase
Sehen Sie es live auf supabase.com
Supabase verwendet die disziplinierteste Farbpalette mit nur einem Akzent in den Entwicklertools. Die Oberfläche besteht aus nahezu monochromen, dunklen Neutraltönen. Die Basisfarbe ist ein einzelnes Smaragdgrün, das ausschließlich bei Markenelementen, Handlungsaufforderungen (CTAs) und Statusmeldungen erscheint. Keine zweite Markenfarbe kommt zum Einsatz. Die neutrale Farbpalette ist die Marke. Das Grün ist das Verb.
Was Sie sich abschauen können: Eine Marke kann komplett auf eine auffällige Basisfarbe verzichten, wenn das neutrale Farbsystem diszipliniert genug ist. Manche Marken brauchen eine charakteristische Graustufenpalette, keine charakteristische Farbe.
Shopify
Erleben Sie es live auf polaris.shopify.com
Das Polaris-System von Shopify zeigt, wie eine vollständig tokenisierte Markenpalette aussieht. Die Palette wird als Rollen-Token-Baum dargestellt: Oberfläche, Text, Symbol, Rahmen, Interaktiv, Kritisch, Vorsicht, Erfolg, Info. Jede Rolle hat helle und dunkle Werte. Polaris lässt Designern keinen Spielraum, über die definierten Token hinauszugehen. Die Palette ist keine Stimmung, sondern ein Vertrag.
Was Sie sich merken sollten: Schreiben Sie Token zuerst als Rollen und lösen Sie sie erst im letzten Schritt in Hexadezimalwerte auf. Wenn ein Token-Name eine Farbe anstatt einer Rolle beschreibt, gerät die Palette durcheinander.
Die 6-Schritte-Erstellungsreihenfolge
Erstellen Sie die Palette in dieser Reihenfolge, dann können die meisten häufigen Fehler gar nicht erst auftreten.
-
Erstellen Sie die Rollenliste vor der Farbliste. Anker, neutrale Oberflächen, neutraler Text, neutrale Rahmen, semantischer Erfolg, semantische Warnung, semantischer Kritikpunkt, semantische Information, Hover-Zustand, Fokus-Zustand, deaktivierter Zustand. Erstellen Sie diese Liste zunächst auf Papier.
-
Wählen Sie die Ankerrichtung, nicht das endgültige Hex-Koordinatensystem. Ein Farbton, ein grober Helligkeitszielwert, ein grober Sättigungszielwert. Halten Sie die Liste bearbeitbar.
-
Erstellen Sie anschließend die neutrale Farbskala, abgestimmt auf diesen Anker. 9 bis 12 Schritte. Testen Sie jeden Schritt gegen die anderen. Kalte Neutraltöne für kühle Anker, warme Neutraltöne für warme Anker.
-
Fügen Sie semantische Farben als Set hinzu, nicht einzeln. Erfolg, Warnung, Kritikpunkt, Information. Sie müssen harmonisch zusammenpassen. Ein einzelnes Grün, das später hinzugefügt wird, wirkt fast immer unpassend auf einer Farbpalette, mit der es nicht erstellt wurde.
-
Definiere Zustandsfarben durch Paarung, nicht durch Erfinden neuer. Hover entspricht üblicherweise einer Verschiebung um ein oder zwei Stufen auf der Farbskala. Fokus wird üblicherweise durch einen umrandeten Ring im Ankerfarbton dargestellt. Deaktiviert entspricht üblicherweise einer bestimmten neutralen Stufe.
-
Lege den letzten Hex-Wert des Ankers zuletzt fest. Führe Kontrastprüfungen mit dem zugehörigen neutralen Farbton durch. Passe die entsprechende Farbe im Dunkelmodus an. Füge Hover- und Druckstufen hinzu. Erst jetzt wird der Ankerwert festgelegt.
Warum die Reihenfolge wichtig ist
Jede Ebene schränkt die nächste ein. Wenn die Schritte in umgekehrter Reihenfolge ausgeführt werden, entstehen Farbpaletten, die sich gegenseitig stören.
Wähle den Anker zuletzt, dann kennst du die gesamte neutrale Farbskala, auf der er basiert. Wählt man zuerst die Farbe, wird jede neutrale Farbwahl zu einem Kompromiss, der auf einer Farbe basiert, die vor der Entwicklung der Benutzeroberfläche festgelegt wurde.
Die Theorie hinter dieser Schichtung wird in der Säule Farbtheorie für Designer umfassend erläutert. Die Kontrastregeln für die Kombination von neutralen und kräftigen Farben werden in zugänglicher Farbkontrast detailliert beschrieben. Für Farbpaletten in Designsystemen bietet Leitfaden für Designsysteme einen Überblick.
Die drei häufigsten Fehler bei Farbpaletten
Fast jede misslungene Markenfarbpalette weist dieselben drei Fehler auf. Alle drei entstehen durch die Auswahl von Hexadezimalcodes vor der Festlegung der Farbrollen.
Der Logo-Fehler: Fünf Farben, weil das Logo fünf Farben hat. Für nachfolgende Anwendungen werden jedoch keine fünf Farben benötigt. Keine neutralen Farben, keine semantische Ebene, kein Dark-Mode-Plan. Der häufigste Fehler.
Die Sättigungsfalle: Alle Farben mit der gleichen, meist hohen Sättigung. Sieht auf einem Moodboard lebendig aus, wirkt aber in einer realen Benutzeroberfläche ermüdend. Gute Farbpaletten variieren die Farbsättigung stark, und Proportionsregeln wie 60-30-10-Regel verhindern, dass die grellsten Farben das Bild dominieren.
Die fehlende Mitte. Ein heller neutraler Ton, ein dunkler neutraler Ton, nichts dazwischen. Reale Benutzeroberflächen bewegen sich im mittleren Bereich der Farbskala. Eine Palette mit nur zwei neutralen Tönen wirkt flach, egal wie gut der Basiston ist.
Optimieren Sie den Prozess, und die Fehler verschwinden.
FAQ
Wie viele Farben sollte eine Markenfarbpalette enthalten?
Weniger Basistöne als Sie denken, mehr neutrale Töne als Sie denken. Die meisten Marken verwenden einen Basiston, 9–12 neutrale Abstufungen, 3–5 semantische Farbfamilien, zugehörige Statusfarben und ein separates Set für den Dunkelmodus. Die Anzahl der Farbtöne ist gering, die der Abstufungen hingegen hoch.
Benötige ich eine separate Palette für den Dunkelmodus?
Nein, keine separate Palette. Eine parallele Version derselben Palette genügt. Die Rollen bleiben identisch, nur die Hexadezimalwerte ändern sich je nach Thema. Wenn ein Designer den Dunkelmodus manuell von Grund auf neu erstellt, wurde die Farbpalette nicht als System entwickelt.
Kann ich einen Farbpalettengenerator verwenden, um eine Markenpalette zu erstellen?
Ein Generator kann den Grundton und eine grobe neutrale Richtung vorgeben. Er kann jedoch kein System erstellen. Jede in diesem Artikel vorgestellte Farbpalette wurde manuell angepasst: Neutrale Farben wurden wärmer oder kälter gestaltet, um zum Grundton zu passen, semantische Farbfamilien wurden angepasst, die Dunkelmoduswerte individuell abgestimmt und die Farben der einzelnen Zustände schrittweise kombiniert.
Erstellen Sie das System, nicht die Farbmuster
Eine Markenfarbpalette besteht nicht aus fünf Farben auf einem Moodboard. Sie ist ein vielschichtiges System mit Rollen, einer neutralen Farbskala, semantischen Signalen, Zustandsfarben und einem Dunkelmodusplan, die in einer bestimmten Reihenfolge erstellt werden.
Notion, Linear, Stripe, Supabase und Shopify haben nicht mit Farbmustern gewonnen. Ihr Erfolg beruht darauf, dass sie die Farbpalette als Grundlage genutzt haben: ein zentraler Anker, eine vollständige neutrale Farbskala, eine aussagekräftige semantische Ebene, eine zugehörige Zustandsebene und ein von Anfang an integrierter Dunkelmodus.
Erstellen Sie die Ebenen, führen Sie die sechs Schritte aus und hören Sie auf, Markenfarben wie die Einrichtung eines Zimmers auszuwählen.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
