Farbrollen beschreiben, welche Aufgabe eine Farbe in einem Farbschema übernimmt: Die Primärfarbe trägt wichtige Aktionen, die Sekundärfarbe ergänzt, eine Akzentfarbe setzt Hervorhebungen, Flächenfarben tragen Hintergründe. Statt fester Farbwerte vergibt ein Designsystem Rollen, und erst das Theme legt fest, welche Farbe welche Rolle spielt.
- Farbrollen
Die Aufgaben, die Farben in einem Farbschema übernehmen, etwa Primärfarbe für wichtige Aktionen, Flächenfarbe für Hintergründe und Fehlerfarbe für Warnungen.
Beispiel: „Dank der Farbrollen ändert sich im Dark Mode nur die Zuordnung, der Code der Buttons bleibt gleich.“Auch: Color Roles, Farbaufgaben.
Abgrenzung zu den Primärfarben der Farbenlehre: Dort meint primär die Grundfarben, hier die Hauptrolle.
Farbrollen in Material Design
Material Design 3 kennt 26 Standardrollen in sechs Gruppen: Primary, Secondary, Tertiary, Error, Surface und Outline. Primary ist für die wichtigsten Aktionen da, Secondary für weniger dringende Elemente wie Filter, Tertiary für kontrastierende Akzente wie Badges. Zu jeder Rolle gibt es eine on-Rolle für Text und Symbole darauf; Paare wie Primary und on-Primary garantieren laut Material einen Kontrast von mindestens 3 zu 1.
Farbrollen und Flächenanteile
Die 60-30-10-Regel ist eine Faustregel ohne belegte Herkunft, passt aber zu den Rollen: viel Fläche, etwas zweite Farbe, wenig Akzent. Material Design selbst nennt keine Prozente. Wichtiger als die Zahl ist, dass jede Rolle eine klare Aufgabe hat und die Akzentfarbe selten bleibt.
Farbrollen als Design Tokens
Im Code werden Rollen zu Variablen. Material Web nennt sie etwa --md-sys-color-primary und --md-sys-color-on-primary. Das Format der Design Tokens Community Group beim W3C beschreibt seit Oktober 2025 in einer ersten stabilen Fassung, wie solche Werte zwischen Werkzeugen ausgetauscht werden; ein W3C-Standard ist es nicht.
:root {
--farbe-primaer: #0078ff;
--farbe-auf-primaer: #ffffff;
--farbe-flaeche: #f6f9ff;
--farbe-text: #001c44;
}
.button { background: var(--farbe-primaer); color: var(--farbe-auf-primaer); }