HTML/Tutorials/Farbkonzept

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch:

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 passnede 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
  • 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.

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

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

Siehe auch:

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.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]


deutsch:


Grundlagen[Bearbeiten]

  • 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[Bearbeiten]

Tools[Bearbeiten]