Eine Farbpalette zu entwickeln heißt, aus der Markenfarbe einen festen Satz von Farben und Abstufungen abzuleiten: für Flächen, Text, Buttons, Rahmen, Hinweise und Fehler. Eine gute Palette legt außer den Farben auch fest, welche Rolle jede spielt und auf welchem Grund sie lesbar ist.
- Farbpalette entwickeln
Das Ableiten eines festen Satzes von Farben und Abstufungen aus der Markenfarbe, mit klaren Rollen und geprüftem Kontrast.
Beispiel: „Um die Farbpalette zu entwickeln, leiteten wir aus dem Markenblau elf Stufen ab und prüften jede gegen Weiß und Schwarz.“Auch: Farbsystem aufbauen, Palette erstellen.
Die Rollen der Farben beschreibt der Eintrag Farbrollen.
Tonale Paletten nach Material Design
Material Design leitet laut Android-Dokumentation aus einer Quellfarbe fünf Schlüsselfarben ab, jede mit einer tonalen Palette aus 13 Stufen von 0 für Schwarz bis 100 für Weiß. Aus diesen Stufen werden die Rollen bedient, etwa Ton 40 für Buttons im hellen und Ton 80 im dunklen Modus. Die Algorithmen sichern zwischen Flächen und ihren Beschriftungen mindestens 3 zu 1 Kontrast.
Farbpalette in OKLCH entwickeln
Stufen in OKLCH wirken über alle Farbtöne gleichmäßig hell, weil der Farbraum die Helligkeit wahrnehmungsnah rechnet. Tailwind CSS hat seine Standardpalette mit Version 4 im Januar 2025 auf OKLCH umgestellt; jede Farbe hat dort elf Stufen von 50 bis 950. Als Austauschformat für solche Paletten gibt es seit Oktober 2025 die Design Tokens der W3C Community Group.
:root {
--blau-100: oklch(94% 0.03 255);
--blau-500: oklch(58% 0.19 255);
--blau-900: oklch(28% 0.09 255);
}Den Kontrast der Palette prüfen
Jede Stufe, die Text trägt oder auf der Text steht, braucht einen geprüften Kontrast: 4,5 zu 1 für normalen Text, 3 zu 1 für große Schrift und Bedienelemente. Adobe Color zeigt dafür die Stufen, an denen eine Farbe die Schwellen 3, 4,5 und 7 erreicht. Am Ende steht eine kleine Tabelle: welche Stufe auf welchem Grund für welchen Zweck.