Farbsysteme für Agenturen: Mehr als eine Palette

Eine Farbpalette ist eine Liste von Tönen. Ein Farbsystem ist ein Regelwerk darüber, wie diese Töne verwendet werden — und warum. Der Unterschied ist entscheidend. Viele Marken haben eine Palette: ein Primärblau, vielleicht ein Akzentrot, ein Grauton als Hintergrund. Was fehlt, ist die Antwort auf die Fragen: Welcher Ton wird wann verwendet? Was bedeutet die Farbe in welchem Kontext? Wie verhält sie sich im Druck gegenüber dem Bildschirm? Ohne diese Antworten ist eine Palette kein System — es ist ein Ausgangspunkt.

Ein robustes Farbsystem beginnt mit einer durchdachten Skala. Für jede Kernfarbe definiert man eine Abstufung von sehr hell bis sehr dunkel — typischerweise 10 bis 12 Stufen. Diese Abstufungen sind die Rohmasse, aus denen dann semantische Rollen abgeleitet werden. Statt --color-blue-600 direkt im Code zu verwenden, definiert man --color-primary: var(--color-blue-600). Das hat einen klaren Vorteil: Wenn sich die Primärfarbe ändert, ändert man den Wert an einer einzigen Stelle — nicht in hundert Selektoren.

Semantische Farbrollen

Semantische Farbrollen geben jedem Ton eine Funktion. Primär: Aktionen, Links, wichtige Buttons. Sekundär: unterstützende Elemente, weniger prominente Aktionen. Neutral: Hintergründe, Trennlinien, Text. Semantisch: Erfolg (grün), Warnung (gelb), Fehler (rot), Info (blau). Diese Rollen sind über das gesamte Interface konsistent. Ein Grün in einer Erfolgsmeldung ist dasselbe Grün wie in einem positiven Status-Badge. Das schafft Vorhersehbarkeit — Nutzer lernen, was eine Farbe bedeutet, und erkennen Muster schnell.

Für Agenturen, die mit mehreren Kunden arbeiten, empfiehlt sich ein weiterer Layer: Kunden-Tokens. Das sind Variablen, die kundenspezifisch definiert werden und auf die gemeinsame Systemstruktur aufsetzen. Der Vorteil: Man kann denselben Komponenten-Baukasten für mehrere Kunden nutzen und muss nur die Token-Werte tauschen. Theme-Switching zwischen Marken mit wenig Code.

Print vs. Digital: ein unterschätztes Problem

Farben, die auf einem Bildschirm brillant wirken, sehen im Druck oft stumpf oder verschoben aus. Bildschirme nutzen RGB-Farbraum und emittieren Licht; Drucker arbeiten mit CMYK und reflektieren Licht. Diese physikalischen Unterschiede lassen sich nicht vollständig ausgleichen. Ein gut durchdachtes Farbsystem definiert deshalb für Druckmedien Pantone- oder CMYK-Entsprechungen der digitalen Farben — nicht durch automatische Konvertierung, sondern durch manuelle Annäherung an die intendierte Wirkung.

• Farbskalen von hell bis dunkel für jede Kernfarbe definieren
• Semantische Rollen von primitiven Werten trennen
• Dark-Mode-Varianten in das System von Anfang an integrieren
• Print-Entsprechungen dokumentieren und validieren
• Kontrastanforderungen nach WCAG für alle Textkombinationen prüfen

Ein Farbsystem ist kein einmaliges Projekt — es ist ein lebendes Dokument, das mit der Marke wächst. Neue Produkte, neue Medien, neue Anforderungen entstehen. Wer das System von Anfang an flexibel und gut dokumentiert aufbaut, macht spätere Erweiterungen beherrschbar. Das ist die eigentliche Investition, die sich langfristig auszahlt.