Die Macht der Farben
Optimale Farbgestaltung im WWW

von Eva & Michel Birnbacher (Ausgabe 04/1, März 2004)

 

759. Die Menschen empfinden im allgemeinen
eine große Freude an der Farbe. Das Auge
bedarf ihrer, wie es des Lichtes bedarf. (...)

Sehen Sie manchmal rot - oder gar schwarz? Werden Sie grün vor Neid? Wird Ihnen die Sache schön langsam zu bunt? Es gibt eine ganze Reihe von Beispielen, wie wir unsere Gefühle anhand von Farben beschreiben. Haben Sie sich schon einmal überlegt, was mit solchen Sätzen ausgedrückt wird? Wenn nicht, dann haben Sie vermutlich auch noch keinen Gedanken daran verschwendet, warum für eine Webseite ein roter oder grauer Hintergrund verwendet wurde oder warum einzelne Elemente davon orange oder grün gefärbt sind.

Dabei sind wir alle tagtäglich mit Farben und ihrer geheimen Macht konfrontiert. Farben beeinflussen unser Denken, unser Handeln und unser Empfinden. Beispielsweise spürt man Kälte in einem blau-grün ausgemalten Raum angeblich bereits bei ca. 15° Celsius, während dies in einem orangefarbenen Raum erst bei 2° Celsius der Fall sein soll. Wenn man der folgenden Geschichte (siehe http://www.farbenundleben.de/titel/koffer.htm) Glauben schenken darf, wirkt die Farbgebung sogar auf das Gewicht von Gegenständen:

Ein amerikanischer Transportunternehmer beobachtete, dass seine Arbeiter an manchen Tagen deutlich früher als sonst Ermüdungserscheinungen zeigten. Als er dem nachging, stellte er fest, dass an diesen Tagen ausschließlich dunkle Kisten getragen wurden - die zu seinem großen Erstaunen jedoch exakt gleich schwer waren wie helle Kisten, die an anderen Tagen transportiert wurden. Die amerikanischen Psychologen Warden und Flynn untersuchten dieses Phänomen und ließen das Gewicht verschiedenfarbiger, aber gleich schwerer Packungen schätzen. Die Ausgangsrelation war eine weiße, 3 Pfund schwere Packung. Das verblüffende Ergebnis: Gelbe Packungen wurden auf 3,5 Pfund geschätzt, grüne Packungen auf 4,1 Pfund, blaue auf 4,7 Pfund, graue auf 4,8 Pfund und rote auf 4,9 Pfund. Schwarze Packungen wurden als fast doppelt so schwer eingeschätzt wie weiße, nämlich auf 5,8 Pfund.

Diese Ergebnisse wurden von der Industrie natürlich begeistert und erfolgreich aufgegriffen: Da eine dunkle Verpackung selbst bei gleicher Größe und gleichem Gewicht einen konzentrierteren, massiveren und gewichtigeren Inhalt vermittelt, konnten doppelte Böden und Mogelpackungen einfach durch entsprechende Farbgebung vermieden werden.

Ich sehe was, was du nicht siehst

110. (...) Sie nennen den Himmel rosenfarb
und die Rose blau, oder umgekehrt.
Nun fragt sich: sehen sie beides blau,
oder beides rosenfarb? sehen sie das
Grün orange, oder das Orange grün?

Farbempfindungen werden in unserem Gehirn hervorgerufen, wenn bestimmte Wellenlängen des Lichts auf die Sinneszellen des Auges treffen. Farben sind sozusagen ein Erfahrungswert, mit der Konsequenz, dass wir sie niemals emotionslos bzw. objektiv wahrnehmen. Diesen Umstand gilt es zu beachten - gerade auch bei der Farbgestaltung von Webseiten. Professionelle WebdesignerInnen wissen, dass ihr persönlicher Geschmack selten gefragt ist: Soll die Farbgebung glaubwürdig wirken, muss sie in erster Linie die Thematik der Seite, die Vorlieben der Zielgruppe sowie die Wünsche und Vorgaben des Eigentümers (z.B. Corporate Identity) widerspiegeln.

Abgesehen davon sollte man sich nicht darauf verlassen, dass alle BetrachterInnen der Webseite die gewählten Farben ebenso wahrnehmen wie man selbst. Beispielsweise macht die verbreitete "Rot-Grün-Schwäche" es den Betroffenen nahezu unmöglich, grüne Schrift auf rotem Hintergrund (und vice versa) zu entziffern. Auch Anweisungen wie "Klicken Sie auf den roten Pfeil" sind für diese Menschen wenig hilfreich. Farbkombinationen, die für Farbenblinde problematisch sind, sollten daher nach Möglichkeit vermieden werden. Eine empfehlenswerte Webseite zum Thema Farbfehlsichtigkeit mit Links zu Simulationsprogrammen ist unter http://www.barrierefreies-webdesign.de/knowhow/behinderung/sehbehinderung.php zu finden.

Farbsymbolik

829. Gelb und Grün hat immer etwas
Gemein-Heiteres, Blau und Grün aber immer
etwas Gemein-Widerliches, deswegen unsre
guten Vorfahren diese letzte Zusammenstellung
auch Narrenfarbe genannt haben.

Eine große Rolle bei der Auswahl von Farben und Farbkombinationen spielt die Farbsymbolik. Beispielsweise verbindet man mit der Farbe Rot oft Liebe, Energie, Entschlossenheit, aber auch Zorn, Hass und Gefahr. Insgesamt eignet sich Rot als kraftvolle und dominante Farbe jedenfalls bestens, um Aufmerksamkeit zu erregen. Dabei darf jedoch nicht vergessen werden, dass Rot nicht gleich Rot ist, sondern jeder Mensch bei der Frage "Woran denken Sie bei der Farbe Rot?" einen ganz speziellen Rotton vor Augen hat. Die der Farbe zugeordneten Eigenschaften resultieren daher zu einem guten Teil aus seiner eigenen, von persönlichen Erfahrungen geprägten Wahrnehmung. Darüber hinaus ist die Farbsymbolik auch sehr stark kulturell bedingt - beispielsweise wird die Farbe Weiß in unserem Kulturkreis mit Unschuld und Reinheit in Verbindung gebracht, in China steht sie jedoch für Tod und Trauer.

Unter diesem Blickwinkel ist auch die folgende Auflistung von Farben mit ihren spezifischen Eigenschaften zu sehen:

Farbe

positive Eigenschaften

negative Eigenschaften

Gelb

die Farbe der Sonne, Wärme, Helligkeit, Glück, Gold, Optimismus

Rachsucht, Egoismus, Geiz, Neid

Orange

Unkonventionalität, Dynamik, Wärme, Spaß, Aktivität

Leichtlebigkeit, Aufdringlichkeit, wirkt billig

Rosa

Zartheit, Baby, Romantik, Weichheit

wirkt kitschig

Rot

Liebe, Kraft, Temperament, Energie, Entschlossenheit

Gefahr, Blut, Zorn, Hass

Braun

Mutter Erde, Behaglichkeit

Langeweile, Vergänglichkeit

Grün

Natur, Vegetation, Frische, Ruhe, Entspannung, Harmonie, Hoffnung

Gift, Neid

Blau

die Farbe von Himmel und Meer, Weite, Ruhe, Vertrauen, Seriosität

Nachlässigkeit, Melancholie, Kühle, Passivität

Violett

Magie, Geheimnis, Kunst, Nostalgie, Frömmigkeit, Opferbereitschaft

Arroganz, Eitelkeit, Dekadenz

Silber/Grau

Eleganz, Sachlichkeit, Neutralität, Technologie

Langeweile, Eintönigkeit, Unsicherheit

Schwarz

Eleganz, Würde, modern, sachlich

Nacht, Geheimnis, Tod, Trauer, Undurchdringlichkeit

Weiß

die Farbe von Eis und Schnee, Reinheit, Klarheit, Ordnung, Vollkommenheit, Unschuld

Unnahbarkeit

 

Farbkombinationen

845. Man ist freilich bei dem Gebrauch der
ganzen Farben sehr eingeschränkt, dahingegen
die beschmutzten, getöteten sogenannten
Modefarben unendlich viele abweichende
Grade und Schattierungen zeigen, wovon
die meisten nicht ohne Anmut sind.

Nachdem Sie eine zum Inhalt passende Hintergrundfarbe für Ihre Webseite gefunden haben, stellt sich die Frage: Welche Farben passen zum Hintergrund?

Mit dem Thema Farben und den verschiedenen Möglichkeiten, sie zu ordnen, hat sich eine ganze Reihe berühmter Persönlichkeiten beschäftigt. Für die nachfolgenden Beispiele wurde der Farbkreis nach Johannes Itten als Ausgangspunkt herangezogen (siehe Abb. 1).

Abb. 1: Der Farbkreis nach Johannes Itten

Bevor Sie sich auf die Suche nach passenden Farben machen, ist aber zu klären, ob starke Kontraste oder ein harmonisches Erscheinungsbild gewünscht sind.

Farbkontraste

Im WWW sollte vor allem die Kombination von Hintergrund und Text kontrastreich gestaltet werden, damit die Textpassagen ohne Schwierigkeiten gelesen werden können.

  • Ein Maximum an Kontrast bieten die Komplementärfarben (z.B. Orange und Blau), die sich im Farbkreis direkt gegenüber stehen. Diese Farbkombinationen wirken bei zu starkem Gebrauch jedoch überstimulierend und lassen das Auge rasch ermüden.

  • Einen etwas abgemilderten Kontrast erhalten Sie, wenn Sie anstelle der Komplementärfarben die Teilkomplementärfarben (z.B. Orange und Blau-Violett) heranziehen, die sich jeweils links und rechts neben der Komplementärfarbe befinden.

  • Eine weitere Möglichkeit sind Bunt-Unbunt-Kontraste: Dabei werden Farben mit unterschiedlicher Leuchtkraft kombiniert - z.B. leuchtendes Rot mit Grau (die Leuchtkraft einer Farbe sinkt mit einem steigenden Grauanteil). Für Bunt-Unbunt-Kontraste können auch die Farben Schwarz und Weiß verwendet werden.

Farbharmonien

Wenn man eine ruhige und angenehme Atmosphäre schaffen möchte, sollte man harmonierende Farben verwenden.

  • Für Farbharmonien eignen sich beispielsweise analoge Farben (z.B. Gelb mit Gelb-Grün oder Gelb-Orange), die im Farbkreis direkt nebeneinander zu finden sind. Diese Farben sind einander sehr ähnlich und daher in der Regel einfach zu kombinieren.
     
  • Sollen drei oder mehr verschiedene Farben harmonieren, so empfehlen sich die so genannten Farbklänge. Diese haben die Eigenschaft, dass ihr Abstand zueinander im Farbkreis gleich ist. Einen Farbklang erhält man, indem man beispielsweise ein gleichseitiges Dreieck (Farbdreiklang) oder ein Quadrat (Farbvierklang) über den Farbkreis legt. Die Eckpunkte der Flächen zeigen auf die jeweiligen Farbtöne eines Farbklangs.
     
  • Sehr beliebt ist auch die Kombination einer Volltonfarbe mit Abstufungen davon, also mit aufgehellten bzw. abgedunkelten Farbwerten.

Webfarben - Ja oder Nein?

593. Den Körpern werden auf mancherlei Weise
die Farben entzogen, sie mögen dieselben von Natur
besitzen, oder wir mögen ihnen solche mitgeteilt
haben. Wir sind daher imstande, ihnen zu unserm
Vorteil zweckmäßig die Farbe zu nehmen, aber sie
entflieht auch oft zu unserm Nachteil gegen unsern Willen.


Bevor Sie nun die Farben für Ihre Webseite endgültig auswählen, müssen Sie sich noch darüber klar werden, ob Sie auf eine einheitliche Darstellung der Farben auf verschiedenen Hardware-, Betriebssystem- und Browser-Plattformen Wert legen. Falls Ihnen dies ein Anliegen ist, sollten Sie sich auf die so genannten Webfarben beschränken.

Farben, die auf einem Bildschirm dargestellt werden sollen, werden im RGB-Farbmodus festgelegt. Dieser Modus beschreibt Farben anhand ihrer Rot-, Grün- und Blauanteile, die jeweils einen Wert zwischen 0 und 255 annehmen können (Rot hat z.B. den RGB-Wert 255.0.0 - maximaler Rotanteil, kein Grün- und kein Blauanteil). Im RGB-Modus können somit insgesamt 2563, also über 16,7 Millionen Farben definiert werden.

Falls Sie einen modernen Rechner, einen leistungsfähigen Monitor und ein entsprechendes Grafikprogramm Ihr Eigen nennen, haben Sie nun also die Qual der Wahl, unter Millionen von Farben eine passende zu finden. Aber selbst wenn Sie diese Herausforderung meistern, ist die Gefahr groß, dass die gewählten Farben auf anderen Rechnern völlig anders wirken. Besonders augenfällig ist dieser Effekt bei älteren Geräten, die mit 8-Bit-Farbtiefe arbeiten und daher nur 256 Farben darstellen können.

Aus diesem Grund wurde seinerzeit von Netscape die so genannte Web-Farbpalette eingeführt. Diese besteht aus 216 Farben, die theoretisch auf allen Farbbildschirmen und bei allen Betriebssystemen gleich dargestellt werden. Die Erfahrung zeigt allerdings, dass dies selbst bei Webfarben nicht immer der Fall ist. Auch die Tatsache, dass alle neueren Computersysteme bereits mit 32-Bit-Farbtiefe arbeiten, lässt die Relevanz der Webfarben verblassen. Dennoch bieten sie eine gewisse Orientierungshilfe innerhalb der Fülle verfügbarer RGB-Farben. (Puristen finden sogar mit den 16 im HTML-Standard definierten Farbnamen das Auslangen, die von jedem VGA-Bildschirm angezeigt werden können.)

Letztendlich bleibt es Ihnen überlassen, ob Sie mit Webfarben arbeiten oder nicht. Für den Fall, dass Sie sich dazu durchringen, bieten Ihnen die meisten Grafikprogramme auch die entsprechende Farbpalette an. Bei Adobe Photoshop können Sie z.B. im Farbwähler durch Anklicken der Option Nur Webfarben anzeigen die Farbauswahl auf die 216 "websicheren" Farben beschränken (siehe Abb. 2).

Abb. 2: Der Farbwähler von Adobe Photoshop7

Als zusätzliche Hilfe zeigt Adobe Photoshop neben den RGB- und anderen Farbwerten auch gleich den sechsstelligen Hexadezimalwert der ausgewählten Farbe an (z.B. #FFCC66), der im HTML-Dokument bzw. im Style Sheet angegeben werden muss.

Links

844.  Inwiefern der trübe nordische Himmel
die Farben nach und nach vertrieben hat,
ließe sich vielleicht auch noch untersuchen.

Abb. 3: Der Color Schemer Online zeigt passende Farben an

 
Die kursiv gedruckten, nummerierten Zitate stammen aus Johann Wolfgang Goethe's "Zur Farbenlehre. Didaktischer Teil" (dtv, München 1963).