Farbenkunde: So wirken die Farben auf der Website perfekt

Daher bringen wir dir heute die gängige Farbenlehre näher. Wir erklären Farben und ihre Wirkung auf die menschliche Psyche und geben dir Tools für optimale Farbgebungen an die Hand. Den Abschluss bilden Beispiele von in diesem Sinne optimal gestalteten Webseiten.

Teil 1: Die Farb-Psychologie

Die Psychologie der Farben ist auch für eine Webseite enorm wichtig. Mit den falschen Farben versehen, kann es sehr schnell sein, dass nicht der gewünschte Effekt – etwa die Konversion vom Betrachter zum Käufer – erreicht wird. Schaue dir folgendes Beispiel einmal an:

Du stellst dabei fest, dass die unterschiedliche Farbgebung auch unterschiedliche Emotionen in der Wahrnehmung auslöst. Farbwahrnehmung ist subjektiv, daher kann in der Farbgebung einer Webseite auch nicht jedes einzelne Individuum berücksichtigt werden, sondern nur eine bestimmte Gruppe von Menschen aka Zielgruppe. Als erstes steht also die genaue Suche und Definition der Zielgruppe an. Denn nur wenn man weiß, wen man erreichen möchte, wächst die Chance, dies auch letztendlich zu tun.

Im Anschluss bedient man sich dann der Instrumente der klassischen Farbenlehre und der Psychologie der Farben. Besonders bei globalen Marken, Produkten und Unternehmen ist es wichtig, die gängigen Kriterien zu beachten.

Einige kurze Beispiele:

• Waschmittel sollen Reinheit vermitteln, daher wird meist reines Weiß für die Farbgebung des Pulvers verwendet.
• Produkte für den Valentinstag sind überwiegend Rot – Rot ist die Farbe der Liebe.
• Versicherungen kommen meist in Blau daher – Blau vermittelt Vertrauen.

Zielgruppe feststellen und grundsätzliche Überlegungen

Ein optimales Farbschema für eine Webseite kann also erst gewählt werden, wenn man seine Zielgruppe genau kennt. Eine eingehende Recherche besonders in den sozialen Netzwerken zu den relevanten Hashtags kann schnell zu fruchtbaren Ergebnissen führen. Sobald du deine Zielgruppe kennst, solltest du dir einige kurze Fragen beantworten, um wirklich optimale Ergebnisse zu erzielen und um Unternehmen wie auch Produkte optimal im Internet zu präsentieren.

Die Fragen könnten zum Beispiel wie folgt lauten:

• Was genau ist mein Produkt oder meine Dienstleistung und wofür steht es/sie?
• Welche Botschaft möchte ich vermitteln?
• Was genau möchte ich erreichen? (z.B. Leads, Direktkäufe, Aufmerksamkeit)
• Auf welchem Markt ist das Produkt oder die Dienstleistung bereits vertreten?
• Müssen Logo und Broschüren eventuell auch angepasst werden?

Teil 2: Die Farben und ihre Bedeutung

Rot

Rot ist die wirkungsvollste Farbe für den Organismus des Menschen. In der Natur heißt es bei dieser Farbe meistens “Achtung, Gefahr”. Wenn du “Rot siehst”, steigert sich die Puls-Frequenz, die Blutgefäße erweitern sich und der Körper wird in Alarmbereitschaft versetzt. Rot verleiht Flügel und lässt uns schneller laufen – allerdings auch davonlaufen. Die Farbe ist sehr aufmerksamkeitsstark. Sie fordert uns auf, hinzusehen und festzustellen, was eigentlich los ist. Aus diesem Grund wird Rot gerne auf Plakaten verwendet. Selbst das “älteste Gewerbe der Welt” wirbt mit dieser Farbe und das nicht ohne Grund. Experimente mit anderen Farben haben womöglich nicht denselben Effekt erreicht 😉
Gebrochenem Rot oder leichten Rosa-Tönen wird auch der Effekt nachgesagt, Depressionen zu verhindern und zu lindern, denn sie stimmen tendenziell fröhlich.

Bekannte Marken mit dieser Farbgebung: Coca Cola, Kentucky Fried Chicken, Nintendo

Blau

Blau ist eine tendenziell ruhig stimmende Farbe und vermittelt Vertrauen. Blau ist in der Natur bereits als beruhigend angelegt, als Signal, dass alles in Ordnung ist. Diesen Effekt kannst du ganz deutlich spüren, wenn du auf das blaue Meer schaust. Oder wenn du dich in das Gras gelegt und in den blauen Himmel geblickt hast. Du kannst förmlich spüren, dass dein Blutdruck sinkt und sich deine Pulsfrequenz verringert. Der Organismus schaltet unter dem Eindruck von Blau vollkommen auf “Ruhe”. Ein helles Blau wird gerne für Lebensmittel genutzt, die gekühlt werden müssen oder Frische und Reinheit vermitteln sollen.

Bekannte Marken mit dieser Farbgebung: Deutsche Bank, Allianz, American Express, Nivea, Oral-B, Nestle

Gelb

Gelb steht für die Sonne, das Licht und die Wärme. In der richtigen Farbnuance steht die Farbe ebenso für Lebendigkeit, Freude, Optimismus, Vergnügen, Dynamik und Energie. Ein positives Empfinden stellt sich jedoch nur in warmen Farbtönen ein, da die Farbe ebenfalls wie Rot ein Signalwirkung hat, die aufputschend wirken kann. Ein gutes Beispiel für die Signalwirkung ist die gelbe Karte beim Fußball oder die Kennzeichnung von Gefahrgütern. Gelb wird international als Warnfarbe verwendet und kann je nach Farbnuance verschiedene Assoziationen hervorrufen – im positiven wie im negativen Sinne. Ein sonniger Farbton kann die Stimmung erhellen und hat eine sehr positive Wirkung.

Bekannte Marken mit dieser Farbgebung: IKEA, Nikon, Shell, Schweppes

Grün

Grün wirkt tendentiell beruhigend, allerdings nicht in dem gleichen Maße wie Blau. Grün wirkt auch jugendlich, natürlich, frisch, leicht und ist die Farbe der Hoffnung. Sie wird gern genutzt für ökologische Themen wie Naturschutz, Tierschutz und auch für ökologische Produkte, was logisch erscheint, da die Natur nun einmal vorwiegend in Grün erstrahlt. Durch die harmonische Ausstrahlung wird Grün gern für gesunde Bio- oder Naturprodukte verwendet, oder für Produkte, die mit dem grünen Daumen in Verbindung gebracht werden, wie zum Beispiel Gartenprodukte. Grün steht insbesondere für Natur, Wachstum und Umwelt.

Bekannte Marken mit dieser Farbgebung: Starbucks, Tropicana, Land Rover

Grau

Eine klare, sachliche und Kompetenz vermittelnde Farbe wie diese, wirkt nur, wenn sie richtig eingesetzt wird. Technische Unternehmen verwenden diese Farbe gerne. Auch für technische Produkte, wie Autos, wird Grau gerne gewählt. Ein metallisches Grau – eher Silber – ist eine der beliebtesten Farben in der KFZ-Welt und kann ein Fahrzeug aufwerten. Durch den geringeren Kontrast im Vergleich zu Schwarz, wird es gerne als Schriftfarbe für Webseiten eingesetzt. Dadurch kann das Schriftbild leserlicher und harmonischer wirken.

Bekannte Marken mit dieser Farbgebung: Apple, Mercedes-Benz, Wikipedia

Schwarz

Schwarz ist die Farbe des Todes, der Trauer, des Verlusts, der Einsamkeit, aber auch die Farbe der Stärke, der Seriosität, des Status, der Eleganz und der Funktionalität. Schwarz wird gern für Kraftfahrzeuge genutzt, da diese durch die schwarze Farbgebung sehr edel und luxuriös wirken. In Kombination mit anderen Farbgebungen entstehen Assoziationen zu den Begriffen “geheimnisvoll” oder “Sportlichkeit”. Korrekt eingesetzt, wirkt Schwarz bei bestimmten Produkten teuer und sehr edel, als Beispiel können die edlen Füllfederhalter von Montblanc dienen.

Bekannte Marken mit dieser Farbgebung: Nike, Puma, Montblanc

Weiß

Unschuldige Reinheit, Frieden und Vollkommenheit suggeriert diese Farbe, die eigentlich gar keine ist. Absolute Unendlichkeit symbolisiert Weiß ebenfalls. Gerne wird diese Farbe für Sauberkeit und Hygiene vermittelnde Produkte gewählt. Waschmittel, Salz und Zucker sind weiß, aber auch frische Lebensmittel wie Milch und Milchprodukte. Vergessen wir nicht, dass Weiß auch die Farbe der Hochzeit und der Verbundenheit ist. Christus ist der Lehre nach in einem weißen Kleid auferstanden und im Buddhismus gilt Weiß ebenfalls als Farbe der Auferstehung.

Farben: Wahrnehmung, Assoziation, Psychoenergetik (sehr umfangreiches PDF)

Teil 3: Die Farbe in fremden Kulturkreisen

Bei der Wahl eines Farbschemas muss auch die Wirkung in anderen Kulturkreisen berücksichtigt werden, zumindest, wenn man eine Webseite plant, die sich an ein internationales Publikum richtet. Nicht überall erzielen Farben die gleiche Wirkung, manchmal können sie zu unerwünschten Nebenwirkungen führen. Daher hier ein kurzer Überblick, wie die wichtigsten Farben in anderen Kulturkreisen wirken.

Rot

Rot ist die Hochzeitsfarbe in China. Die Braut wird in einem roten Brautkleid und in einer roten Sänfte zum Ort der Trauung befördert. Diese Farbe steht in China auch für Glück. In Russland hingegen steht die Farbe für teuer und wertvoll.

Grün

Grün steht in allen Kulturkreisen für Hoffnung. In muslimisch geprägten Ländern hingegen ist Grün die Farbe der Religion und wird nur im religiösen Kontext verwendet.

Blau

Blau war einst die Farbe der Könige. Nur ein König durfte die Farbe tragen. Blau symbolisiert in China die Mächte des Himmels und der Unsterblichkeit. In Indien hingegen ist es die Farbe der Gottheiten und der Erleuchtung. In orientalischen Ländern streicht man Türen und Fenster blau, um die guten Gottheiten auf sich aufmerksam zu machen.

Gelb

Gelb ist die Farbe der (meisten) Religionen. In Ägypten, in Russland, im Orient und in einigen Ländern des Balkans ist Gelb die Hochzeitsfarbe.

Orange

In den Niederlanden gilt sie als Farbe der Freiheit, während sie im Buddhismus die Farbe der Erleuchtung darstellt. In Irland repräsentiert Orange den Protestantismus.

Weiß

In den meisten Religionen der Welt ist Weiß ein Symbol für die Heimat des Lichts. In asiatischen Kulturen hingegen symbolisiert Weiß das Alter, den Herbst, den Westen und die Hinterlist. In cremigem Ton ist Weiß dort die Farbe der Trauer und des Todes. Bei asiatischen Beerdigungen werden weiße Kleider und Fahnen getragen.

Die Symbolik der Farben

Teil 4: Wege zur Auswahl eines effektiven Farbschemas einer Website

Triadisches Farbschema

Ein triadisches Farbschema besteht aus 3 Farben von unterschiedlichen Enden des Farbspektrums. Es ist eine sehr einfache Möglichkeit, ein Farbschema zu erstellen: Nimm dir ein Farbrad und wähle eine Grundfarbe. Zeichne nun ein gleichseitiges Dreieck von diesem Punkt. Die drei Punkte des Dreiecks werden dein Triadisches Farbschema bilden.

Die Verwendung eines gleichseitigen Dreiecks stellt sicher, dass die Farben die gleiche Lebendigkeit haben und sich gegenseitig gut ergänzen.

Komplementäres Farbschema

Das komplementäre Farbschema basiert auf den Farben aus entgegengesetzten Enden des Farbspektrums. Zwei Farben werden vom entgegengesetzten Ende der Skala gewählt, der Designer profitiert von mehr Freiheit im Designprozess und das spätere Layout von der Nutzung der Komplementärfarben.

Analoges Farbschema

Ein analoges Farbschema basiert auf einer sorgfältigen Auswahl der Farben im gleichen Bereich des Farbspektrums. Gewöhnlich sind die Farben durch ihre Ausstrahlung und deren Kontrast im Vergleich zueinander unterscheidbar.

Zwei Beispiele für ein analoges Farbschema sind: Schattierungen von Gelb und Orange und eine monochromatische Selektion (Schattierungen von einer Grundfarbe).

An Introduction to Color Theory for Web Designers

Teil 5: Tools zur Auswahl der richtigen Farbschemata

Einige wirklich nützliche Tools zur richtigen Farbwahl, beziehungsweise des richtigen Farbschemas einer Website, stelle ich dir folgend vor. Diese Tools unterstützen dich sowohl bei der Wahl von perfekt zusammenpassenden Farben, als auch bei dem Extrahieren von Farbschemen aus bestehenden Webseiten, die dir gefallen.

Adobe Color CC

Adobe Color CC ist vormals unter dem Namen Kuler bekannt geworden. Mit diesem Tool erstellst du sehr leicht deine eigene Farbpalette oder wählst unter den zahlreichen Benutzer-Paletten aus. Dieses Tool bietet definitiv eine sehr gute Inspirationsmöglichkeit. Wie der Namenszusatz schon befürchten lässt, gehört Color zur Creative Cloud. Für die effektive Nutzung ist also ein Creative Cloud Account erforderlich. Allerdings reicht eine kostenlose Mitgliedschaft.

Link zum Tool: Adobe Color CC

Copaso

Auch mit Copaso lassen sich Farbschemen erstellen. Das Besondere an dieser Lösung ist, dass sich die Farbpaletten aus Fotos auslesen lassen. Das kann durchaus praktisch sein, zum Beispiel um den Rest einer Webseite farblich an ein großflächiges “Hero”-Hintergrundbild anzupassen.

Link zum Tool: Copaso

Paletton – Color Scheme Designer

Paletton ist ein gutes Tool mit vielen Einstellmöglichkeiten. Ein Experimentieren mit Paletton lohnt auf jeden Fall. Die fertigen Farbschemen können in den bekanntesten sozialen Netzwerken geteilt werden. Hervorragend ist das Feature, das es erlaubt, das gewählte Farbschema als Website anzuzeigen. So sieht man gleich auf einen Blick, ob das gewählte Schema ansprechend aussieht oder nicht.

Link zum Tool: Paletton – Color Scheme Designer

Hier bei Dr. Web findest du an dieser und an dieser Stelle noch mehr Tools zur Entwicklung der perfekten Farbpalette.

Teil 6: Websites mit perfektem Farbschema

TV Safety

Kikk Festival

The Shihab

Melonfree

Kavat

Scott McCarthy

Quelle: 40 Stunning Website Designs with Great Color Schemes

Fazit

Die Auswahl des richtigen Farbschemas für deine Webseite bedarf genauer Überlegungen; zumindest, wenn du international ausgerichtet sein willst. National ausgerichtete Websites haben es hier etwas leichter, da mehr (gefahrlose) Möglichkeiten in der Farbgebung zur Verfügung stehen. Mit den vorgestellten Werkzeugen und den Beispiel-Websites sollte es jedoch möglich sein, farblich ansprechende Websites zu gestalten.

Bedenke aber auch, dass es abseits der gängigen Farbenlehre Überlegungen gibt, die weit weniger kategorisch einzuordnen sind. Diese haben wir in diesem Beitrag zusammengefasst.

Links zum Beitrag

Farbpsychologie

• An Introduction to Color Theory for Web Designers
• Farben: Wahrnehmung, Assoziation, Psychoenergetik (sehr umfangreiches PDF)
• Die Symbolik der Farben

Tools

• Adobe Color CC
• Copaso
• Paletton – Color Scheme Designer
• ColoRotate iPad App