Ein Color Scheme, deutsch Farbschema, ist die festgelegte Auswahl an Farben einer Website oder App, in der jede Farbe eine Aufgabe hat: Hauptfarbe, Nebenfarbe, Akzent, Flächen und Text. Es sorgt dafür, dass dieselbe Farbe auf allen Seiten dasselbe bedeutet. In CSS meint color-scheme etwas anderes, nämlich nur die Wahl zwischen hell und dunkel.
- Color Scheme
Die festgelegte Farbpalette einer Website, in der jede Farbe eine Rolle hat, etwa Hauptfarbe, Akzent oder Hintergrund.
Beispiel: „Unser Color Scheme legt fest, dass nur Buttons die Akzentfarbe tragen.“Auch: Farbschema.
Abgrenzung zur CSS-Eigenschaft
color-scheme: Sie teilt dem Browser mit, ob eine Seite helle oder dunkle Darstellung unterstützt, und färbt dann etwa Scrollleisten und Formularelemente passend. Die Palette selbst steuert sie nicht.
Woraus ein Color Scheme besteht
Ein gut dokumentiertes Beispiel ist Material Design. Dort baut ein Farbschema auf fünf Schlüsselfarben mit je einer Tonpalette auf. Primary färbt die wichtigsten Bedienelemente, Secondary weniger prominente, Tertiary setzt Akzente; neutrale Rollen gelten für Flächen und Hintergründe. Zu jeder Rolle gehört eine Farbe für Text, der darauf lesbar bleibt.
Ein Color Scheme anlegen
Ausgangspunkt ist meist die Markenfarbe. Dazu kommen helle und dunkle Abstufungen, wenige Neutraltöne und ein Akzent für Handlungen, abgestimmt nach den Regeln der Farbharmonie. Jede Kombination aus Text und Fläche wird gegen das Kontrastverhältnis geprüft, bevor sie ins Design System wandert.
Color Scheme und Dark Mode
Für den Dark Mode braucht das Color Scheme eine zweite Belegung derselben Rollen. Die Abfrage prefers-color-scheme schaltet zwischen beiden um:
:root {
color-scheme: light dark;
--flaeche: #ffffff;
--text: #001c44;
}
@media (prefers-color-scheme: dark) {
:root {
--flaeche: #0e1012;
--text: #f6f9ff;
}
}