Grafik/Farbkonzept/Farbenlehre

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter einem Farbkonzept versteht man die Auswahl mehrerer Farben in einer Farbpalette, die

  • harmonisch zueinanderpassen,
  • einen ausreichenden Kontrast oder Tiefe bieten und
  • der Webseite eine bestimmte Atmosphäre (vibrancy) geben.

Auswahl einer Grundfarbe[Bearbeiten]

Als ersten Schritt müssen Sie aus Millionen von Farben eine Grundfarbe wählen, die den Grundton der Webseite bestimmt und Basis für alle weiteren Schritte ist. Hierbei können einige Vorüberlegungen helfen:

  • Bauen Sie auf Vorhandenem wie schon existierenden Webseiten oder bereits etablierten Logos auf, da Webprojekte meist nicht völlig neu entwickelt werden.
  • Vergleichen Sie Seiten der Mitbewerber und schließen Sie deren Farben aus, damit die Seiten nicht austauschbar scheinen.
  • Überlegen sie, welche Atmosphäre die Webseite vermitteln soll und für welches Zielpublikum sie bestimmt ist.

Anregungen finden Sie auf vielen Seiten.

Weblinks:

Auswahl einer Farbpalette[Bearbeiten]

Ausgehend von diesem Grundton können Sie nun eine Farbpalette aus mehreren harmonisch zueinander passenden Farben zusammenstellen. Es gibt dafür viele Generatoren und Tools im Netz, die ihnen passende Farben vorschlagen.

In einer monochromatischen Palette stellen Sie verschiedene Abstufungen von Sättigung und Helligkeit eines Farbtons zusammen.

Screenshot einer monochromatischen Farbpalette von adobe.kuler
Screenshot einer monochromatischen Palette von adobe.Kuler


In einem komplementären Farbschema werden drei (Triade) oder vier (Tetrade) gegenüberliegende Farben miteinander kombiniert.

Screenshot einer komplementären Palette von coolors.co
Screenshot einer komplementären Palette von Coolors.co


So spektakulär die Ergebnisse dieser Generatoren aussehen, bieten sie oft jedoch zu viele Farben für eine Verwendung in Ihrer Webseite. Gerade eine Verwendung von Komplementärfarben für Text- und Hintergrundfarbe ergibt oft einen zu geringen Kontrast.

Empfehlung: Verändern Sie die Helligkeit der Farbtöne, um den Kontrast zwischen Text und Hintergrund zu erhöhen.
Farbkreis nach Küppers
Farbkreis nach Küppers mit Helligkeitsabstufungen von 20% bis 90%
SVG-Grafik

Auswahl passender Grautöne[Bearbeiten]

Aus diesem Grund ist die Umsetzung eines komplementären Farbschemas im Webdesign oft nicht praktikabel.

Deshalb sollten Sie neben den Farben der Farbpalette auch zwei oder drei neutrale Farben verwenden:

  • weiß
  • dunkelgrau oder schwarz
  • eventuell noch einen hellgrauen Zwischenton

Diese ergänzen zwei Farben:

  • unsere Grundfarbe
  • eine Akzentfarbe für Buttons, mit denen Sie Interaktion signalisieren.

Ein direkter Gegensatz von schwarzer Schrift auf weißem Hintergrund wirkt oft zu schroff, sodass für Text oft ein dunkles Grau verwendet wird. Um wichtige Inhalte vom Hintergrund abzusetzen, können Sie dort zum Beispiel ein helleres Grau verwenden.

Frabpalette mit neutralen Farben und eine Akzentfarbe
Farbpalette mit neutralen Farben und einer Akzentfarbe

Graustufen wirken noch besser, wenn Sie sie harmonisch auf die Grundfarbe abstimmen.

Weblinks:

Auswahl einer Akzentfarbe[Bearbeiten]

Für UI-Elemente wie Call-To-Action-Buttons benötigen Sie noch eine Akzentfarbe. Sie sollte sich deutlich von der Grundfarbe und den Grautönen abheben, damit Buttons schnell erkennbar sind.

Im nächsten Kapitel zeigen wir Ihnen Beispiele, wie so eine Farbpalette aussehen könnte.