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

Farben für Webseiten sollten harmonieren und Sie und Ihr Projekt unverwechselbar machen. So finden Sie die passende Farbkombination.

Ellena

eb Webdesign - Farben für Webseiten

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. Außerdem dienen sie auch als Blickfang.

Inhalt

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 das Logo bei 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.

Farben erhöhen vor allem den Wiedererkennungswert
Sie bleiben besser im Gedächtnis bleiben als Zeichen. Deshalb ist z. B. nicht nur das Logo als solches von Bedeutung, sondern auch dessen (ebenfalls auf der Website sich wiederholende) Farbgebung.

Brand-Farben

In der folgende Tabelle sind die Brand-Farben › bekannter Marken den bei einer Umfrage von Statista genannten › Lieblingsfarben gegenüber gestellt. Wobei der dargestellte Farbton 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 sowie jeweils die Beliebtheit in Prozent der Befragten.

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

Heise, Tumblr, Wikipedia = 7 %

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

Apple (weiß) = 8 %

Avira, Coca Cola, Flipboard, Pinterest, Spiegel, Vodafone, YouTube = 19 %

Amazon, Bing, Snapchat, Yandex = 17 %

Apple, Instapaper, MySpace, The Times = 16 %

Android, Feedly, Kaspersky, luckycloud, Spotify, Starbucks, WhatsApp, eb Webdesign = 18 %

Instagram, Telekom, Viber, Yahoo = 6 %

Darüber hinaus werden Türkis, Rosé oder Violett oft von Bloggerinnen für ihre Website bevorzugt. 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 „sanften“ oder Pastellfarben oft oder weist höchsten auf die Zielgruppe hin. So finden Sie diese eher bei Blogs, deren Zielgruppe Frauen sind.

Farbwirkung

Eine nicht zu unterschätzende Rolle spielt bei den Farben für Websites 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:

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

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

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

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

Violett:
+ edel, kreativ, magisch
– künstlich, unsachlich
= Unbeliebt bei M, beliebt bei F

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

Grün:
+ natürlich, entspannend, ruhig, gesund

= Beliebt bei M und F

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

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

Weiß:
+ neutral, schlicht, rein
– steril, kalt
= Keine Prioritäten

Farbwahl

Zunächst werden Sie 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ählen Sie „Ihre“ Farben aus.

Treiben Sie es nicht zu bunt
Das sorgt u. U. für Verwirrung und schafft Unruhe auf Ihrer Website. Selbst Unternehmen, die prinzipiell auf mehrere Farben setzen, nutzen diese nicht alle gleichzeitig. So variieren die primären Farben für Websites von Google je nach Produkt – Google Docs blau, Gmail rot …

Weniger ist mehr

Deshalb sollten Sie sich bei den Farben für eine Website 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. Verlieren Sie dennoch Ihr Produkt / Ihre Botschaft nicht ganz aus den Augen. Wenn Sie wie ich beispielsweise über IT schreiben, wäre rosa nicht unbedingt die beste Wahl.

Setzen Sie Farben gezielt ein
Außerdem hat es sich bewährt, für „Call-to-action“-Schaltflächen einen kräftigen Farbton zu verwenden. Denn diese sollen ja auffallen.

Infolgedessen können Sie natürlich zunächst von Ihrer Lieblingsfarbe ausgehen. Oder Sie orientieren sich an Farben für Websites, die Ihnen gefallen. Um herauszufinden, um welchen Farbwert es sich dabei handelt, gehen Sie z. B. im Firefox-Browser auf

  1. Entwicklerwerkzeuge
  2. Farbpipette
  3. die Lupe über die Farbe bewegen
  4. mit einem Klick wird der Code kopiert

Anschließend sehen Sie darunter den Farb-Code / Hexadezimal-Wert.

Primär- und Sekundärfarbe(n)

Nachdem Sie sich nun für Ihre Primärfarbe entschieden haben, brauchen Sie eventuell noch Farben für untergeordnete Bereiche.

Wenn eine davon ebenfalls Bestandteil Ihres 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önnten Sie sich auch für Schattierungen der Hauptfarbe entscheiden.

Einschränkungen bei der Farbwahl für Textpassagen
Zu helle / blasse Textfarben heben sich schlecht vom hellen Hintergrund ab. Gleiches gilt für zu dunklen Text bei einem dunklen Hintergrund. Am Ende der Seite des Color pickers von Coolors sehen sie die Bewertung des Kontrasts (5= super, 1 = sehr schlecht) der von Ihnen gewählten Farbe.

Farbkombinationen

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

Hierfür haben Sie mehrere Möglichkeiten. Entweder dSie besuchen eine Website wie den Shutterstock Blog, wo Sie bereits fertige Farbkombinationen finden.

Oder Sie rufen z. B. Coolors auf. Dort geben Sie den sechsstelligen Hexadezimal-Code Ihrer Ausgangsfarbe ein. 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 haben Sie die Möglichkeit bis zu vier weitere hinzuzufügen. Außerdem können Sie für jede Farbe eine hellere/dunklere Schattierung wählen bzw. manuell den Farbton variieren.

Farben - Schattierungen
Screenshot: Coolors Generate Colors

Auch der Color picker vom selben Anbieter ist recht hilfreich. Dort geben Sie den Hex-Code Ihrer Ausgangsfarbe ein und erhalten weitere Codes wie RGB, CMYK, LAB etc. Außerdem finden Sie dort Paletten mit den Dunkel- und Hell-Stufen und Variationen der Grundfarbe. Neben den Farbharmonien zeigt Ihnen diese Webseite auch einem Farbenblindheits-Simulator. Besonders nützlich ist die Kontrast-Prüfung, mit Hilfe derer Sie erkennen können, wie gut Ihre gewählte Farbe auf hellem bzw. dunklem Hintergrund lesbar ist.

Eigene Zusammenstellung

Des weiteren können Sie natürlich auch selbst ein bisschen experimentieren. Einerseits könnten Sie dIhr zukünftiges Header-Bild in ein Fotobearbeitung- oder Grafik-Programm wie Affinity ziehen. Anschließend wählen Sie das Werkzeug

  1. Farbpipette
  2. auf die gewünschte Farbfläche des Fotos klicken
  3. Auswahl bestätigen
  4. Hex-Code notieren

Andererseits können Sie im Browser einen Farb-Generator wie Adobe Color verwenden. Auch hier geben Sie zunächst den Hex-Code Ihrer Ausgangsfarbe ein. Oder Sie wählen eine Farbe im Farbkreis aus. Danach zeigt Ihnen der Generator

  • ähnliche – eng bei deiner Ausgangsfarbe liegende Farben,
  • monochromatische – unterschiedliche Helligkeits- und Sättigungsstufen deiner Farbe,
  • eine Triade – zwei weitere, 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 haben Sie noch die Möglichkeit, unter Benutzerdefiniert fünf in Frage kommende Farbtöne nebeneinander anzuzeigen.

Farben - Adobe Colors
Screenshot: Adobe Color Wheel

Zuletzt könnten Sie sich natürlich auch auf Ihr Gefühl verlassen, in dem Sie sich die passenden Farben für Webseiten z. B. bei Mediavent zusammensuchen.

Notieren Sie die Hex- und/oder RGB-Codes
Unabhängig davon, mit welcher Methode Sie Ihr Farbkonzept zusammenstellen ist es wichtig, dass Sie sich die jeweiligen Codes merken, denn Sie werden sie anschließend auf Ihrer Website brauchen.

Zusammenfassung - Farben für Webseiten

Farben für Websites – Zusammenfassung

Die Kombination der Farben für Webseiten sollte kein Zufallsprodukt sein.Auch kommt es nicht NUR darauf an, dass sie Ihnen gefallen.

Vor allem sollten Farben für Websites

  • miteinander harmonieren,
  • eine/Ihre Botschaft übermitteln,
  • zum Produkt, zu den Inhalten und
  • zur Zielgruppe passen sowie
  • Sie und Ihr Projekt einzigartig und wiedererkennbar machen.

Sich von anderen inspirieren zu lassen, ist vollkommen okay. Aber sie zu kopieren ist aber der falsche Weg. Denn Sie möchten mit Ihrem Auftritt ja im Netz wahrgenommen werden und nicht eine/r unter vielen Gleichen, sondern unverwechselbar sein.

Fazit

Letztendlich liegt Schönheit natürlich im Auge des Betrachters. Das ist auch bei Farben für Websites so. Erstellen Sie deshalb Ihr zu Ihnen und Ihrem Projekt passendes Gesamt-Konzept und behalten Sie es auf der gesamten Website bei. Also viel Erfolg bei der Wahl Ihres Farbkonzepts.

Grafiken: eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.

Gehen Sie auf Entdeckungsreise

eb Webdesign - WP Plug-ins

WP Plug-ins | 10 empfehlenswerte Erweiterungen

Beschreibung von WP Plug-ins, die nicht nur auf jeder Website sehr nützlich, sondern auch EU-DSGVO-konform einsetzbar und schlank programmiert sind.