Modul 2, Lektion 1
In Bearbeitung

Farben im Flat Design

Modul Fortschritt
0% Beendet
Typisch für das Flat Design ist eine umfangreiche Farbpalette mit vielen Abstufungen und leuchtenden Farben, wie bei diesem Design für eine Landingpage von Randompopsycle

Für die meisten Designstile gilt: Entscheide dich für nur 2-3 Hauptfarben und setze diese in der Gestaltung konsequent um. Beim Flat Design ist es anders. Da hier die Gesamtgestaltung so reduziert ist, kannst du bei den Farben in die Vollen greifen und einen ganze Palette an Farbtönen auswählen. Sechs, acht oder zehn unterschiedliche Farbtöne – alles kein Problem im Flat Design.

Helle, strahlende und kräftige Farben sind dabei eindeutig bevorzugt. Sie wirken gut vor hellem und dunklem Hintergrund, schaffen Kontrast und wirken auf den Betrachter einladend und sympathisch. Doch Vorsicht: Farbig heißt nicht schreiend bunt. Im Flat Design kombinierst du keine reinen Primärfarben miteinander. Statt reinem Rot, Blau oder Gelb verwendest du gesättigtere und gemischteren Farben.

Zusätzlich zu dieser breiten Farbpalette findest du im Flat Design viele Abstufungen in den einzelnen Farbtönen und ihrer Sättigung. Denk mal an Buttons, die beim Hover eine Stufe heller oder dunkler werden. Ob du dabei die Abstufungen mit Schwarz oder Weiß erreichst oder dich für ganz neue eigene Farbtöne in den Stufen entscheidest, bleibt dir überlassen.

Mein Tipp:
Wenn du dein eigenes Farbschema entwirfst, konzentriere dich auf einfache Kombinationen. Suche dir zunächst Farben aus, die eine ähnliche Sättigung oder Charakteristik haben und füge dann Abstufungen zu diesen Farben hinzu.

Nur eine Farbe ist langweilig? Stimmt nicht. Diese Marketing Website für Signature 365 vom norwegischen Designer Stian zeigt sehr gut, wie man mit nur einer Farbe und monochromen Abstufungen ein interessantes Design gestaltet.

Typische Merkmale für Farben im Flat Design:

  • helle, strahlende, kräftige Farben bevorzugt
  • andere Farbkombinationen (z.B. retro oder monochrom) sind ebenfalls möglich, jedoch seltener
  • es werden viele Farbtöne kombiniert – 6 bis 8 sind keine Seltenheit
  • Farbig heißt hier aber nicht bunt – kombiniere keine reinen Farben
  • nutze viele Abstufungen, um Vielfalt zu erzeugen

Beispiele:

Umfangreiche Farbpalette mit hellen, leuchtenden Farben und zwei neutralen Grautönen – jeweils mit einer Abstufung.

#fc5c65

#fd9644

#fed330

#26de81

#2bcbba

#eb3b5a

#fa8231

#f7b731

#20bf6b

#0fb9b1

#45aaf2

#4b7bec

#a55eea

#d1d8e0

#778ca3

#2d98da

#3867d6

#8854d0

#a5b1c2

#4b6584


Retro Farbpalette mit fünf Farbtönen und jeweils einer Abstufung, sodass für das Flat Design zehn Farben zur Verfügung stehen.

#002758

#00728d

#048b8f

#f2d4a9

#f63318

#011d41

#01576c

#026366

#d7bc96

#c0220c


Monochrome Farbkombinationen erzeugen ein besonders harmonisches und einheitliches Bild. Basis ist hier ein Farbton, der dann mit Weiß und/oder Schwarz immer weiter abgemischt wird.

#eedced

#e9d4e9

#d4a9d2

#be7dbc

#a952a5

#93278f

#6e1d6b

#4a1448

#250a24

#210321