Die Wirkung von Farben im Webdesign – so findest du die passende Farbkombination

Die Wirkung von Farben im Webdesign

Jede Farbe hat ihre ganz eigene charakteristische Wirkung auf den Menschen. Farben können Aufmerksamkeit erregen und unbewusst Emotionen und Assoziationen beim Betrachter auslösen. Studien haben außerdem erwiesen, dass Menschen innerhalb von 90 Sekunden entscheiden, ob sie ein Produkt mögen, und dass 90 % dieser Entscheidung allein auf der Farbe basiert. Die Forschung hat auch gezeigt, dass Farben den Wiedererkennungswert einer Marke um bis zu 80 % steigern können.

Die Botschaften hinter den Farben

Rot und seine Wirkung (Primärfarbe)

Rot wird im Allgemeinen mit Liebe, Feuer und Wärme assoziiert, aber auch mit negativen Dingen wie Warnung, Achtung, Krieg, Aggressionen, Gewalt und Wut.

Wann du Rot verwenden kannst

Rot ist eine Signalfarbe und damit ein echter Hingucker. Weil Rot so eine kraftvolle und intensive Farbe ist, solltest du diese nur als Akzentfarbe bei Elementen einsetzen, die die Aufmerksamkeit des Betrachters erhalten sollen.

Wann du rote Farben vermeiden solltest

Zu viel Rot kann schnell aggressiv wirken. Deswegen solltest du Rot wirklich nur äußerst sparsam einsetzen.

Rot eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Notfalldienste
  • Lebensmittel
  • Kosmetik
  • Sport
  • Medien
  • Dating
  • Marketing/Werbung

Bekannte Unternehmen, die überwiegend Rot einsetzen

  • Coca Cola
  • YouTube
  • Canon
  • Toyota
  • BBC

Gelb und seine Wirkung (Primärfarbe)

Gelb gilt allgemein als fröhliche Farbe und vermittelt Glück, Optimismus, Jugend, Inspiration, Intelligenz, Sommer, Sonne und Fröhlichkeit. Negative Assoziationen mit Gelb sind Gift, Feigheit, Neid und Egoismus.

Verwendung von Gelb

Gelb kann benutzt werden, um Glücksgefühle beim Betrachter auszulösen und die Stimmung zu verbessern. Generell wirkt Gelb sehr freundlich. Als eine der leuchtendsten und hellsten Farben eignet sich Gelb zudem hervorragend, um die Aufmerksamkeit des Nutzers auf bestimmte Bereiche der Website zu lenken.

Wann ist Gelb zu vermeiden

Gelb sollte nicht als Textfarbe eingesetzt werden, da der Kontrast hier oftmals sehr schlecht ist. Auch auf großen Flächen sollte nicht zu viel Gelb verwendet werden, da die Farbe schnell überfordern und die Augen anstrengen kann. Zu viel Gelb oder die falsche Nuance können außerdem billig oder aufdringlich wirken.

Gelb eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Kinder
  • Agenturen
  • Energie

Unternehmen, die überwiegend Gelb auftreten:

  • DHL
  • IKEA
  • Mc Donald’s
  • Hertz
  • Nikon

Orange und seine Wirkung (Sekundärfarbe)

Orange gilt als energiegeladen, kräftig, stimmungsaufhellend und belebend. Sie wird außerdem mit Ausgelassenheit, Neugier, Wärme, Begeisterung, Glück, Spaß, Ehrgeiz und Enthusiasmus assoziiert.

Orange wird aber auch als Warnzeichen innerhalb des Straßenverkehrs und für gut sichtbare Kleidung verwendet.

Verwendung von Orange

Orange zieht ebenso wie Rot viel Aufmerksamkeit auf sich, ohne jedoch genauso aufdringlich zu wirken. Die Farbe eignet sich also sehr gut um Buttons, Angebote und Rabatte oder Links auf Webseiten optisch hervorzuheben.

Es ist gut geeignet für den Onlinehandel, für die Fahrzeugindustrie, Technologie, Entertainment, Nahrungsmittel und Kinderpflege.

Wann ist Orange zu vermeiden

Auch wenn Orange weniger intensiv als Rot ist, kann zu viel Orange aufdringlich und überwältigend wirken. Deswegen sollte die Farbe nur sparsam zum Einsatz kommen. Orange kann zudem billig wirken.

Gelb eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Fahrzeugindustrie
  • Verkehr
  • Technologie
  • Nahrungsmittel
  • Entertainment
  • Onlinehandel
  • Unterhaltung
  • Bildung
  • Gastronomie

Unternehmen, die überwiegend Orange auftreten:

  • Amazon
  • ING Diba
  • Continental
  • JBL
  • Fanta

Grün und seine Wirkung (Sekundärfarbe)

Grün wirkt harmonisierend und ausbalancierend. Die Farbe wird vor allem mit Pflanzen und Natur assoziiert und steht daher für das Leben und Wachstum. Weitere positive Assoziationen sind Gesundheit, Hoffnung, Harmonie, Frieden, Fruchtbarkeit, Ruhe und Wohlstand.

Verwendung von Grün

Von allen Farben kann Grün vom Auge am leichtesten verarbeitet werden. Daher kann die Farbe benutzt werden, um einen entspannenden, beruhigenden Effekt zu erzielen. Es eignet sich insbesondere für Webseiten, auf denen es um nachhaltige Themen, Ökologie, Natur und Umwelt geht.

Wann ist Grün zu vermeiden

Grün ist weniger gut geeignet für Luxusgüter, Technik oder Inhalte, die sich an weibliche Teenager richten.

Blau eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Ökologie
  • Nachhaltigkeit
  • Tourismus
  • Naturwissenschaften

Bekannte Unternehmen, die überwiegend Grün einsetzen

  • Starbucks
  • Spotify
  • XBOX
  • Heineken

Blau und seine Wirkung (Primärfarbe)

Blau ist die meist genannnte Lieblingsfarbe der Deutschen. Da sie als nüchtern, zurückhaltend, sachlich und vertrauensvoll gilt, wird sie vor allem im Business-Bereich häufig eingesetzt. In der Psychologie assoziiert man Blau vor allem mit Männlichkeit, Kompetenz, Ruhe, Zuverlässigkeit, Loyalität, Produktivität, Vertrauen und Sicherheit.

Während bei anderen Farben die Wirkung stark von der jeweiligen Nuance abhängt, behält Blau auch in unterschiedliche Abstufungen seinen Charakter bei.

Verwendung von Blau

Blau eignet sich vor allem für Webseiten, die Vertrauen, Seriösität und Sicherheit ausstrahlen sollen. Deswegen wird die Farbe beispielsweise häufig von Banken oder auch in der Medizin eingesetzt.

Wann ist Blau zu vermeiden

Blau kann gefühllos und kalt wirken. Vor allem in Kombination mit Nahrungsmitteln ist Blau eher ungeeignet, da es dafür bekannt ist, den Appetit zu zügeln.

Blau eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Banken und Finanzen
  • Medizin
  • High-Tech
  • Rechtswissenschaften
  • Immobilien
  • Gesundheitswesen
  • Beratung und Consulting

Bekannte Unternehmen, die überwiegend Blau einsetzen

  • Facebook
  • LinkedIn
  • Volkswagen
  • Twitter
  • BMW
  • Visa
  • Intel
  • SAP
  • Vimeo

Lila und seine Wirkung (Sekundärfarbe)

Lila gilt als kreativ, fantasievoll, erhaben und würdevoll. Die Farbe wird häufig mit religiösen, spirituellen und magischen Themen assoziiert.

Lila wird außerdem nicht selten mit Adel verbunden. Sie ist die Farbe der Könige und Kaiser, was wohl zum prestigeträchtigen und luxuriösen Charakter beiträgt. Sie steht außerdem für Geheimnis, Raffinesse, Autorität, Weisheit und Wohlstand. In der Frauenbewegung steht sie als Farbe für Emanzipation.

Verwendung von Lila

Vor allem dunkle Lila-Töne eignen sich sehr gut, um ein Gefühl von Luxus und Wohlstand zu erzeugen. Vor allem im Beauty-Bereich, bei spirituellen Themen und bei Inhalten für feminine Nutzer kann Lila eine gute Wahl sein.

Verwendet dunkle Lila-Töne, um ein Gefühl von Luxus und Wohlstand zu erzeugen, und helles Lila für einen Hauch von Frühling und Romantik. Lila eignet sich großartig für Beauty-Produkte (speziell Anti-Aging-Produkte), Astrologie, Massage, Yoga, Heilung, Spiritualität und Inhalte für weibliche Teenager und feminine Marken.

Wann ist Lila zu vermeiden

Lila kann beruhigend und ermüdend wirken. Die Farbe ist daher eher ungeeignet, um die Aufmerksamkeit des Nutzers zu erregen.

Lila eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Beauty
  • Astrologie
  • Massage
  • Yoga
  • Spiritualität
  • Feminine Marken
  • Esoterik
  • Körper, Geist und Seele

Bekannte Unternehmen, die überwiegend Lila einsetzen

  • Benq
  • Milka
  • Yahoo!
  • Twitch

Braun und seine Wirkung

Braun wird vor allem mit Holz und Erde assoziiert und steht daher für Bodenständigkeit, Tradition, Zuverlässigkeit, Heimat, Stabilität, Geborgenheit, Schutz und Natur.

Die negativen Eigenschaften sind altmodisch, konservativ, altbacken und dreckig.

Verwendung von Braun

Braun eignet sich sehr gut, wenn man eine traditionelle und heimelige Atmosphäre schaffen möchte. Die Farbe ist warm und freundlich und kann auf Webseiten eingesetzt werden, die das Altmodische und Etablierte repräsentieren möchten. Ein heller Braunton eignet sich auch ideal als Hintergrundfarbe um eine behagliche Atmosphäre zu schaffen. In Kombination mit Grün wird der biologische und natürliche Charakter noch stärker unterstrichen. Zudem eignet sich Braun, um den Appetit anzuregen. So findet man die Farbe häufig in der Werbung für bestimmte Lebensmittel wie Kaffee und Schokolade.

Wann ist Braun zu vermeiden

Braun kann schnell langweilig und konservativ wirken. Es erregt wenig Aufmerksamkeit und ist daher für Handlungsaufrufe ungeeignet.

Braun eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Umwelt und Ökologie
  • Lebensmittel
  • Natur
  • Holz
  • Tiere
  • Gastronomie

Schwarz und seine Wirkung (Neutrale Farbe)

Schwarz absorbiert alle Farben. Es ist also die völlige Abwesenheit von Licht. Gleichzeitig bietet Schwarz den maximalen Kontrast mit anderen Farbtönen.

Kaum eine andere Farbe hat einen so gegensätzlichen Charakter wie Schwarz. Zum einen wird Schwarz mit Eleganz, Autorität, Macht, Stabilität, Formalität und Kraft assoziiert, zum anderen verkörpert die Farbe Bedrohung, Mysterium, Bösen, Angst, Einsamkeit und Tod. Es kann seriös, traditionell, modern und dominant wirken, aber auch düster, deprimierend und hemmend.

Verwendung von Schwarz

Aufgrund des starken Kontrasts eignet sich Schwarz hervorragend als Schriftfarbe. Schwarz kann auch auf Webseiten eingesetzt werden, die traditionell, formal, luxuriös und elegant wirken sollen.

Wann ist Schwarz zu vermeiden

Zu viel Schwarz kann bedrohlich oder langweilig wirken. Schwarz sollte daher bestenfalls mit einem bunten Farbton kombiniert werden.

Schwarz eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Luxusartikel
  • Mode
  • Marketing
  • Kosmetik

Bekannte Unternehmen, die überwiegend Schwarz einsetzen

  • Sony
  • Gucci
  • Adidas
  • Nike

Weiß und seine Wirkung

Weiß ist die Summe aller Farben. Wenn alle Farben des RGB-Spektrums in voller Kraft leuchten, erhält man Weiß.

Weiß hat von allen Farben die geringste emotionale Wirkung. Sie wirkt neutral, rein, unschuldig, sauber, freundlich und aufrichtig, aber auch langweilig, unnahbar, steril, kalt und gleichgültig.

Verwendung von Weiß

Die Farbe weiß befindet sich so gut wie auf jeder Website. In Kombination mit einer dunklen Schriftfarbe bietet Weiß als Hintergrundfarbe einen optimalen Kontrast. Weiß sollte auf Webseiten benutzt werden, um “Whitespace” zu schaffen. Das wirkt aufgeräumter und bietet dem Nutzer Ruhepunkte beim Lesen und Betrachten von Inhalten.

Weiß erinnert an Ärzte, Krankenschwester und Zahnärzte und ist deshalb goldrichtig für Websites der Gesundheitsindustrie. Auch für Hightech- oder Wissenschaftsseiten eigene es sich sehr gut. In Kombination mit Schwarz, Gold, Silber oder Grau ist Weiß gerne gesehen im Bereich der Luxusartikel.

Wann ist Weiß zu vermeiden

Weiß kann bei Webseiten immer verwendet werden, da die Farbe ohnehin stets mit anderen Farben kombiniert wird.

Weiß eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Medizin
  • High-Tech
  • Wissenschaft
  • Luxusartikel (vor allem in Kombination mit Schwarz, Gold, Silber oder Grau)

Grau und seine Wirkung (Neutrale Farbe)

Die positiven Eigenschaften von Grau sind elegant, zeitlos, professionell, förmlich, dezent, edel, unauffällig, bescheiden und schlicht. Als negative Eigenschaften assoziiert man häufig langweilig, zurückhaltend, emotionslos, konservativ, trist und unpersönlich.

Verwendung von Grau

Genauso wie Schwarz und Weiß kann Grau benutzt werden um andere Farbtöne in ihrer Wirkkraft zu unterstützen. Aufgrund des förmlichen, neutralen, ernsten und emotionslosen Charakters findet man Grau häufig im Business-Bereich wieder. Helles Grau eignet sich auf Webseiten vor allem als neutrale Hintergrundfarbe.

Wann ist Grau zu vermeiden

Grau sollte auf jeden Fall mit bunten Farben kombiniert werden, um nicht langweilig, distanziert oder sogar kalt zu wirken. Grau ist nicht geeignet, um die Aufmerksamkeit des Nutzers zu erregen.

Pink und seine Wirkung

Pink repräsentiert vor allem Raffinesse, Aufrichtigkeit, Romantik und Liebe. In Kombination mit Schwarz kann Pink aber auch modern, mutig und selbstbewusst wirken.

Verwendung von Pink

Pink eignet sich insbesondere für feminine Produkte und richtet sich vermehrt an Frauen und junge Mädchen. Da Pink mit Rot verwandt ist, kann die Farbe ebenfalls sehr gut eingesetzt werden, um die Aufmerksamkeit des Nutzers auf bestimmte Bereiche der Webseite zu lenken. Im Gegensatz zu Rot wirkt Pink außerdem beruhigender und sanfter.

Wann ist Pink zu vermeiden

Zu viel oder zu leuchtende Pink-Töne wirken schnell schrill, kindlich oder niedlich. Besonders auf Webseiten, die Seriosität und Professionalität vermitteln möchten, sollte Pink nur sparsam eingesetzt werden.

Pink eignet sich insbesondere für folgende Branchen und Themenbereiche:

  • Beauty
  • Mode
  • Spielzeug
  • Wellness

Bekannte Unternehmen, die überwiegend Pink einsetzen

  • Barbie
  • Cosmopolitan

Farben im Webdesign gezielt einsetzen

Die Wirkung der Farben auf den Betrachter kann im Webdesign hervorragend dafür genutzt werden, um die Aufmerksamkeit des Nutzers auf bestimmte Bereiche der Website zu lenken. So werden sogenannte Call-to-Action Buttons häufig farblich besonders hervorgehoben, um den Nutzer zum Klicken zu animieren oder durch das eigene Angebot zu führen. Die optische Hervorhebung kann durchaus also auch das Handeln der User beeinflussen und so nachweislich zu mehr Conversions führen.

Viele Webdesigner machen den Fehler, viel zu viele verschiedene Farben gleichzeitig zu nutzen. Doch zu viele unterschiedliche Farben wirken eher unruhig und lenken unnötig vom Wesentlichen ab. Denn ähnlich wie bei Schriftarten gilt das Motto “weniger ist mehr”.

Zwei Grundfarben, an denen sich dein gesamtes Webdesign orientiert, sind mehr als ausreichend. Jede weitere Farbe sollte nur sehr gezielt eingesetzt werden. Zum Beispiel wie bereits erwähnt bei Call-to-Action Buttons.

Das passende Farbschema finden

Allein mit dem RGB-Modell lassen sich über 6,7 Millionen Farbtöne darstellen. Das ist ganz schön viel. Es gibt jedoch verschiedene Ansätze, um das optimale Farbschema für deine Website zu finden.

Komplementäres Farbschema

Das wohl bekannteste Farbschema stellen die sogenannten Komplementärfarben dar. Hierbei werden Farbgegensätze gezielt miteinander kombiniert, da diese zusammen häufig harmonisch und stimmig wirken. Rot ist beispielsweise die Komplementärfarbe von Grün, genauso wie Grün die Komplementärfarbe von Rot ist. Lila ist die Komplementärfarbe von Gelb, genauso wie auch umgekehrt.

Im Farbkreis liegen sich Komplementärfarben immer gegenüber, weswegen sie einen besonders starken Kontrast erzeugen.

Triadisches Farbschema

Das triadische Farbschema ist vor allem dann hilfreich, wenn man eine Website mit drei Farben erstellen möchte oder ein mehrfarbiges Logo verwendet. Hierbei wird ausgehend von der Grundfarbe mithilfe eines gleichseitigen Dreiecks ermittelt, welche Farben sich für eine Kombination am besten eignen.

Analoges Farbschema

Beim analogen Farbschema werden sich ähnliche Farben miteinander kombiniert. Diese befinden sich auf dem Farbkreis direkt nebeneinander. Bei der Auswahl der passenden Kombination sollte man sich auf maximal drei Farben beschränken, da zu viele Farben unruhig wirken und ablenken können.

Monochromes Farbschema

Das monochrome Farbschema besteht gewissermaßen aus einer einzigen Farbe, die dann jedoch in unterschiedlichen Schattierungen oder Nuancierungen in Bezug auf Sättigung und Helligkeit auftritt. Die Farbe wird dabei mit Weiß beziehungsweise Schwarz heller gemacht oder abgedunkelt.

Tools um die passende Farbkombination zu finden

Es gibt online einige nützliche Tools, die dir dabei helfen können, die passende Farbkombination für deine Website zu finden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Enquire now

Give us a call or fill in the form below and we will contact you. We endeavor to answer all inquiries within 24 hours on business days.