gregorsart
April, 2026
Utility Farben als Ergänzung
- UI
- UX
- Farben
- Android
- Material Design
)
Utility Colors: Wenn Brand- und Status-Farben nicht mehr ausreichen
Wenn wir an das Farbschema einer App oder Website denken, haben wir meist zuerst die Brand-Colors (die Farben des Logos) im Kopf. Dazu gesellen sich die klassischen semantischen Farben für Rückmeldungen: Rot für "Danger", Gelb für "Warning", Blau für "Info" und Grün für "Success".
Nehmen wir als Beispiel umfangreiche Einstellungs-Menüs oder Dashboards. Unsere primären und sekundären Buttons sind bereits belegt. Auch die Statusfarben scheiden aus, da ein rotes Icon sofort "Fehler!" signalisieren würde, selbst wenn es nur eine Kategorie markieren soll.
Abhilfe schafft hier eine weitere Ebene im Design-System: Die sogenannten "Utility Farben" (oft auch als kategorische Farben bezeichnet).
Sie grenzen sich bewusst von der Brand-Color und den semantischen Farben ab. Ihre Hauptaufgabe ist es nicht, Aktionen hervorzuheben oder Statusmeldungen zu geben, sondern Inhalte visuell zu strukturieren und zu gruppieren. Welche konkreten Farben das sind, hängt stark vom bestehenden Farbklima ab – sie müssen harmonieren, aber dennoch klar unterscheidbar sein.
Figma Sketch
Angelehnt an die Android Einstellungen
)
Ein Paradebeispiel: Die Android-Einstellungen
Wer ein aktuelles Android-Smartphone besitzt (z.B.: Version 16), sollte sich einmal die Systemeinstellungen genauer ansehen. Die unzähligen Menüpunkte sind dort in etwa sieben Farb-Kategorien unterteilt. Ich habe dieses Prinzip in der oben stehenden Grafik einmal illustriert.
Obwohl hier viele verschiedene Farben im Spiel sind, wirkt das UI nicht kunterbunt. Warum? Der Farbtrick liegt in der Sättigung.
Die Farben sind bewusst entsättigt und pastellig gehalten (besonders im Dark Mode). Das vermeidet visuelle Überlastung. Es hilft dem Nutzer aber enorm, Rubriken beim Scrollen unterbewusst als zusammengehörig wahrzunehmen.
Das UX-Detail: Die Farbgruppierung geschieht sehr dezent, fast ausschließlich über den kreisförmigen Hintergrund der Icons. Das Icon selbst nutzt einen dunkleren, kräftigeren Ton aus exakt derselben Farbfamilie (Ton-in-Ton Prinzip). Das sorgt für exzellenten Kontrast und einen extrem aufgeräumten, professionellen Look.