Farbpsychologie im Web

Wer erfolgreich werben will, kommt um die Erkenntnisse der Farbpsychologie nicht herum. Gastautor Dietmar Klöskes gibt Tipps zu den Farben im Webdesign.

Wer erfolgreich werben will, kommt um die Erkenntnisse der Farbpsychologie nicht herum. Glaubt man Wikipedia, dann ist Farbe eine individuelle visuelle Wahrnehmung, die durch Licht hervorgerufen wird.
So einfach ist das aber nicht, denn Farbwahrnehmung kann auch durch Druck auf den Augapfel entstehen. Farbe wird von jedem anders wahrgenommen, ist also subjektiv.

Sicherlich haben sie sich schon einmal mit jemandem darüber gestritten, ob ein Schal in einem Warenhaus hellblau, türkis oder grün war. Die Wahrnehmung von Farben ist aber nicht nur subjektiv, sondern auch kulturell geprägt. So wird im westlichen Kulturkreis der unbunten Farbe Schwarz die Bedeutung von Trauer und Tod zugesprochen. Im asiatischen Kulturkreis ist es jedoch die gleichfalls unbunte Farbe Weiss.

Uns interessiert aber hier nicht das Farbempfinden des Einzelnen, sondern das des Kulturkreises, für den das Produkt bestimmt ist.

Nicht mir muss meine Webseite gefallen, sondern meiner Zielgruppe.

Das kollektive Farbempfinden ist für den Werbenden ausschlaggebend.
Wir sollten uns daher vorab einige Fragen stellen, bevor wir uns mit der Farbauswahl für unsere Webseite beschäftigen.
• Was für ein Produkt oder Dienstleistung biete ich an?
• Wofür steht dieses Produkt/Dienstleistung?
• Welche Zielgruppe will ich damit erreichen?
• In welchem Kulturkreis biete ich mein Produkt/Dienstleistung an?

Bevor ich jetzt das Rad neu erfinde, die Damen und Herren von Emergy interactive GmbH haben da schon ganze Arbeit geleistet.

Nachdem wir also unsere Farbe gefunden haben, kommen wir zum nächsten Schritt. Webseiten bestehen nicht nur aus einer Farbe. Doch wie finde ich Farben, die zu meiner Hauptfarbe passen? Dabei kann uns das kostenlose Adobe Kuler helfen.

Zu sehen ist ein Farbrad, auf dem sich ein Fächer befindet. Durch ziehen des Fächers kann ich hier die Analogfarben zu meiner Ausgangsfarbe bestimmen. Die Analogfarben sind die an meine Hauptfarbe angrenzenden Farben. Dies ist die Standardeinstellung „Ähnlich“.

Adobe_Color_CC

Die Hauptfarbe liegt dabei in der Mitte und die anderen sind rechts und links mit gleichem Abstand davon angeordnet. Der Abstand der Farben von der Hauptfarbe kann vergrößert oder verkleinert werden, bleibt jedoch zwischen den einzelnen Komponenten immer konstant. Durch Bewegen der einzelnen Farben in Richtung Kreismittelpunkt kann zusätzlich die Sättigung einzelner oder aller Farben gleichzeitig verändert werden. In der Regel reichen zwei angrenzende Farben völlig aus.

Bei der Hauptfarbe lila/violett sollte man aber vorsichtig sein. Da sollte man lieber die Finger von den Analogfarben lassen. Ich erkläre euch mal warum.

Im Farbkreis grenzt an Violett auf der einen Seite Rot, auf der anderen Seite Blau. Wenn wir den Farbkreis aufschneiden und linear ausbreiten, dann liegt Rot am einen Ende, Blau und Lila am anderen Ende, wie beim Regenbogen. Nun ist es aber so, dass unser Auge sich gewöhnlich auf den Bereich Gelb bis Grün für die scharfe Abbildung einstellt. Um nun Rot bzw. Blau scharf zu sehen, muss das Auge ständig neu fokussieren, von der einen Seite auf die andere. Beides zusammen geht nicht.

Die Folge davon ist, dass unser Auge schneller ermüdet und die Farben zu verschwimmen scheinen. Ältere Rundumleuchten bei Feuerwehr und Polizei haben diesen Effekt genutzt und dem blauen Licht etwas Rot beigemischt, was wegen der dann nicht möglichen Scharfstellung für beide Farben zu einem irisierenden Blau-Violett mit blauem Rand bei der Wahrnehmung führte.

In der Einstellung „Monochromatisch“ legt die Hauptfarbe den Wert für den Farbton fest.

Adobe_Color_CC_Monochromatisch

Der ermittelte Wert bleibt bei allen anderen Farben konstant. Diese variieren lediglich in ihrer Sättigung und ihrem Hellwert. Dadurch entstehen weiche, balancierte Übergänge, die vom Betrachter meist als angenehm empfunden werden. Allerdings entstehen nur geringe Kontraste und die Farben wirken wenig dynamisch und lebhaft.

Bei der triadischen Auswahl haben drei der gewählten Farben immer maximalen Abstand zueinander, was ihren Farbton anbetrifft.

Adobe_Color_CC_Triade

Bei voller Sättigung bildet sich also ein gleichseitiges Dreieck auf dem Farbkreis. Die einzelnen Farben können in ihrer Sättigung und ihrem Hellwert modifiziert werden. Es entstehen starke Kontraste, die trotzdem harmonisch wirken. Diese Farbauswahl wird gerne im Flatdesign (z.B. Windows 8) eingesetzt.

Bei der Auswahl „Komplementär“ werden zwei Farben ausgewählt, die genau auf den gegenüberliegenden Seiten des Farbkreises angeordnet sind.

Adobe_Color_CC_Komplementär

Auch hier können wieder Hellwert und Sättigung individuell eingestellt werden. Alle Farben befinden sich allerdings auf der Linie, die zwischen den beiden Komplementärfarben aufgespannt wird. Hierdurch entstehen starke Kontraste.

Die Farbregel „Zusammengesetzt“ hat es in sich. Wie der Name schon sagt, haben wir von allem etwas. Ausgehend von der Hauptfarbe werden zwei Analogfarben bestimmt.

Adobe_Color_CC_zusammengesetzt

Die beiden Analogfarben verhalten sich zueinander monochromatisch. Dazu gesellen sich dann zwei Analogfarben der Komplementärfarbe, die aber selbst nicht vorhanden ist. Diese beiden Analogfarben verhalten sich wie in der Farbregel „Ähnlich“.

Die Farbregel „Schattierung“ beschränkt sich nur auf die Hauptfarbe.

Adobe_Color_CC_Schattierungen

Alle anderen Farben werden nur durch Veränderung des Hellwerts erzielt. Im Gegensatz zu „Monochromatisch“ wird keine Änderung an der Sättigung vorgenommen.

Ein besonderes Highlight ist das kleine Kamerasymbol rechts. Hier kann ich mir aus einem Bild/Foto eine Farbpalette errechnen lassen. Einfach hochladen und aus den Einstellungen „Bunt“. „Hell“, „Gedeckt“, „Stark“, „Dunkel“ und „Benutzerdefiniert“ auswählen.

Alternativen zu Adobe Kuler sind Paletton (https://paletton.com) und Color Hunter (https://www.colorhunter.com).
Ein kleines Schnickschack gibt’s auch noch:
Word Color (https://douweosinga.com/projects/wordcolor)

Damit kann ich mir die Farbe eines Wortes anzeigen lassen. Häh? Ja, richtig gelesen. Dazu werden in der Google Bildersuche alle Bilder zum gesuchten Wort gelistet. Dann wird die Häufigkeit des Farbwertes jedes einzelnen Pixels gezählt. Der Gewinner ist die damit verbundene Farbe.

Noch ein kleiner Tipp zum Schluss. Komplementärfarben nur für Highlights und sparsam verwenden. Der Kontrast kann bei übermäßiger Verwendung auch auf die Augen gehen. Deshalb verwenden Webdesigner nie Weiß oder Schwarz als Schriftfarben. Wesentlich angenehmer zu lesen ist auf weißem Hintergrund Dunkelgrau (#353535) und auf schwarzem Hintergrund hellgrau (#878787).

Dietmar_KlöskesÜber den Autor:
Dietmar Klöskes ist der IT-Chef des Ring Deutscher Gutachter. Selbst ist er auch unter anderem IT-Gutachter, Schwerpunkt Forensik und Gastdozent
bei der Sachverständigenbetreuungs- und Weiterbildungs GmbH, kurz SBW.
Gerne wird er auch von der SBW als Gastredner zu den jährlichen Jahresfachtagungen für die Bereiche Bau und KFZ nach Hohenroda eingeladen.

Webseite: www.kfz-gutachter.de

Twitter: https://twitter.com/KFZGutachterDE

Google Plus Unternehmensseite: https://plus.google.com/+Kfz-gutachterDe

Facebook Unternehmensseite: KFZ-Gutachter.de

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp

1 Kommentar

Farbpsychologie im Web | Freakinthecage Webdesi... · 15. Juni 2015 um 11:11

[…] Wer erfolgreich werben will, kommt um die Erkenntnisse der Farbpsychologie nicht herum. Gastautor Dietmar Klöskes gibt Tipps zu den Farben im Webdesign.  […]

Schreibe einen Kommentar

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

* Die DSGVO-Checkbox ist ein Pflichtfeld.

*

Ja, ich habe die Datenschutzerklärung gelesen