Farben fürs Web
Farbenlehre
Farbgeschichte
Farben fürs Web
Die Liste der Menschen, die sich intensiv mit Farben beschäftigt hat, liest sich wie das Who’s who der Kunst und Wissenschaft. Dabei ging es sowohl um die Farbwirkung als auch um die Einordnung der Farben in ein Farbsystem. Leonardo da Vinci hat um 1500 damit begonnen, Farben einzuordnen. Bezeichnend ist, dass Farben damals schon wissenschaftlich und bezogen auf ihre Wirkung beim Betrachter eingeordnet werden sollten. Gleichzeitig war Farbe aber auch Teil des künstlerischen Ausdrucks und der künstlerischen Identität. So hat Tizian, zumindest noch zu Beginn seines Schaffens ein Zeitgenosse Leonardo da Vincis, den Begriff Tizianrot geprägt. Tizian hat dieses starke Goldrot für Frauenhaar verwendet und damit Leidenschaft symbolisiert.
Wenn man bedenkt, wie lange es gedauert hat und wie viele verschiedene Materialien notwendig waren, um zur damaligen Zeit Farben zu mischen, so kann man sich gut vorstellen, welche Wirkung besondere Farben hervorgerufen haben. Heute ist jede Farbe nur einen Klick entfernt sie erhält ihre Wirkung eher im Kontext. Man nehme als Beispiel die Leuchtfarben der Telekom oder des Mediamarkts.
Farbsysteme
Farben fürs Web
Heute gibt es zwei Farbsysteme von Bedeutung: RGB mit additiver Farbmischung für den Monitor und CMYK mit subtraktiver Farbmischung für den Druck. Am einfachsten lässt sich die additive Farbmischung als Addition von Helligkeit verstehen – rotes und grünes Licht addieren sich zu gelbem Licht, rotes und blaues Licht zu Magenta und blaues und grünes Licht zu Cyan. Werden rotes, grünes und blaues Licht addiert, wird daraus Weiß. Bei der subtraktiven Farbmischung entsteht dagegen aus Cyan, Magenta und Gelb in der Theorie Schwarz und in der Druckmaschine Braun. Deswegen fügt man oft noch Schwarz hinzu und nennt das Farbsystem CMYK.
Beide Farbsysteme enthalten weitgehend dieselben Farben und sind in der Farbtheorie auf dem Farbkreis zusammen angeordnet. Die Primärfarben Rot, Grün und Blau sowie Cyan, Magenta und Gelb, werden 60 Grad von einander auf den Farbkreis gelegt. Alle Farben sind im Farbkreis auf einem Kreis aneinandergelegt. Farben, die aus zwei Primärfarben gebildet werden, heißen Sekundärfarben. Tertiärfarben sind Mischungen aus drei Primärfarben.
Komplementär und Kontrast
Farben fürs Web
Die sich im Kreis gegenüberliegenden Farben heißen jeweils Komplementärfarben. Im RGB-Farbsystem ergänzen sich zwei Komplementärfarben zu Weiß. Das heißt, zählt man die Helligkeitswerte der drei Farbbestandteile Rot, Grün und Blau zusammen, ergibt sich 255, 255, 255.
Komplementärfarben führen dementsprechend zu einem starken Kontrast, dem Komplementär- oder Simultankontrast. Sie lassen sich gegenseitig leuchtender und kräftiger erscheinen. Der Kontrast wird an sich als Stärke des Helligkeitsunterschieds wahrgenommen. So gibt Schwarz auf Weiß einen starken Kontrast. Mit dem Komplementärkontrast können Sie in der Praxis arbeiten, wenn Sie zu einer Farbe eine passende Ergänzung suchen.
Wichtig ist allerdings, den Farbkontrast immer im jeweiligen Kontext zu betrachten. Ein einfaches Beispiel illustriert das: Eine Fläche mit 50-Prozent-Grau, also einem mittleren Grauwert, liegt auf schwarzem und auf weißem Hintergrund. Die graue Fläche wirkt auf dem weißen Hintergrund deutlich dunkler. Auch aus Accessibility-Sicht sind manche Farbkontraste stärker einzuschätzen und manche schwächer. Die häufigste Form der Farbenblindheit sind beispielsweise zwei Formen der Rotgrünblindheit. Das führt natürlich zu Problemen, wenn Semantik – sprich bedeutsame Information – nur durch die Unterscheidung von Rot und Grün möglich wird. So verbieten sich in Shops zum Beispiel die alleinige Verwendung von Ampelfarben für den Verfügbarkeitsstatus. Eindeutig ist hier nur der gegebenenfalls zusätzliche Einsatz einer Position, wie sie bei Straßenampeln üblich ist.
Farbwirkung
Farben fürs Web
Die Farbwahl für eine Website sollte allerdings nicht nur vom Kontrast und von Accessibility-Erwägungen abhängen. Ein weiteres entscheidendes Kriterium ist die Farbwirkung. Sie ist sowohl in der Wissenschaft als auch in der eigenen Wahrnehmung schwerer zu erfassen. Lassen Sie sich ein wenig vom Sprachgebrauch inspirieren: sich schwarz ärgern, Schwarz oder Rot sehen, ins Blaue fahren, blaumachen, grün oder gelb vor Neid sein, auf keinen grünen Zweig kommen all diese Wer-wird-Millionär-500-Euro-Sprichwörter enthalten eine Farbe, die die jeweilige Bedeutung sofort klar macht.
Aber Vorsicht, diese teilweise eindeutig erscheinenden Assoziationen sind nicht so eindeutig. Viel zu viele Websites und Unternehmen greifen einfach zu Blau, weil es Deutschlands liebste Farbe ist und für Werte wie Freiheit, Freundschaft, Sympathie und Seriosität steht, ohne zu überlegen, dass Blau auch kühl ist, dass Freiheit auch Weite und schließlich Distanz ausdrücken kann.
Drei Ks sind es, die man bei der Farbwirkung vordringlich beachten sollte: Das erste ist der Kontext. Grün symbolisiert beispielsweise die Hoffnung und die Frische. Es ist die Farbe der Natur und des Lebens. Meist gelten diese Assoziationen, was aber passiert, wenn man sich das Bild einer grünen Banane vorstellt? Die Assoziation wechselt sofort zu Unreife und bitterem Geschmack. Das freundlich gedachte Bild wirkt wenig einladend. Der zweite fragliche Punkt ist der Kulturkreis. Nicht jede Kultur beurteilt Farben gleich gerade bei Websites, die ein weltweites oder zumindest internationales Publikum erreichen möchten, ist dies von Bedeutung.
In der Praxis hat sich erwiesen, dass man spätestens, wenn man über Mehrsprachigkeit nachdenkt, auch über die Farbwirkung in verschiedenen Kulturkreisen nachgrübeln sollte. Das augenfälligste Beispiel für Kulturunterschiede ist die Farbe der Trauer: In weiten Teilen Europas ist Schwarz damit assoziiert, in südlichen Ländern, aber auch in anderen Kulturkreisen dagegen Weiß.
Herantasten über neutrales Grau
Farben fürs Web
Das dritte Kriterium ist die Kombination von verschiedenen Farben. Rot und Schwarz ergibt zumindest im christlichen Kulturkreis Assoziationen mit der Hölle, dem Teufel oder simpel mit Hass. Rot im Zusammenspiel mit Rosa ist dagegen ein Zeichen für Liebe. Irgendwo dazwischen angesiedelt ist das Tizianrot auch hier sehr abhängig davon, welche Farben außenherum eingesetzt werden.
Und noch ein kleiner Tipp: Oftmals fällt die Farbwahl schwer, weil sich die eigenen Vorstellungen gedanklich nicht sofort in eine Farbe umsetzen lassen. Verwenden Sie dann einfach mal ein neutrales Grau als Ausgangspunkt und versehen Sie es dann mit einem leichten Farbstich. Mit Rot erreichen Sie beispielsweise ein warmes Grau und mit Blau oder Grün eher ein kühleres Grau und damit eine technischere Wirkung. So können Sie Farbtemperaturen ausprobieren, ohne gleich in den immens großen Farbkasten des RGB-Farbsystems greifen zu müssen. Grautöne bieten sich außerdem an, um eine vorherrschende Farbe optisch zu unterstützen.
Farbharmonien
Farben fürs Web
Was in der Praxis so flapsig als »die richtigen Farben aussuchen« beschrieben ist, ist selbstverständlich nicht ganz so einfach. Der Suche nach richtigen Farbkombinationen widmet sich die Farbharmonielehre, die schon Goethe betrieben hat. Eine Methode, die praktische Schlüsse zieht, hat Roman Liedl begründet. Er verwendet die Winkelharmonie. Das heißt, Komplementärkontraste sind harmonisch. Verwendet man mehr als zwei Farben, entsteht Harmonie durch Auffächerung der einen Seite auf dem Farbkreis.
Der zweite Weg zur Harmonie sind Farbreihen, das heißt im Farbkreis aneinander angrenzende Farben, die in einem Farbve
rlauf dargestellt werden.
Die Theorie dahinter ist zwar spannend, aber im Alltag manchmal zu komplex. Sie können sich aber einfach behelfen: Beispielsweise verwenden Sie eine Farbe und angrenzende Farben oder Helligkeitsabstufungen (Ton in Ton). Dies gibt einen dezenten Kontrast und ein harmonisches Bild. Als Kontrapunkt fügen Sie dann beispielsweise die Komplementärfarbe dazu. Damit aus dem Ganzen kein zu buntes Ergebnis wird, können Sie auch die Sättigung der Farben ein wenig reduzieren. So ergibt sich nach und nach ein Set an Farben, mit dem Sie auf Ihrer Website arbeiten können.
Dieses einfache Schema ist natürlich kein Pflichtprogramm, sondern lässt sich variieren. Sie können beispielsweise auch nur auf eine Farbe und ihre Farbabstufungen setzen. Eine solche monochromatische Website kann ähnlich einer Schwarzweißfotografie sehr stark wirken. Alternativ können Sie die Harmonieregeln auch bewusst brechen, wenn Sie sich der Wirkung eines solchen Bruches bewusst sind. Sie stellen nur eine Hilfe bei der Kombination passender Farben dar.
Hilfen
Farben fürs Web
Selbst auf dem Farbkreis zu rechnen, ist nur dem mathematisch begabten Designer zu empfehlen. Für alle anderen gibt es interessante Werkzeuge. Unter www.wellstyled.com/tools/colorscheme2/index-en.html finden Sie einen simulierten Farbkreis und verschiedene Kombinationsmöglichkeiten. Die Spanne reicht von einfarbig (Mono) über den Komplementärkontrast (Contrast) bis hin zu Farbabstufungen und Komplementärfarbe (Analogic). Zusätzlich lassen sich Sättigungsabstufungen wählen, zum Beispiel Pastellfarben oder stärkerer Kontrast. Ausgegeben werden die entsprechenden Farben und Farbwerte sowie ein Anwendungsbeispiel dazu.
Ähnlich wie die Web-Anwendung arbeitet das für Mac und Windows erhältliche Programm Color Schemer (www.colorschemer.com). Die Vollversion kostet knapp 50 Dollar. Auch hier wählen Sie eine Grundfarbe und können dann per Farbrad und in den Farbharmonien passende Farben auswählen. Besonders praktisch ist die Möglichkeit, sich aus einem Foto die Farben und Farbharmonien zu holen. Dies geht selbstverständlich auch per Hand. Sehr gute Vorlagen sind Fotos mit ganz klaren Stimmungen. Beispielsweise kann eine Winterlandschaft hervorragend Farbharmonien mit Weiß- und Blautönen liefern. Ein Sternenhimmel liefert dagegen beispielsweise ein Nachtblau, ein helleres Blau, ein Schwarz aus den Silhouetten im Vordergrund und einen pastellfarbenen Gelbton aus den Sternen.
Fazit
Farben fürs Web
Dieser Artikel enthält ganz bewusst keine Empfehlungen, welche Farbe zu welchem Zweck und für welche Websites verwendet werden sollte. Vielmehr soll er dazu anregen, ganz bewusst mit Farben umzugehen und klare Entscheidungen für Farben und Farbkombinationen zu treffen. Beschäftigt man sich erst einmal mit der Welt der Farben, öffnen sich manch neue Horizonte. Und der Seele des stress- und technikgeplagten Webdesigners tut es doch manchmal gut, zu wissen, dass er sich mit der bewussten Farbwahl in der Tradition von Leonardo, Tizian und Turner befindet.
Mythos: Websichere Farben
Farben fürs Web
Gerade bei altgedienten Webdesignern sind die 216 websicheren Farben immer noch heiß diskutiert. Dabei ist ihre Bedeutung heute nicht nur gering, teils erreicht man damit sogar das Gegenteil.
Websicher hat früher bedeutet, dass diese Farben am Mac und unter Windows darstellbar waren, wenn Grafikkarte und Monitor nur 256 Farben, also 8 Bit, darstellen können. Das Problem war folgendes: Sobald man als Webdesigner eine andere Farbe einsetzte, musste der Browser entscheiden, als welche der darstellbaren 256 Farben diese denn angezeigt werden sollte oder durch welche Farbe sie per Dithering zu ersetzen war. Daraus ergaben sich meist nach Monitordefekt aussehende Farbverschiebungen. Deswegen publizierte Lynda Weinman die websicheren Farben. Diese Palette bildet sich aus sechs Farbtönen für jede Primärfarbe: In hexadezimaler Notation sind das 00, 33, 66, 99, CC und FF. In RGB-Notation 0, 51, 102, 153, 204 und 255.
Nun ist es aber glücklicherweise so, dass es heute kaum noch Monitore mit 8 Bit Farbtiefe gibt. Die meisten Grafikkarten-Monitor-Kombinationen bieten nur noch 16, 24 oder 32 Bit an. Bei 16 Bit ist es sogar so, dass nur 22 der websicheren Farben wirklich ohne Neuberechnung dargestellt werden. Und sich auf 22 Farben hauptsächlich Gelb- und Grüntöne zu beschränken, ist Unsinn.
Das einzige Gegenargument, das lange Zeit gefürchtet wurde, sind mobile Endgeräte. Nun ist es schon lange so, dass diskutiert wird, ob eine Website für PCs überhaupt auch für Handys und PDAs funktionieren kann und muss. Bei den Farben gibt es aber glücklicherweise eher wenig Probleme, denn die Farbdisplays moderner mobiler Endgeräte besitzen von Haus aus mehr als 256 Farben. Interessant ist hierzu beispielsweise, dass auch Lynda Weinman selbst den Einsatz der 216-Farben-Palette für das Web nicht mehr empfiehlt (www.lynda.com/hex.html).