Farben

Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300).

Primärfarbe

Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind daher von Sättigung und Kontrast abgemildert, um das Auge nicht zu überlasten. Sie sollen den eigentlichen Inhaltselementen zudem nicht die Show zu stehlen.

Akzentfarbe

Alle wichtigeren Bestandteile eines Dialogs (Call-2-Action Button), wichtige Kennzahlen, Dialoge, die der Aufmerksamkeit des Users nicht entgehen dürfen, werden mit der sehr gesättigten und hellen Akzentfarbe versehen.

Sekundärfarbe

Zu Akzent- und Sekundärfarbe nach etablierten psychologischen Farbmodellen passend, wird die Sekundärfarbe verwendet, um weniger wichtige Elemente voneinander zu separieren (z.b. die Balken in der Abbildung rechts).