Farbpaletten

Farbpaletten für mobile Apps

In einer App zeigen Farben, was antippbar ist, was aktiv ist und was geklappt hat oder schiefging. Diese 12 Farbpaletten enthalten Hintergrund, Flächen, Primärfarbe und Text für verschiedene App-Typen, mit HEX-Codes für Figma, Flutter, SwiftUI oder React Native.

Fintech: Blau und Grün

Blau für Vertrauen, Grün für Kontostände und erfolgreiche Zahlungen.

Lieferdienst-Orange

Orange lässt Bestell-Buttons und Aktionen hervorstechen.

Gesundheit und Wohlbefinden

Ruhig; für Arzttermin-, Gewohnheits- oder Tracking-Apps.

Lila Dark Mode

Sehr dunkelgrauer Hintergrund statt reinem Schwarz, mit hellem Lila als Akzent.

Social: Pink und Lila

Für soziale Netzwerke, Dating oder Content Creator.

Minimalistische Produktivität

Sehr gut lesbar; für Aufgabenmanager und Arbeitstools.

Lern-Gelb

Fröhlich und klar; für Sprach- oder Lern-Apps.

Energiegeladenes Fitness

Limette und Rot auf Dunkel; für Workouts und Statistiken.

Meditations-Lavendel

Sanft und ruhig; für Schlaf-, Meditations- oder Tagebuch-Apps.

Reisen: Türkis und Sand

Erinnert an Strand und Sonne; für Buchungen und Reiseführer.

Frisches Food-Grün

Für Lebensmittel-, Rezept- oder Ernährungs-Apps.

Premium-Shopping

Neutral und elegant; die Produktfotos stehen im Rampenlicht.

Tippe auf eine Farbe, um ihren HEX-Code zu kopieren. Das Stift-Symbol öffnet die Farbpalette im Editor, wo du sie ändern kannst.

Leg Statusfarben von Anfang an fest

Jede App braucht Farben für Fehler, Erfolg, Warnung und Info. Wähle Töne, die zu deiner Palette passen, und nutze die Fehlerfarbe für nichts anderes, etwa für Marken-Buttons. Kombiniere Farbe mit Icon oder Text, damit die Bedeutung nicht nur an der Farbe hängt.

Gestalte auch den Dark Mode

Die meisten Handys unterstützen den Dark Mode, und viele Nutzer haben ihn aktiviert. Farben einfach umzukehren reicht nicht: Nimm sehr dunkle Grautöne statt reinem Schwarz und senke die Sättigung deiner Akzente leicht, damit sie vor dem Hintergrund nicht flimmern.

Prüfe Kontrast und Tippflächen

Text braucht laut WCAG mindestens 4,5:1 Kontrast zum Hintergrund. Buttons sollten aktiv, gedrückt und deaktiviert unterschiedlich aussehen. Teste die App draußen und mit geringer Helligkeit, denn so nutzen sie viele Menschen.

Farben aus diesen Farbpaletten

RauchweißWeißLeinenOrangeKohleschwarzGebrochenes WeißTannengrünEbenholzSchneeweißPlatinPreußischblauElfenbeinBernsteinNeongelbChampagnerTiffany-Blau

Häufige Fragen

Wie viele Farben sollte eine App haben?

Üblich sind eine Primärfarbe, optional eine Sekundärfarbe, neutrale Töne für Hintergründe und Text sowie vier Statusfarben: Fehler, Erfolg, Warnung und Info.

Welche Farbe sollte der Haupt-Button einer App haben?

Die Primärfarbe deiner Marke, sofern sie sich gut vom Hintergrund abhebt. Nutze sie nur für die wichtigste Aktion auf jedem Screen.

Weitere Farbpaletten: Design

Weiter entdecken