Farbsysteme: Markenfarben in Websites richtig anwenden

Viele Websites haben "die richtigen Markenfarben" und wirken trotzdem unsicher. Die Hauptfarbe ist da, der Akzent ist da, ein dunkles und ein helles Grau gibt es auch. Trotzdem fühlt sich die Seite nicht stimmig an. Das liegt selten am Logo. Es liegt fast immer daran, dass aus Markenfarben kein Farbsystem geworden ist.

Logofarben sind kein Farbsystem

Im Logo reichen oft zwei oder drei Farben. Auf einer Website müssen die gleichen Farben deutlich mehr Aufgaben übernehmen: Hintergründe, Flächen, Textfarben, Hover-Zustände, Buttonzustände, Hinweise, Fehler und Erfolg. Wer das mit drei Brandfarben lösen will, landet schnell in unklaren Kontrasten und schwer lesbaren Bereichen.

Ein Farbsystem ist kein Designluxus, sondern die ehrliche Konsequenz daraus, dass eine Website mehr Anwendungsfälle hat als ein Logo.

Farben haben Rollen, nicht nur Werte

In einem brauchbaren Farbsystem hat jede Farbe eine klare Rolle. Typisch sind:

• Primärfarbe für Markenpräsenz und zentrale CTAs
• Sekundärfarbe für Akzente, Highlights, ergänzende Elemente
• Neutralpalette für Texte, Flächen, Trenner und Hintergründe
• Statusfarben für Erfolg, Hinweis, Warnung, Fehler
• Oberflächenfarben für Karten, Sektionen oder Modale

Wer Farben nur als Hex-Codes denkt, wird sie inkonsistent einsetzen. Erst wenn jede Farbe weiss, wofür sie da ist, entstehen Entscheidungen, die sich später ohne Diskussion treffen lassen.

Skalen statt Einzeltönen

Eine echte Markenfarbe ist auf der Website selten als einzelner Wert sinnvoll. Hover-Zustände, gedrückte Buttons, helle Flächen oder dunkle Boxen brauchen mehrere Stufen.

Aus jedem Markenton entsteht damit eine Skala, etwa von sehr hell für Hintergründe bis sehr dunkel für Text auf hellen Flächen. Diese Skalen sind kein Selbstzweck. Sie sind die Grundlage dafür, dass die Marke auch in Detailzuständen ruhig wirkt, statt zu blinken.

Kontrast nicht erst am Ende prüfen

Farbsysteme scheitern oft an der gleichen Stelle: Ein heller Markenton sieht im Mood Board grossartig aus und wird dann auf weissem Hintergrund als Buttontext eingesetzt. Plötzlich ist die wichtigste Aktion auf der Seite kaum lesbar.

Kontraste gehören in den Aufbau des Farbsystems hinein, nicht in die Korrekturschleife danach. Hilfreich dabei ist der Beitrag Farbkontrast im Webdesign: kleines Detail, grosse Wirkung, der die Grundlogik kompakt zusammenfasst.

Marke und Funktion klar unterscheiden

Eine kräftige Markenfarbe wirkt nur dann markant, wenn sie nicht überall genutzt wird. Wenn jede Sektion, jeder Button, jedes Icon und jeder Hinweis die gleiche Brandfarbe trägt, verliert sie ihre Bedeutung.

Gute Farbsysteme haben Disziplin: Markenfarbe primär dort, wo Marke wirken soll, Statusfarben dort, wo Funktion kommuniziert wird, Neutralpalette als ruhige Bühne. Das macht die Marke nicht kleiner, sondern lässt sie an den richtigen Stellen klarer auftreten.

Häufige Fehler in der Praxis

Wiederkehrende Muster, die ein eigentlich gutes System schwächen:

• Markenfarbe wird auch für Erfolg- und Fehlerzustände genutzt
• viele leicht unterschiedliche Grautöne ohne System
• dunkler Markenton als Fliesstext ohne Lesbarkeitskontrolle
• Akzentfarbe so oft eingesetzt, dass sie nicht mehr akzentuiert
• Gradient-Spielereien, die das System überdecken

Diese Fehler entstehen selten in einem grossen Schritt. Sie sammeln sich an, wenn das System nicht klar dokumentiert ist.

Farbsystem als technisches Fundament

Auf einer modernen Next.js-Website mit Tailwind und ignis CMS ist das Farbsystem nicht nur Design, sondern Code. Tokens für Primär-, Sekundär-, Neutral- und Statusfarben werden im Build sauber abgelegt und in Komponenten konsistent verwendet.

Das hat einen praktischen Effekt: Wenn die Marke später nachjustiert wird, ändert sich der Wert an einer Stelle, und die ganze Website zieht nach. Ein gut aufgesetztes Farbsystem ist damit nicht nur ein Designthema, sondern ein Wartbarkeits-Thema.

Pragmatische Empfehlung

Für die meisten Unternehmenswebsites trägt ein System mit:

• einer Primärfarbe in fünf bis sieben Stufen
• einer Sekundärfarbe in drei bis fünf Stufen
• einer Neutralpalette mit klaren Schritten
• vier Statusfarben mit jeweils einer hellen Variante
• dokumentierten Regeln, was wofür genutzt wird

Mehr ist selten besser. Klar geregelt schlägt fast immer breit aufgestellt.

Fazit

Markenfarben werden erst dann zur Stärke, wenn sie als System gedacht werden. Mit klaren Rollen, Skalen, Kontrastregeln und Disziplin in der Anwendung wird Farbe zum ruhigen Markenwerkzeug, statt zum Streitpunkt im nächsten Designreview.