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. 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. Nicht zuletzt dienen sie auch als Blickfang.
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 der feurige Fuchs beim Firefox Browser. So wäre rotbrauner Fuchs einfach nur ein Fuchs. Dagegen denkt jeder bei einem Fuchs mit einem orange-roten „Flammen-“ Schwanz direkt an Firefox von Mozilla.
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 = ./.
Facebook, IBM, Intel, O2, Signal, Telegram, Twitter, WordPress = 40 %
Avira, Coca Cola, Flipboard, Pinterest, Spiegel, Vodafone, YouTube = 19 %
Android, Feedly, Kaspersky, luckycloud, Spotify, Starbucks, WhatsApp, eb Webdesign = 18 %
Amazon, Bing, Snapchat, Yandex = 17 %
Apple, Instapaper, MySpace, The Times = 16 %
Apple (weiß) = 8 %
Heise, Tumblr, Wikipedia = 7 %
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 findest du 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
Als erstes 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.
Treib es nicht zu bunt
Das sorgt u. U. für Verwirrung und schafft Unruhe auf deiner 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 solltest du dich bei den Farben für eine Website im Wesentlichen auf eine Primär- und eine Kontrastfarbe beschränken und höchstens noch ein bis zwei Schattierungen hinzufügen. 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. Verlier dennoch dein Produkt / deine Botschaft nicht ganz aus den Augen. Wenn du wie ich beispielsweise über IT schreibst, wäre rosa nicht unbedingt die beste Wahl.
In den meisten Fällen wirst du zunächst von deiner Lieblingsfarbe ausgehen. Oder du orientierst dich an Farben für Websites, die dir gefallen, ohne das komplette Farbschema eins zu eins zu kopieren. Um herauszufinden, um welchen Farbwert es sich dabei handelt, gehst du z. B. im Firefox-Browser auf
- Entwicklerwerkzeuge
- Farbpipette
- die Lupe über die Farbe bewegen
- der Hexadezimal-Code wird sichtbar
- mit einem Klick wird der Code kopiert
Setze Farben gezielt ein
Es hat sich bewährt, für „Call-to-action“-Schaltflächen einen kräftigen Farbton zu verwenden. Denn diese sollen ja auffallen. Ebenso solltest du für Verlinkungen auf allen Seiten denselben Farbton verwenden, damit immer auf einen Blick klar ist, dass es sich um einen Link handelt.
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, kannst du dich 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 (s. u.) siehst du die Bewertung des Kontrasts (5= super, 1 = sehr schlecht) der von dir gewählten Farbe.
Farbkombinationen
Wie bereits angedeutet, sollten Farben für Webseiten in der Regel 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 Website wie den Shutterstock Blog, wo du bereits fertige Farbkombinationen findest.
› Shutterstock BlogOder du rufst z. B. Coolors auf. Dort gibst du den sechsstelligen Hex(adezimal)-Code deiner 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 hast du die Möglichkeit bis zu vier weitere hinzuzufügen. Außerdem kannst du für jede Farbe eine hellere/dunklere Schattierung wählen bzw. manuell den Farbton variieren.
Auch der Color picker vom selben Anbieter ist recht hilfreich. Dort gibst du ebenfalls den Hex-Code deiner Ausgangsfarbe ein und erhältst weitere Codes wie RGB, CMYK, LAB etc. Außerdem findest du dort Paletten mit den Dunkel- und Hell-Stufen und Variationen der Grundfarbe. Neben den Farbharmonien zeigt dir diese Webseite auch einen Farbenblindheits-Simulator. Besonders nützlich ist die Kontrast-Prüfung, mit Hilfe derer du erkennen kannst, wie gut deine gewählte Farbe auf hellem bzw. dunklem Hintergrund lesbar ist.
Notiere die Hex- und/oder RGB-Codes
Unabhängig davon, mit welcher Methode du dein Farbkonzept zusammenstellst, ist es wichtig, dass du dir die jeweiligen Codes merkst, denn du wirst sie anschließend auf deiner Website u. U. mehrfach brauchen.
Eigene Zusammenstellung
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 wie Affinity ziehen. Anschließend wählst du das Werkzeug
- Farbpipette
- auf die gewünschte Farbfläche des Fotos klicken
- Auswahl bestätigen
- Hex-Code notieren
Andererseits kannst du im Browser einen Farb-Generator wie Adobe Color 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, 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 Farbtöne nebeneinander anzuzeigen.
Zuletzt könntest du dich selbstverständlich auch auf dein Gefühl verlassen, in dem du dir die passenden Farben für Webseiten z. B. bei Mediaevent zusammensuchen.
Farben für Webseiten – Zusammenfassung
Die Kombination der Farben für Webseiten sollte kein Zufallsprodukt sein. Auch kommt es nicht NUR darauf an, dass sie dir gefallen. Achte insbesondere bei farbig gestalteten Überschriften und Texten darauf, dass sie lesbar bleiben oder dunkle die betreffende, aus deinem Farbkonzept gewählte Farbe dafür ggf. etwas ab!
Vor allem sollten Farben für Websites jedoch
- miteinander harmonieren,
- eine/deine Botschaft übermitteln,
- zum Produkt, zu den Inhalten und
- zur Zielgruppe passen sowie
- dich und dein Projekt einzigartig und wiedererkennbar machen.
Sich von anderen inspirieren zu lassen, ist vollkommen okay. Aber sie zu kopieren ist der falsche Weg. Denn du möchtest mit deinem 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. Erstelle deshalb dein zu dir und deinem Projekt passendes Gesamt-Konzept und behalte es auf der gesamten Website bei. Also viel Erfolg bei der Wahl deines Farbkonzepts.
© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.
