Farben für Webseiten | Tipps für das richtige Farbkonzept

. Veröffentlicht: • Aktualisiert: 2018-12-14

Farben für Webseiten dienen in erster Linie als Blickfang. Deshalb ist es wichtig, die richtigen Farben zu finden. Sie sollten nicht nur harmonieren, sondern dich und dein Projekt unverwechselbar machen.

Farben für Webseiten

Eine Webseite ohne Farben ist einfach nur langweilig. Es fehlt das gewisse Etwas. Dabei erfüllen Farben für Webseiten unterschiedliche Zwecke. Zum einen kennzeichnen sie z. B. auf Links oder Buttons. Dadurch wird der Besucher animiert, bestimmte Aktionen auszuführen. Zum anderen sorgen sie für eine gewisse optische Gliederung, indem sie Wichtiges hervorheben.

Farben für Webseiten
Illustration: eb / ebblogs

Vor allem aber erhöhen sie den Wiedererkennungswert. Denn Farben bleiben besser im Gedächtnis als Namen.

Stichwort Branding

Ursprünglich kommt der Begriff aus der Viehzucht. Die Besitzer versahen ihre Tiere mit einem einheitlichen Brandzeichen. Heute bedeutet Branding jedoch weit mehr. Unternehmen jeglicher Größe nutzen es, um ihre Marke aufzubauen und ihr(e) Produkt(e) von anderen abzuheben.

Darüber hinaus spielt dabei nicht mehr nur ein Symbol eine Rolle, sondern auch die Farbgebung. Dementsprechend sollten sich die Farben für Webseiten auch im Logo, auf Visitenkarten etc. wiederfinden. Beispiele sind die lila Kuh bei Produkten von Milka oder Twitter als Online-Dienst. So wäre ein roter Vogel einfach ein roter Vogel. Dagegen verbindet jeder einen weißen Vogel auf hellblauem Grund (oder umgekehrt) sofort mit Twitter.

Brand-Farben

In der folgende Tabelle sind die Brand-Farben bekannter Marken den bei einer Umfrage von Statista genannten Lieblingsfarben gegenüber gestellt. Wobei die dargestellte Farbe stellvertretend für das gesamte Spektrum von hell bis dunkel steht.

Die Reihenfolge beginnt mit den am häufigsten verwendeten Farben für Webseiten mit einigen Beispiel-Unternehmen. In der letzten Zeile jeweils die Beliebtheit der Farbe in Prozent der Befragten.

Mehrfarbig: Google, Microsoft, eBay, Fedex = ./.

Tumblr, Wikipedia, Heise = 7 %

Facebook, Twitter, Signal, Telegram, WordPress, Intel, IBM, o2 = 40 %

Apple = 8 % (weiß)

YouTube, Flipboard, Pinterest, Spiegel, Avira, Vodafone, CocaCola = 19 %

Amazon, Bing, Snapchat, Yandex = 17 %

Apple, Instapaper, The Times, MySpace = 16 %

Android, Kaspersky, Feedly, WhatsApp, Spotify, luckycloud, Starbucks, ebblogs = 18 %

Yahoo, Telekom, Instagram, Viber = 6 %

Darüber hinaus sind türkis, rosé oder lila oft die bevorzugten Farben für Webseiten von Bloggerinnen. Während bei den in der Tabelle genannten Farben z. T. ein Bezug zur Firmenideologie oder zum Produkt zu erkennen ist,

  • vielfarbig = breite Produkt-Palette, Internationalität
  • Blau = alle Zielgruppen ansprechend
  • Rot = Aktualität, Aufmerksamkeit erregend
  • Schwarz / Grau / Weiß = Seriosität, Verlässlichkeit

fehlt dieser bei den darunter stehenden oft oder weist höchsten auf die Zielgruppe hin. So findest du bei Blogs für Frauen eher sanfte Farben.

Wirkung von Farben

Eine nicht zu unterschätzende Rolle spielt bei den Farben für Webseiten auch deren Wirkung. Einerseits gibt es kulturelle Unterschiede. Beispielsweise steht Weiß in der westlichen Welt für Reinheit und Freude. Dagegen verbinden es viele Asiaten mit Trauer. Andererseits lösen Farben generell bestimmte Assoziationen aus und sprechen Männern und Frauen unterschiedlich an:

+ freundlich, glücklich, optimistisch
– aufdringlich, grell
Keine Prioritäten

+ jung, fröhlich, einladend
– unseriös, aufdringlich, unruhig
Unbeliebt bei M und F

+ aktiv, dynamisch, warm, stark
– dominant, aufregend, aggressiv
Keine Prioritäten

+ traditionell, erdverbunden, zuverlässig
– altmodisch, schwer
Unbeliebt bei M und F

+ edel, kreativ, magisch, außergewöhnlich
– künstlich, unsachlich
Unbeliebt bei M, beliebt bei F

+ klar, vertrauenswürdig, professionell
– kalt, unpersönlich, langweilig
Beliebt bei M und F

+ natürlich, entspannend, ruhig, gesund

Beliebt bei M und F

+ professionell, elegant, förmlich
– trist, charakterlos
Unbeliebt bei F

+ neutral, schlicht, rein
– steril, kalt
keine Prioritäten

+ seriös, sachlich, funktional, modern
– düster
Beliebt bei M

Farbwahl

Zunächst wirst du wahrscheinlich Dunkelgrau bis Schwarz für den Text und Hellgrau bis Weiß für den (Text-) Hintergrund verwenden. Zwar verbreitet sich der dunkle Modus zunehmend, aber bei textlastigen Webseiten ist er nicht unbedingt ideal.

Anschließend wählst du „deine“ Farben aus. Jedoch solltest du es nicht zu bunt treiben. Denn das sorgt u. U. für Verwirrung und schafft Unruhe auf deiner Webseite. Selbst Unternehmen, die prinzipiell auf die mehrere Farben setzen, nutzen diese nicht alle gleichzeitig. So variieren die primären Farben für Webseiten von Google je nach Produkt – Google Docs blau, Gmail rot …

Deshalb solltest du dich bei den Farben für Webseiten im Wesentlichen auf eine (Kontrast-) Farbe beschränken. Obwohl häufig ein gewisser Trend bei der Farbwahl zu erkennen ist, gibt es jedoch keine allgemein gültige Kategorisierung wie Thema x ist immer rot, Produkt y ist immer blau. Verliere dennoch dein Produkt / deine Botschaft nicht ganz aus den Augen. Wenn du wie ich beispielsweise über Technik schreibst, wäre rosa nicht unbedingt die beste Wahl.

Außerdem hat es sich bewährt, für „Call-to-action“-Schaltflächen eine kräftige Farbe zu verwenden. Denn diese sollen ja auffallen.

Infolgedessen kannst du natürlich zunächst von deiner Lieblingsfarbe ausgehen. Oder du orientierst dich an Farben für Webseiten, die dir gefallen. Um herauszufinden, um welchen Farbwert es sich dabei handelt, gehst du z. B. im Firefox-Browser auf

+ Entwicklerwerkzeuge
++ Farbpipette und
+++ bewegst die „Lupe“ über die Farbe.

Anschließend siehst du darunter den Farb-Code / Hexadezimal-Wert (s. Abb. 1).

Primär- und Sekundärfarbe(n)

Nachdem du dich nun für deine Primärfarbe entschieden hast, brauchst du eventuell noch Farben für untergeordnete Bereiche.

Wenn eine davon ebenfalls Bestandteil deines Brandings sein wird, eignet sich eine Komplementärfarbe. Denn wenn sich die beiden Farben zu ähnlich sind, geht das zulasten der Wirkung. Gleiches gilt für unharmonische Farben. Falls die weitere(n) Farbe(n) jedoch dem Aufbau einer Hierarchie dienen soll, könntest du dich auch für Schattierungen der Hauptfarbe entscheiden.

Außerdem gibt es Einschränkungen bei der Verwendung für Textpassagen. Hierfür darf die Farbe weder zu hell / blass noch zu dunkel sein. Sonst hebt sie sich schlecht vom hellen Hintergrund bzw. vom dunklen Text ab.

Farbkombinationen

Wie bereits angedeutet, sollten Farben für Webseiten miteinander in etwa harmonieren. Nachdem du ungefähr weisst, wohin die Reise gehen soll, musst du nur noch die richtige Kombination finden.

Hierfür hast du mehrere Möglichkeiten. Entweder du besuchst eine Webseite wie den Shutterstock Blog, wo du bereits fertige Farbkombinationen findest.

Oder du rufst Encycolorpedia auf. Allerdings benötigst du dann den sechsstelligen Hexadezimal-Code deiner Ausgangsfarbe. Um diesen zu finden, gibt es im Internet zahlreiche Farbtabellen. Neben den einzelnen Farben steht jeweils der Hex-Code, manchmal auch noch der Rot-Grün-Blau-Wert.

Für reines Blau wären dies z. B.: #0000ff / R 0, G 0, B 255

Anschließend gibst du deinen Hex-Code bei Encycolorpedia ein. Daraufhin öffnet sich eine Seite, auf der du alle möglichen Kombinationen und Variationen deiner Farbe findest (s. Abb. 2 und 3).

Eigene Farbzusammenstellung

Des weiteren kannst du natürlich auch selbst ein bisschen experimentieren. Einerseits könntest du dein zukünftiges Header-Bild in ein Fotobearbeitung- oder Grafik-Programm ziehen (s. Abb. 4). Anschließend wählst du das Werkzeug

+ Farbpipette
++ klickst damit auf die gewünschte Farbfläche auf dem Foto
+++ bestätigst die Auswahl und
++++ notierst den Hex-Code.

Andererseits kannst du im Browser einen Farb-Generator wie Color Wheel von Adobe (s. Abb. 5) verwenden. Auch hier gibst du zunächst den Hex-Code deiner Ausgangsfarbe ein. Oder du wählst eine Farbe im Farbkreis aus. Danach zeigt dir der Generator

  • ähnliche – eng bei deiner Ausgangsfarbe liegende Farben,
  • monochromatische – unterschiedliche Helligkeits- und Sättigungsstufen deiner Farbe,
  • eine Triade – zwei weitere Farben, die im gleichen Abstand zueinander und zu deiner Farbe liegen,
  • komplementäre – eine oder mehrere Farben, die deiner genau gegenüber liegen,
  • zusammengesetzte – drei zusätzliche Farben im gleichen Abstand zu deiner Farbe oder
  • Schattierungen – dunklere (hellere) Abstufungen deiner Farbe.

Außerdem hast du noch die Möglichkeit, unter Benutzerdefiniert fünf in Frage kommende Farben nebeneinander anzuzeigen.

Zuletzt könntest du dich natürlich auch auf dein Gefühl verlassen, in dem du dir die passenden Farben z. B. bei Mediavent zusammensuchst.

» ABBILDUNGEN

Wichtig ist in jedem Fall, dass du die Hex-Codes notierst, denn du wirst sie anschließend auf deiner Webseite brauchen.

Fazit

Die Kombination der Farben für Webseiten sollte kein Zufallsprodukt sein. Außerdem kommt es nicht nur darauf an, dass sie dir gefallen. Vor allem sollten Farben für Webseiten

  • miteinander harmonieren,
  • (d)eine Botschaft übermitteln,
  • zum Produkt, zu den Inhalten und
  • zur Zielgruppe passen sowie
  • dich und dein Projekt einzigartig und wiedererkennbar machen.

Letztendlich liegt Schönheit natürlich im Auge des Betrachters. Das ist auch bei Farben für Webseiten so. Erstelle deshalb dein zu dir und deinem Blog passendes Gesamt-Konzept und halte weitgehend daran fest.

Sich von anderen inspirieren zu lassen, ist vollkommen okay. Aber sie zu kopieren ist aber der falsche Weg. Denn du möchtest mit deinem Auftritt im Netz ja wahrgenommen werden und nicht eine/r unter vielen Gleichen sein. Also viel Erfolg bei der Wahl deines Farbkonzepts.


Das könnte dich auch interessieren:

Schritt für Schritt zu einer sicheren Webseite


Schreibe einen Kommentar