Darius A Monsef IV (Übersetzung Manuela Müller)

Farbe ist eine wichtige Komponente im Webdesign. Mit der richtigen Farbkombination können Sie Aufmerksamkeit erregen oder Usern helfen, Entscheidungen zu treffen oder sie zu einer Aktion animieren, Gefühle hervorrufen, Elemente hervorheben, Informationen strukturieren und ein ausgewogenes Design schaffen. Wie Sie das im Einzelnen erreichen, erläutert dieser zweiteilige, aus dem Englischen übersetzte Fachbeitrag aus dem Smashing Book.

Lebensgrundlage

Verschiedene Forschungsansätze gehen davon aus, dass Primaten im Laufe der Evolution gelernt haben, Farben zu sehen, weil es für sie existentiell war, verschiedene Arten von Nahrung zu unterscheiden. Auch für die Suche nach paarungswilligen Artgenossen und um fresswütigen Raubtieren zu entgehen, war die Unterscheidung von Farben absolut vorteilhaft (1). Die Wahl zwischen den tödlich giftigen, grünen Steinfrüchten des Wandelröschens und den weniger gefährlichen roten wäre ohne Farbwahrnehmung wohl nicht allzu häufig gut ausgegangen.

Heutzutage müssen wir wesentlich schneller Informationen sammeln, filtern und dann Entscheidungen treffen als unsere behaarten Vorfahren – vor allem, wenn es um Websites und andere Medien geht. Mit schlechter Farbwahl im Webdesign können Sie zwar niemanden umbringen, allerdings können Sie damit ungewollte Reaktionen auslösen. Deshalb ist es auch heute noch sehr wichtig und hilfreich zu wissen, wie Farbe sich auf das Erleben von und der Interaktion mit Internetseiten auswirkt.

Ein paar Basics vorweg

Bestimmt möchten Sie sofort in die faszinierende Welt der Farben mit inspirierenden Beispielen von Farbkombinationen eintauchen. Allerdings können ein paar Grundlagen über Farbmodelle und die Bedeutung, die wir Farben zuschreiben, nicht schaden. Gewappnet mit diesen Grundlagen können Sie dann umso erfolgreicher forschen und praktisch an jedem Ort in Ihrem Umfeld neue Inspirationen finden.

Grundfarben

Unsere Augen haben drei verschiedene Arten von Farbrezeptoren, die jeweils auf rot, grün und blaue Farbe im Licht unterschiedlich reagieren. So stimuliert blaues Licht den einen Rezeptor mehr als die beiden anderen, was wiederum zu verschiedenen Botschaften ans Hirn führt. Die Art und Weise, wie verschiedene Farbkombinationen die verschiedenen Rezeptoren stimulieren, bedingt wiederum Millionen verschiedener Arten von Farben beziehungsweise Farbtönen. Diese Farbtöne kann man  in einem Kreis gruppieren – dem so genannten Farbkreis oder Farbrad, wie Goethe es nannte – wobei In diesem Kreis bei jeweils 60 Grad ein andere Grundfarbe beginnt. Drei dieser Grundfarben, nämlich Rot, Blau und Grün, nennt man Primärfarben, während Gelb, Cyan und Magenta als Sekundärfarben bezeichnet werden. Die sechs Farbtöne dazwischen, sind die so genannten Tertiärfarben.

Ein beliebtes Farbsystem in der elektronischen Informationsverarbeitung ist das HSB-Modell. Die Abkürzung steht für Hue, Saturation und Brightness – also Farbton, Sättigung und Helligkeit. Die Farbe wird über den Farbton und die dazu in Abhängigkeit stehenden Werte der Sättigung (S) und Strahlungshelligkeit definiert.  Der zwischen Null und 100 Prozent skalierbare Wert der Sättigung gibt an, wie kräftig die Farbe im Vergleich zu ihrem maximalen Potential ist. Helligkeit bezieht sich auf die Strahlungshelligkeit einer Farbe (0 bis 100 Prozent). Reine Farben haben hohe Helligkeits- und Sättigungswerte, was sie lebendiger erscheinen lässt. Dunkle Farben haben niedrige Helligkeitswerte, wodurch sie schwärzer erscheinen. Wie Sie an der folgenden Abbildung erkennen, können Sie viele Farben allein dadurch erzeugen, dass Sie einen Buntton in verschiedenen Schattierungen von Helligkeit und Sättigung ausgeben.

Die Primärfarben im Webdesign sind Rot, Grün und Blau. Die Sekundärfarben Cyan, Magenta und Gelb ergeben zusammen mit den Primärfarben die sechs verschiedenen Farbbereiche des Farbkreises. Die Werte der Farbtöne sind in Grad (°) angegeben; den Hexadezimalwerten ist eine Raute (#) vorangestellt.

Farbton, Tiefe, Schattierung

Tiefe, Farbton und Schattierung bieten Ihnen weitere Möglichkeiten, Farbunterschiede zu beschreiben. Diese Methode ist weniger kompliziert und leichter verständlich als die komplexe Definition von Helligkeit und Sättigung. Wenn Sie beispielsweise zu einem anderen Designer sagen, ich mag die Farbe, aber ich hätte sie gerne in einer dunkleren Schattierung, weiß ihr Ansprechpartner, dass Sie einen Farbton mit einem höheren Schwarzanteil meinen. Helligkeit und Sättigung basieren auf komplizierteren Modellen und können daher schnell zu Missverständnissen führen. Die folgende Abbildung verdeutlicht die verschiedenen Abstufungen von Farbtönen in Abhängigkeit von Farbtiefe, Farbton und Schattierung.

Unterschiedliche Farbtöne je nach Einstellung von Farbtiefe, -ton und Schattierung

Durch die Kombination von Farbton, Sättigung und Helligkeit können Sie jede für das menschliche Auge wahrnehmbare Farbe kreiern (2).

Farbsysteme

Die meisten Monitore stellen Farben durch das additive Mischen von Farben (Lichtmischung), nämlich der Primärfarben Rot, Grün und Blau dar. In der Vergangenheit haben Maler Rot, Gelb und Blau benutzt, um daraus verschiedene Farben zu mischen. Computersysteme verwenden Rot, Grün und Blau, weil Monitore diese Lichtfarben ausgeben können. Wenn man die drei Farben Rot, Grün und Blau jeweils mit einem Wert von 0 bis 255 ausgibt  – wobei 0 die geringste und 255 die höchste Intensität hat, ergeben sich 16.777.216 verschiedene Farben. Rot, Grün und Blau bei jeweils vollem Anteil gemischt (R 255, G 255, B 255), ergibt rein weißes Licht, während die Abwesenheit der drei Primärfarben beziehungsweise der Wert Null (R 0, G 0, B 0) Schwarz ergibt, was der Abwesenheit von Licht entspricht. Diese Art der additiven Farbmischung wird als RGB-Farbmodell bezeichnet.

Ein Browser interpretiert Farben durch Hexadezimalwerte. Eingeleitet durch das Raute-Zeichen (#) stehen jeweils zwei der sechs Stellen des Codes für einen der RGB-Werte (0 bis 255). Während das untere Ende der RGB-Skala “0″ im Hexadezimalcode durch “00″ wiedergegeben wird, steht für den obersten Wert “55″ im Hexadezimalcode das Zeichenpaar “FF”.

Hexadezimalcode der Primärfarben

• Rot: #FF0000
• Grün: #00FF00
• Blau: #0000FF

Die gängigen Grafikprogramme wandeln HSB- und RGB-Werte automatisch in Hexadezimalcode um. Dennoch macht es Ihr Leben als Designer einfacher, wenn Sie die Zusammenhänge kennen.

Zusammenspiel der Farben – Beispiele aus der Praxis

In der Farbtheorie beziehungsweise Farbenlehre geht es unter anderem darum, das Verhältnis von Farben zueinander und die Effekte verschiedener Kombinationen sowie deren Wirkung auf die Betrachter zu erforschen. Dieser Beitrag wird einige der anerkanntesten Farbschemata und deren Einsatz anhand einiger Beispiele aktueller Websites erläutern. Ein Farbschema zu entwickeln, gehört meist zu den ersten Aufgaben, wenn Sie zueinander passende Farben für ein Design auswählen.

Die folgenden Abbildungen zeigen links oben jeweils eine Palette der Hauptfarben und rechts daneben, deren Position im Farbkreis. Darunter zeigen wir jeweils ein Beispiel aus der Praxis.

Monochrom: Ein Farbton, verschiedene Abstufungen von Sättigung und Helligkeit

Monochromatische Palette

Monochromatisches Farbschema

Analog oder gemischt: Aneinander angrenzende Farbtöne

Analog/Gemischt, Palette

Analog-gemischtes Farbschema

Komplementär: Zwei im Farbkreis exakt gegenüberliegende Farbtöne

Komplementäre Palette

Komplementäres Farbschema

Komplementär – Variante “gesplittet”

Ein Farbton auf einer Seite des Kreises und zwei an dessen gegenüberliegenden Farbton angrenzende Farben auf der anderen Seite des Kreises

Komplementär, gesplittet – Palette

Komplementär, gesplittet – Farbschema

Triade – drei Farben in gleichmäßigem Abstand zueinander

Triade – Palette

Triadisches Farbschema

Gemischtes Doppel – je zwei gegenüberliegende Komplementärfarben

Doppelt komplementär – Palette

Doppelt komplementär -Farbschema

Tetrade: Vier Farben in gleichmäßigem Abstand zueinander

Tetrade – Palette

Tetrade – Farbschema

Analog-komplementär

Zwei gegenüberliegende Komplementärfarben und ein dritter, angrenzender Farbton auf der einen Seite des Kreises

Analog-Komplemäntär-Palette

Analog-komplemäntäres Farbschema

Neutral – gedeckte Farben

Gedeckt – Palette

Gedecktes Farbschema

Akzentuiert: Gedeckte Farben mit einem Highlight

Aus einer Palette gedeckter Farben wird eine mit hoher Sättigung dargestellt.

Akzentuiert -Palette

Akzentuiert – Farbschema

Warme Farben

Farben aus dem oberen Bereich des Farbkreises (zwischen 271 und 90 Grad)

Warme Farben – Palette

Warme Farben -Farbschema

Kalte Farben

Farbtöne aus der unteren Hälfte des Farbkreises (zwischen 91 und 270 Grad)

Kalte Farben – Palette

Kalte Farben – Farbschema

Teil 2 – Vorschau

Ähnlich wie bei Werbegrafiken ist bei der Gestaltung einer Website ganz besonders auf die Wirkung der Farben zu achten. Es geht also nicht nur darum, dass Ihr Webdesign gut aussieht – mit der richtigen Farbe können Sie den Nutzern die Orientierung auf der Website erleichtern, Schaltflächen und Informationen hervorheben oder Kunden zum Kauf anregen. Der zweite Teil des Beitrags über Farben für Webdesign beleuchtet Farbauswahl unter dem Gesichtspunkt der Usability.

Verwendete Literatur

(mm), ™