Paletten aufbauen

Eine Markenfarbe allein ist noch kein Farbsystem. Eine Website braucht Farben für Hintergründe, Texte, Linien, Knöpfe, Hervorhebungen, Hinweise, Fehlermeldungen und Erfolgsmeldungen – oft zwanzig oder mehr verschiedene Töne. Werden diese nach und nach ohne System ergänzt, entsteht ein Durcheinander aus ähnlichen, aber nicht gleichen Farben, das unruhig wirkt und kaum zu pflegen ist. Diese Lektion zeigt, wie man aus einer oder zwei Grundfarben systematisch eine vollständige Palette aufbaut.

1. Farbschemata auf dem Farbkreis

Der Ausgangspunkt vieler Paletten ist der Farbkreis, auf dem die Farbtöne im Kreis angeordnet sind. Bestimmte geometrische Beziehungen auf diesem Kreis ergeben bewährte Kombinationen, die Farbschemata.

Abb. 3.1Vier klassische Farbschemata

Für Unternehmenswebsites sind vor allem zwei Muster praktikabel. Das analoge Schema mit benachbarten Tönen wirkt ruhig und geschlossen und eignet sich für Marken, die Seriosität ausstrahlen wollen. Das komplementäre Schema nutzt eine Hauptfarbe und ihre Gegenfarbe als kleinen Akzent – etwa ein dunkles Blau mit einem warmen Orange für Knöpfe. Triaden und Split-Komplementäre bringen mehr Farbigkeit, sind aber schwerer zu beherrschen und eher für junge, verspielte Marken geeignet.

2. Die Palette im Generator

Probieren Sie aus, wie aus einem einzigen Farbton ein System entsteht: ein Schema für Akzente, eine Tonleiter für Flächen und Texte und eine Aufteilung für die Anwendung.

3. Tonleitern statt Einzelfarben

Der wichtigste Schritt vom Farbwunsch zum Farbsystem ist die Tonleiter. Statt einer einzelnen Markenfarbe entstehen zehn Abstufungen, aus denen alle Anwendungen gespeist werden: ein sehr helles Blau für Hinweisflächen, ein mittleres für Knöpfe, ein sehr dunkles für Überschriften. Da alle Stufen denselben Farbton haben, wirkt das Ergebnis geschlossen. Hinzu kommt eine neutrale Tonleiter, meist ein Grau mit einem leichten Stich in Richtung der Markenfarbe, das wärmer oder kühler wirkt als reines Grau und die Palette zusammenhält.

Beim Aufbau lohnt sich ein Blick auf den Farbraum. In HSL wirken gleiche Helligkeitsschritte je nach Farbton unterschiedlich: Gelb erscheint viel heller als Blau bei gleichem Wert. Neuere Farbräume wie OKLCH gleichen das aus, weshalb viele Designsysteme ihre Skalen inzwischen darin berechnen. Für den Alltag genügt es, die Skala mit dem Auge zu prüfen und Stufen, die aus der Reihe fallen, von Hand zu korrigieren.

4. Farben nach Rollen benennen

Ein häufiger Fehler ist die Benennung nach Aussehen: „Blau“, „Hellblau“, „Dunkelblau“. Ändert sich die Markenfarbe, stimmen die Namen nicht mehr. Besser ist die Benennung nach Rollen, wie sie in Designsystemen üblich ist.

Mit Rollen wird die Palette zu einer Sprache, die Gestaltung und Entwicklung teilen. Im Code werden die Rollen als Variablen hinterlegt, und jede Komponente verwendet nur Rollen, nie konkrete Farbwerte. Soll später ein dunkler Modus entstehen oder die Markenfarbe angepasst werden, ändern sich nur die Zuordnungen, nicht hunderte einzelne Stellen.

5. Die 60-30-10-Regel

Wie viel von welcher Farbe? Eine alte Regel aus der Innenarchitektur hilft auch im Web: etwa 60 Prozent der Fläche in einer ruhigen Grundfarbe, 30 Prozent in einer Sekundärfarbe und 10 Prozent in einer Akzentfarbe. Auf einer Website heißt das meist: viel Weiß oder helles Neutral, eine dunkle Markenfarbe für Kopfbereich, Überschriften und einzelne Abschnitte, und ein kräftiger Akzent nur für das, was wirklich auffallen soll. Schalten Sie im Generator die Regel aus, und Sie sehen, was passiert, wenn alle Farben gleichberechtigt auftreten.

6. Die Palette festhalten

Am Ende steht eine überschaubare Palette: eine Marken-Tonleiter, eine neutrale Tonleiter, gegebenenfalls eine Akzentfarbe und drei Statusfarben, jeweils mit den Werten aus der vorigen Lektion für alle Medien. Dazu kommen die Rollen und einige Beispiele für richtige und falsche Anwendungen. Das klingt nach viel Arbeit, ist aber in einem Tag erledigt und spart über Jahre Diskussionen. Wichtig ist, dass die Palette von Anfang an auf Barrierefreiheit geprüft wird – denn eine schöne Palette, deren Textfarben nicht lesbar sind, muss später mühsam korrigiert werden. Darum geht es in der letzten Lektion dieses Moduls.

Ein praktisches Beispiel zeigt den Nutzen. Die Website eines Ingenieurbüros verwendete bei einer Bestandsaufnahme 37 verschiedene Farbwerte, darunter elf Blautöne, die sich teils nur minimal unterschieden. Keiner davon war dokumentiert, und jede neue Seite brachte weitere hinzu. Nach der Umstellung auf eine Marken-Tonleiter mit zehn Stufen, eine neutrale Tonleiter und drei Statusfarben blieben 23 Farben übrig, die alle eine klare Rolle hatten. Die Seiten wirkten sofort geschlossener, und neue Inhalte ließen sich schneller erstellen, weil die Farbwahl keine Frage des Geschmacks mehr war.

Hilfreich ist auch, die Palette frühzeitig in verschiedenen Situationen zu testen: auf einer textlastigen Seite, auf einer Seite mit vielen Fotos, in einem Formular mit Fehlermeldungen, in einer Tabelle und in einer E-Mail. Oft zeigt sich erst dann, dass eine Fläche zu kühl wirkt, eine Statusfarbe zu nah an der Markenfarbe liegt oder ein Grau neben Fotos schmutzig erscheint. Solche Korrekturen sind vor dem Start einfach, danach aufwendig. Wer mit einer Agentur arbeitet, sollte deshalb nicht nur die Startseite, sondern auch diese Alltagssituationen als Entwurf sehen wollen.

Schließlich gilt: Eine Palette ist kein einmaliges Projekt. Neue Anforderungen wie ein dunkler Modus, eine Produktlinie oder eine Kampagne werden in das bestehende System eingeordnet, statt neue Einzelfarben hinzuzufügen. So bleibt der Auftritt über Jahre stimmig, auch wenn viele Menschen daran mitarbeiten und neue Medien hinzukommen.

Ein letzter Tipp für die Praxis: Beginnen Sie klein. Eine Marken-Tonleiter, eine neutrale Tonleiter und drei Statusfarben reichen für die allermeisten Websites vollkommen aus. Weitere Farben kommen nur hinzu, wenn es eine konkrete Aufgabe gibt, die sich mit den vorhandenen nicht lösen lässt. Wer diese Disziplin durchhält, hat nach Jahren noch eine Palette, die sich auf einer einzigen Seite übersichtlich darstellen lässt.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.