Grafik/Farbkonzept

Im Netz finden Sie zahllose Tools, mit denen Sie die passenden Farbkombinationen für Ihre Webseite finden können. In diesem Artikel zeigen wir Ihnen, wie Sie aufbauend auf einer Grundfarbe ein Farbkonzept entwickeln und mit Ihre Webseite mit Farbeffekten gestalten können.

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

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:

Siehe auch:

• dribble
• designspiration

Auswahl einer Farbpalette

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 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

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.

Hauptartikel: Barrierefreiheit/Farben und Kontraste

Empfehlung:
Verändern Sie die Helligkeit der Farbtöne, um den Kontrast zwischen Text und Hintergrund zu erhöhen.

Farbkreis nach Küppers mit Helligkeitsabstufungen von 20% bis 90%
SVG-Grafik

Auswahl passender Grautöne

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
• evtl. 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 ein helleres Grau verwenden.

Farbpalette mit neutralen Farben und einer Akzentfarbe

Graustufen wirken noch besser, wenn Sie sie harmonisch mit der Grundfarbe abstimmen.

Siehe auch:

• Weblinks: Farben harmonisch anpassen
• Hilfe:SELFHTML-Farbtabelle (SelfHTML hat eine viel größere Farbpalette, von denen jedoch auch nicht alle Farben genutzt werden.)

Auswahl einer Akzentfarbe

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.

Siehe auch

• HTML/Tutorials/Licht und Schatten‎
• Barrierefreiheit/Farben und Kontraste
• fertige Templates

Weblinks

• creativebloq: How to choose a colour theme
• designmodo: Color Concept for Professional Designers, Traditional Color Schemes (Übersicht, welche Farben sich wofür eignen)
• smashing magazine: A Simple Web Developer’s Guide To Color
• tutsplus: A Comprehensive Introduction to Color in Design
• Refactoring UI: Building Your Color Palette - sehr gutes Tutorial mit vielen Beispielen, das zeigt, dass man eine Farbpalette eben nicht mal mit 4 Farben aus einem Generator erzeugt!

deutsch:

• drweb: Farben auswählen und optimal einsetzen – Experten-Tipps, nicht nur fürs Webdesign (1)
• drweb: Auch das gehört zur Usability – Farben fürs Webdesign (Teil 2)
• drweb: Dr. Webs umfassende Farbenkunde: So wirkt jede Website perfekt
• drweb: Farben finden: 5 Tools für gute Farbkombinationen
• google: Material Design

Grundlagen

• Farbenlehre / Die Evolution der Farben: Farbenlehre für Fortgeschrittene. Themen unter anderem: biologische Ursachen des Farbenreichtums; was ist falsch an den Dreifarben-Theorien? Polarität von Farben; neuere Erkenntnisse über Goethes Farbenlehre.
  Autor: Reinhold Sölch
• Tutorial: Farben im Webdesign: Großes und fundiertes Tutorial zum Thema "Webseiten und Farbenlehre"
  Autor: Hartmut Rudolf
• Zwisler: Skripten zur Psychologie: Wissenschaftliche Texte, unter anderem zur Farbforschung: Farbwahrnehmung, Konzepte der Farbforschung, Photometrie, Grassmann-Struktur der Farben, Geschichte der Psychologie des Sehens nach Boring
  Autor: Rainer Zwisler

Farben harmonisch anpassen

• Creating A Cohesive Color Palette
• Erica Shoonmaker: Creating Harmonious Color Schemes

Tools

• paletton: The Color Scheme Designer
• coolors.co: The super fast color schemes generator!
• adobe.Kuler: Farbrad Farbschemata