Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 28. März 2019

Dr. Webs umfassende Farbenkunde: So wirkt jede Website perfekt

Die beson­de­re Wirkung von Farben spielt eine gro­ße Rolle im Webdesign, denn Farben berüh­ren die Sinne, lösen Gefühle aus und blei­ben im Gedächtnis. Durch Farben aus­ge­lös­te Emotionen sind sehr wich­tig für die Bildung einer Marke. Ohne die rich­ti­ge Farbe wäre man­ches moder­ne Unternehmen nicht so groß gewor­den sein. Daher brin­gen wir dir heu­te die gän­gi­ge Farbenlehre näher. Wir erklä­ren Farben und ihre Wirkung auf die mensch­li­che Psyche und geben dir Tools für opti­ma­le Farbgebungen an die Hand. Den Abschluss bil­den Beispiele von in die­sem Sinne opti­mal gestal­te­ten Webseiten.

Teil 1: Die Farb-Psychologie

Die Psychologie der Farben ist auch für eine Webseite enorm wich­tig. Mit den fal­schen Farben ver­se­hen, kann es sehr schnell sein, dass nicht der gewünsch­te Effekt – etwa die Konversion vom Betrachter zum Käufer – erreicht wird. Schaue dir fol­gen­des Beispiel ein­mal an:

Ein Beispiel unterschiedlicher Wahrnehmungen bei unterschiedlichen Farben

© emergy-interactive.de

Du stellst dabei fest, dass die unter­schied­li­che Farbgebung auch unter­schied­li­che Emotionen in der Wahrnehmung aus­löst. Farbwahrnehmung ist sub­jek­tiv, daher kann in der Farbgebung einer Webseite auch nicht jedes ein­zel­ne Individuum berück­sich­tigt wer­den, son­dern nur eine bestimm­te Gruppe von Menschen aka Zielgruppe. Als ers­tes steht also die genaue Suche und Definition der Zielgruppe an. Denn nur wenn man weiß, wen man errei­chen möch­te, wächst die Chance, dies auch letzt­end­lich zu tun.

Im Anschluss bedient man sich dann der Instrumente der klas­si­schen Farbenlehre und der Psychologie der Farben. Besonders bei glo­ba­len Marken, Produkten und Unternehmen ist es wich­tig, die gän­gi­gen Kriterien zu beach­ten.

Einige kurze Beispiele:

  • Waschmittel sol­len Reinheit ver­mit­teln, daher wird meist rei­nes Weiß für die Farbgebung des Pulvers ver­wen­det.
  • Produkte für den Valentinstag sind über­wie­gend Rot – Rot ist die Farbe der Liebe.
  • Versicherungen kom­men meist in Blau daher – Blau ver­mit­telt Vertrauen.

Farbpsychologie: Farben – ein idea­les Manipulationsinstrument (sehr umfang­rei­ches PDF)

Zielgruppe feststellen und grundsätzliche Überlegungen

Ein opti­ma­les Farbschema für eine Webseite kann also erst gewählt wer­den, wenn man sei­ne Zielgruppe genau kennt. Eine ein­ge­hen­de Recherche beson­ders in den sozia­len Netzwerken zu den rele­van­ten Hashtags kann schnell zu frucht­ba­ren Ergebnissen füh­ren. Sobald du dei­ne Zielgruppe kennst, soll­test du dir eini­ge kur­ze Fragen beant­wor­ten, um wirk­lich opti­ma­le Ergebnisse zu erzie­len und um Unternehmen wie auch Produkte opti­mal im Internet zu prä­sen­tie­ren.

Die Fragen könnten zum Beispiel wie folgt lauten:

  • Was genau ist mein Produkt oder mei­ne Dienstleistung und wofür steht es/sie?
  • Welche Botschaft möch­te ich ver­mit­teln?
  • Was genau möch­te ich errei­chen? (z.B. Leads, Direktkäufe, Aufmerksamkeit)
  • Auf wel­chem Markt ist das Produkt oder die Dienstleistung bereits ver­tre­ten?
  • Müssen Logo und Broschüren even­tu­ell auch ange­passt wer­den?

 

Teil 2: Die Farben und ihre Bedeutung

 Rot

Rot ist die wir­kungs­volls­te Farbe für den Organismus des Menschen. In der Natur heißt es bei die­ser Farbe meis­tens “Achtung, Gefahr”. Wenn du “Rot siehst”, stei­gert sich die Puls-Frequenz, die Blutgefäße erwei­tern sich und der Körper wird in Alarmbereitschaft ver­setzt. Rot ver­leiht Flügel und lässt uns schnel­ler lau­fen – aller­dings auch davon­lau­fen. Die Farbe ist sehr auf­merk­sam­keits­stark. Sie for­dert uns auf, hin­zu­se­hen und fest­zu­stel­len, was eigent­lich los ist. Aus die­sem Grund wird Rot ger­ne auf Plakaten ver­wen­det. Selbst das “ältes­te Gewerbe der Welt” wirbt mit die­ser Farbe und das nicht ohne Grund. Experimente mit ande­ren Farben haben womög­lich nicht den­sel­ben Effekt erreicht ;)

Gebrochenem Rot oder leich­ten Rosa-Tönen wird auch der Effekt nach­ge­sagt, Depressionen zu ver­hin­dern und zu lin­dern, denn sie stim­men ten­den­zi­ell fröh­lich.

Bekannte Marken mit die­ser Farbgebung: Coca Cola, Kentucky Fried Chicken, Nintendo

Blau

Blau ist eine ten­den­zi­ell ruhig stim­men­de Farbe und ver­mit­telt Vertrauen. Blau ist in der Natur bereits als beru­hi­gend ange­legt, als Signal, dass alles in Ordnung ist. Diesen Effekt kannst du ganz deut­lich spü­ren, wenn du auf das blaue Meer schaust. Oder wenn du dich in das Gras gelegt und in den blau­en Himmel geblickt hast. Du kannst förm­lich spü­ren, dass dein Blutdruck sinkt und sich dei­ne Pulsfrequenz ver­rin­gert. Der Organismus schal­tet unter dem Eindruck von Blau voll­kom­men auf “Ruhe”. Ein hel­les Blau wird ger­ne für Lebensmittel genutzt, die gekühlt wer­den müs­sen oder Frische und Reinheit ver­mit­teln sol­len.

Bekannte Marken mit die­ser 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 rich­ti­gen Farbnuance steht die Farbe eben­so für Lebendigkeit, Freude, Optimismus, Vergnügen, Dynamik und Energie. Ein posi­ti­ves Empfinden stellt sich jedoch nur in war­men Farbtönen ein, da die Farbe eben­falls wie Rot ein Signalwirkung hat, die auf­put­schend wir­ken kann. Ein gutes Beispiel für die Signalwirkung ist die gel­be Karte beim Fußball oder die Kennzeichnung von Gefahrgütern. Gelb wird inter­na­tio­nal als Warnfarbe ver­wen­det und kann je nach Farbnuance ver­schie­de­ne Assoziationen her­vor­ru­fen – im posi­ti­ven wie im nega­ti­ven Sinne. Ein son­ni­ger Farbton kann die Stimmung erhel­len und hat eine sehr posi­ti­ve Wirkung.

Bekannte Marken mit die­ser Farbgebung: IKEA, Nikon, Shell, Schweppes

Grün

Grün wirkt ten­den­ti­ell beru­hi­gend, aller­dings nicht in dem glei­chen Maße wie Blau. Grün wirkt auch jugend­lich, natür­lich, frisch, leicht und ist die Farbe der Hoffnung. Sie wird gern genutzt für öko­lo­gi­sche Themen wie Naturschutz, Tierschutz und auch für öko­lo­gi­sche Produkte, was logisch erscheint, da die Natur nun ein­mal vor­wie­gend in Grün erstrahlt. Durch die har­mo­ni­sche Ausstrahlung wird Grün gern für gesun­de Bio- oder Naturprodukte ver­wen­det, oder für Produkte, die mit dem grü­nen Daumen in Verbindung gebracht wer­den, wie zum Beispiel Gartenprodukte. Grün steht ins­be­son­de­re für Natur, Wachstum und Umwelt.

Bekannte Marken mit die­ser Farbgebung: Starbucks, Tropicana, Land Rover

Grau

Eine kla­re, sach­li­che und Kompetenz ver­mit­teln­de Farbe wie die­se, wirkt nur, wenn sie rich­tig ein­ge­setzt wird. Technische Unternehmen ver­wen­den die­se Farbe ger­ne. Auch für tech­ni­sche Produkte, wie Autos, wird Grau ger­ne gewählt. Ein metal­li­sches Grau – eher Silber – ist eine der belieb­tes­ten Farben in der KFZ-Welt und kann ein Fahrzeug auf­wer­ten. Durch den gerin­ge­ren Kontrast im Vergleich zu Schwarz, wird es ger­ne als Schriftfarbe für Webseiten ein­ge­setzt. Dadurch kann das Schriftbild leser­li­cher und har­mo­ni­scher wir­ken.

Bekannte Marken mit die­ser 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 die­se durch die schwar­ze Farbgebung sehr edel und luxu­ri­ös wir­ken. In Kombination mit ande­ren Farbgebungen ent­ste­hen Assoziationen zu den Begriffen “geheim­nis­voll” oder “Sportlichkeit”. Korrekt ein­ge­setzt, wirkt Schwarz bei bestimm­ten Produkten teu­er und sehr edel, als Beispiel kön­nen die edlen Füllfederhalter von Montblanc die­nen.

Bekannte Marken mit die­ser Farbgebung: Nike, Puma, Montblanc

Weiß

Unschuldige Reinheit, Frieden und Vollkommenheit sug­ge­riert die­se Farbe, die eigent­lich gar kei­ne ist. Absolute Unendlichkeit sym­bo­li­siert Weiß eben­falls. Gerne wird die­se Farbe für Sauberkeit und Hygiene ver­mit­teln­de Produkte gewählt. Waschmittel, Salz und Zucker sind weiß, aber auch fri­sche 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 auf­er­stan­den und im Buddhismus gilt Weiß eben­falls als Farbe der Auferstehung.

Farben: Wahrnehmung, Assoziation, Psychoenergetik (sehr umfang­rei­ches PDF)

Teil 3: Die Farbe in fremden Kulturkreisen

Bei der Wahl eines Farbschemas muss auch die Wirkung in ande­ren Kulturkreisen berück­sich­tigt wer­den, zumin­dest, wenn man eine Webseite plant, die sich an ein inter­na­tio­na­les Publikum rich­tet. Nicht über­all erzie­len Farben die glei­che Wirkung, manch­mal kön­nen sie zu uner­wünsch­ten Nebenwirkungen füh­ren. Daher hier ein kur­zer Überblick, wie die wich­tigs­ten Farben in ande­ren Kulturkreisen wir­ken.

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ör­dert. Diese Farbe steht in China auch für Glück. In Russland hin­ge­gen steht die Farbe für teu­er und wert­voll.

Grün

Grün steht in allen Kulturkreisen für Hoffnung. In mus­li­misch gepräg­ten Ländern hin­ge­gen ist Grün die Farbe der Religion und wird nur im reli­giö­sen Kontext ver­wen­det.

Blau

Blau war einst die Farbe der Könige. Nur ein König durf­te die Farbe tra­gen. Blau sym­bo­li­siert in China die Mächte des Himmels und der Unsterblichkeit. In Indien hin­ge­gen ist es die Farbe der Gottheiten und der Erleuchtung. In ori­en­ta­li­schen Ländern streicht man Türen und Fenster blau, um die guten Gottheiten auf sich auf­merk­sam zu machen.

Gelb

Gelb ist die Farbe der (meis­ten) Religionen. In Ägypten, in Russland, im Orient und in eini­gen Ländern des Balkans ist Gelb die Hochzeitsfarbe.

Orange

In den Niederlanden gilt sie als Farbe der Freiheit, wäh­rend sie im Buddhismus die Farbe der Erleuchtung dar­stellt. In Irland reprä­sen­tiert Orange den Protestantismus.

Weiß

In den meis­ten Religionen der Welt ist Weiß ein Symbol für die Heimat des Lichts. In asia­ti­schen Kulturen hin­ge­gen sym­bo­li­siert Weiß das Alter, den Herbst, den Westen und die Hinterlist. In cre­mi­gem Ton ist Weiß dort die Farbe der Trauer und des Todes. Bei asia­ti­schen Beerdigungen wer­den wei­ße Kleider und Fahnen getra­gen.

Die Symbolik der Farben

Teil 4: Wege zur Auswahl eines effektiven Farbschemas einer Website

Triadisches Farbschema

Das Triadische Farbschema

© Tutsplus.com

Ein tria­di­sches Farbschema besteht aus 3 Farben von unter­schied­li­chen Enden des Farbspektrums. Es ist eine sehr ein­fa­che Möglichkeit, ein Farbschema zu erstel­len: Nimm dir ein Farbrad und wäh­le eine Grundfarbe. Zeichne nun ein gleich­sei­ti­ges Dreieck von die­sem Punkt. Die drei Punkte des Dreiecks wer­den dein Triadisches Farbschema bil­den.

Die Verwendung eines gleich­sei­ti­gen Dreiecks stellt sicher, dass die Farben die glei­che Lebendigkeit haben und sich gegen­sei­tig gut ergän­zen.

Komplementäres Farbschema

Komplementäres Farbschema

© Tutsplus.com

Das kom­ple­men­tä­re Farbschema basiert auf den Farben aus ent­ge­gen­ge­setz­ten Enden des Farbspektrums. Zwei Farben wer­den vom ent­ge­gen­ge­setz­ten Ende der Skala gewählt, der Designer pro­fi­tiert von mehr Freiheit im Designprozess und das spä­te­re Layout von der Nutzung der Komplementärfarben.

Analoges Farbschema

Analoges Farbschema

© Tutsplus.com

Ein ana­lo­ges Farbschema basiert auf einer sorg­fäl­ti­gen Auswahl der Farben im glei­chen Bereich des Farbspektrums. Gewöhnlich sind die Farben durch ihre Ausstrahlung und deren Kontrast im Vergleich zuein­an­der unter­scheid­bar.

Zwei Beispiele für ein ana­lo­ges Farbschema sind: Schattierungen von Gelb und Orange und eine mono­chro­ma­ti­sche Selektion (Schattierungen von einer Grundfarbe).

An Introduction to Color Theory for Web Designers

Teil 5: Tools zur Auswahl der richtigen Farbschemata

Einige wirk­lich nütz­li­che Tools zur rich­ti­gen Farbwahl, bezie­hungs­wei­se des rich­ti­gen Farbschemas einer Website, stel­le ich dir fol­gend vor. Diese Tools unter­stüt­zen dich sowohl bei der Wahl von per­fekt zusam­men­pas­sen­den Farben, als auch bei dem Extrahieren von Farbschemen aus bestehen­den Webseiten, die dir gefal­len.

Adobe Color CC

Adobe Color CC

Adobe Color CC ist vor­mals unter dem Namen Kuler bekannt gewor­den. Mit die­sem Tool erstellst du sehr leicht dei­ne eige­ne Farbpalette oder wählst unter den zahl­rei­chen Benutzer-Paletten aus. Dieses Tool bie­tet defi­ni­tiv eine sehr gute Inspirationsmöglichkeit. Wie der Namenszusatz schon befürch­ten lässt, gehört Color zur Creative Cloud. Für die effek­ti­ve Nutzung ist also ein Creative Cloud Account erfor­der­lich. Allerdings reicht eine kos­ten­lo­se Mitgliedschaft.

Link zum Tool: Adobe Color CC

Copaso

Copaso

Auch mit Copaso las­sen sich Farbschemen erstel­len. Das Besondere an die­ser Lösung ist, dass sich die Farbpaletten aus Fotos aus­le­sen las­sen. Das kann durch­aus prak­tisch sein, zum Beispiel um den Rest einer Webseite farb­lich an ein groß­flä­chi­ges “Hero”-Hintergrundbild anzu­pas­sen.

Link zum Tool: Copaso

Paletton – Color Scheme Designer

paletton-color-scheme-designer

Paletton ist ein gutes Tool mit vie­len Einstellmöglichkeiten. Ein Experimentieren mit Paletton lohnt auf jeden Fall. Die fer­ti­gen Farbschemen kön­nen in den bekann­tes­ten sozia­len Netzwerken geteilt wer­den. Hervorragend ist das Feature, das es erlaubt, das gewähl­te Farbschema als Website anzu­zei­gen. So sieht man gleich auf einen Blick, ob das gewähl­te Schema anspre­chend aus­sieht oder nicht.

website-vorschau-paletton

Link zum Tool: Paletton – Color Scheme Designer

Hier bei Dr. Web fin­dest du an die­ser und an die­ser Stelle noch mehr Tools zur Entwicklung der per­fek­ten Farbpalette.

Teil 6: Websites mit perfektem Farbschema

TV Safety

Tv Safety

Farbpalette TV Safety

Kikk Festival

Das Kikk Festival

kikk-festival-palette

The Shihab

The Shihab

Farbpalette The Shihab

Melonfree

Melonfree

melonfree-palette

Speed Motion

Speed Motion

speed-motion-palette

Kavat

Kavat Event

kavatt-palette

Scott McCarthy

Scott McCarthy Design

scott-maccarthy-palette

Quelle: 40 Stunning Website Designs with Great Color Schemes

Fazit

Die Auswahl des rich­ti­gen Farbschemas für dei­ne Webseite bedarf genau­er Überlegungen; zumin­dest, wenn du inter­na­tio­nal aus­ge­rich­tet sein willst. National aus­ge­rich­te­te Websites haben es hier etwas leich­ter, da mehr (gefahr­lo­se) Möglichkeiten in der Farbgebung zur Verfügung ste­hen. Mit den vor­ge­stell­ten Werkzeugen und den Beispiel-Websites soll­te es jedoch mög­lich sein, farb­lich anspre­chen­de Websites zu gestal­ten.

Bedenke aber auch, dass es abseits der gän­gi­gen Farbenlehre Überlegungen gibt, die weit weni­ger kate­go­risch ein­zu­ord­nen sind. Diese haben wir in die­sem Beitrag zusam­men­ge­fasst.

Links zum Beitrag

Farbpsychologie

Tools

Beispielhafte Websites mit gelun­ge­nen Farbschemen

(Der Beitrag erschien erst­mals im Februar 2015 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update stammt vom 28. März 2019.)

Beitragsbild: ann­ca auf Pixabay

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

11 Kommentare

  1. Wow, das nen­ne ich mal ’nen aus­führ­li­chen Artikel! Sehr inter­es­sant auf jeden Fall.. wel­che ver­schie­de­nen Auswirkungen Farben haben kön­nen ist schon irgend­wie fas­zi­nie­rend!

  2. Schöner und nütz­li­cher Artikel. Es ist wirk­lich erstaun­lich, wie manch­mal schon win­zi­ge Farbänderungen die Wirkung völ­lig ver­än­dern kön­nen. Und nicht nur bei Websites! Ich habe ein­mal einen grün/blauen Geburtstagskuchen bekom­men. Ich hät­te ihn nicht ein­mal unter Zwang essen kön­nen ;-)

  3. Mal wie­der ein star­ker Artikel – und sogar ganz ohne WordPress! ;-)
    Danke!

  4. [Zitat] “Stellen Sie sich Coca-Cola mit grü­ner Banderole vor” [Zitat]

    Wir wer­den bald erle­ben, ob das ein Erfolgsrezept wer­den kann … Das grü­ne Etikett gibt es schon.

Schreibe einen Kommentar zu Michael Dobler Antworten abbrechen

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