Handbuch Webdesign: Farbenlehre

In den vorherigen Kapiteln haben Sie gelernt, eine Webseite zu planen, die Inhalte auszuwählen und ihnen mit Hilfe von HTML Struktur zu verschaffen. Bevor Sie sich dem Aussehen widmen, sollten Sie sich zunächst über Farben und ihre Wirkung im Klaren sein.

Das WWW und Farben

Monochrom-Bildschirme wie der des IBM portable PC können nur eine Farbe darstellen.

Seitdem der Mensch den Farbbildschirm erfunden hat, und den Computer nicht mehr über braune oder grüne Monochrom-Bildschirme bedienen muss, ist Farbe für die Gestaltung von Benutzerschnittstellen sehr viel wichtiger geworden. Seitdem der Mensch das Internet erfunden hat, und das dazugehörige World Wide Web, wurde Farbe auch Bestandteil des Webdesigns. Zunächst waren die Möglichkeiten durch die geringen Fähigkeiten der ersten Browser und durch die sehr niedrige Bandbreite beschränkt. Seriöse oder technische Angebote, die auf den schnellen Informationsaustausch angewiesen sind, verzichteten auf die damals sehr innovativen Möglichkeiten der Browser, Text in verschiedenen Farben auszugeben, ein Hintergrundbild zu laden oder eine GIF-Animation, weil diese Meta-Informationen für den Browser sich den gleichen Raum in der Übertragung geteilt haben wie die richtigen Informationen für den Benutzer. Und mit einem Modem von 28 Baud oder 56kb/s Leistung konnte man das durchaus spüren.

Dass heute schnelles Internet fast in allen Großstädten und Ballungsräumen zur Verfügung steht und Bandbreiten bis zu 25.000 kb/s, 400-mal so schnell wie ein Modem der späten 90er, kein Thema mehr sind, hat die Gestaltungsfreiheit des Internets enorm erweitert. In dem unendlichen Feld der Möglichkeiten, seine Website zu gestalten, ist es im Interesse der Benutzer und damit auch des Betreibers wichtig, dass in diesen Möglichkeiten Ordnung geschaffen wird.

Die digitale Farbe

Rot, Grün und Blau als Farbkomponenten des Lichts. Wenn die Farbkreise je dem Wert 255 entsprechen, entspricht die Konzentration aller drei Farben in dieser Stärke der Farbe weiß.

Die Weiterentwicklung von Bildschirmen, Betriebssystemen und Grafikkarten hat einige "magische Zahlen" hervorgebracht, die Sie kennen sollten.

Ein Bildschirm läuft heute im so genannten „True Color“-Modus und kann über 16 Millionen verschiedene Farben und Farbstufen darstellen.
Viel mehr als „True Color“, Farben in 32 bit, kann das menschliche Auge nicht wahrnehmen, daher der Name.
Auf dem Monitor werden die gleichen drei Farben verwendet wie für das Licht an sich: rot, grün und blau. Der Anteil dieser drei Grundfarben bestimmt die Ausprägung der eigentlichen Farbe.
Der Anteil eines der drei Farben kann auf dem Computer von 0 bis 255 reichen.
Die Wertigkeit von 0 bis 255 kann in 8-bit bzw. in einem Byte dargestellt werden. Ein Farbwert belegt also mit rot, grün und blau insgesamt drei Byte. 3 x 8 = 24. Ein Bit hat zwei Zustände, 2²⁴ = 16.777.216 verschiedene Farben.

Diese Fakten geben einen nützlichen Überblick und ein Verständnis von Farbe in digitalen Systemen. Sie sehen, um ein bisschen Arithmetik kommen Sie nicht herum. Um die Verwendung einer Farbpalette werden Sie auch nicht herumkommen, denn die exakte Berechnung einer Farbe aus dem binären Anteil von drei anderen Farben übersteigt die Möglichkeiten menschlicher Fantasie. Anhand des Farbkreises können Sie aber eine Farbe auf der Palette ungefähr verorten. Und eine Grundregel können Sie sich dennoch merken: Wenn der Anteil aller drei Farben genau gleich ist, ergibt dies einen Grauton, deren Helligkeit von der Höhe dieser drei gleichen Zahlen abhängt.

Darstellung von Farben im Webdesign

Hexadezimal

Die am häufigsten zu findende Darstellung einer Farbe im Web ist die Hexadezimal-Darstellung der drei Farbanteile. Das Attribut color in HTML oder die gleichnamige Eigenschaft in CSS kündigt eine solche Darstellung an. Eingeleitet wird sie durch ein Doppelkreuz # gefolgt von neun Hexadezimalziffern.

Beispiel

#FFFFFF

Dieser Farbwert, der für die Farbe Weiß steht, besteht aus drei zweisteligen Hexadezimalzahlen. Hexadezimal sind Zahlen zur Basis 16. Da wir aber nur 10 Dezimalziffern kennen, schreibt man die 6 Zahlen mit dem Dezimalwert 10 bis 15 in Hexadezimalzahlen mit den Buchstaben A bis F.

Hexadezimalzahlen und ihre dezimale Entsprechung
Hexadezimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
Dezimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

Von den drei zweistelligen Hexadezimalzahlen steht die erste zweistellige Hexadezimalzahl für den roten, die zweite für den grünen und die dritte für den blauen Farbanteil der Gesamtfarbe. Das hexadezimale F steht also für den Dezimalwert 15, und die zweistellige Hexadezimalzahl FF entspricht dezimal (15 x 16) + 15 = 255, dem Maximum für einen Farbanteil. Alle drei Farbanteile haben den Wert 255, also ist die dargestellte Farbe weiß.

rgb(r, g, b);

Wenn Ihnen die Hexadezimaldarstellung zu kompliziert und zu abstrakt erscheint, können Sie in CSS auch eine Prozedur aufrufen, die drei dezimalen Farbwerte für Rot, Grün und Blau in dieser Reihenfolge akzeptiert. Diese Prozedur heißt rgb();.

color: rgb(255, 255, 255);

Außerdem versteht die Prozedur Prozentangaben, beispielsweise rgb(100%, 100%, 100%);.

hsl(h, s, l);

Ein anderes Modell zur Farbdarstellung bietet Hue, Saturation, Lightness, also Spektrum, Sättigung, Helligkeit. Das Spektrum ist eine Zahl von 0 bis 360, wobei 0 bzw. 360 ein Rot ergeben, 120 ein Grün, und 240 ein Blau. Zwischen diesen Schlüsselwerten finden Sie die Farben des gesamten Spektrums. Die Sättigung bestimmt sich durch einen Wert zwischen 0%, der vollkommenen Blässe, und 100%, der stärksten Sättigung. Ebenso befindet sich die Helligkeit auf einer Skala von 0%, das absolute Schwarz, und 100%, das absolute Weiß. Wie so oft finden sich die Farben in den grauen Zwischentönen.

color: hsl(360, 0, 0); /* schwarz */

rgba und hsla

Mit einem vierten Wert geben Sie der Farbe eine Deckkraft. 0% für vollständige Transparenz, dann ist die Farbe gar nicht zu sehen. 100% für vollständige Deckung, dann können Sie aber auch rgb(); oder hsl(); verwenden.

Eine Farbauswahl treffen

Die Auswahl der Farben wird Ihnen abgenommen, wenn ein Unternehmen relativ strenge Vorgaben macht, welche zum Corporate Design gehören. Dann brauchen Sie sich um die Auswahl keine Gedanken mehr zu machen. Manchmal jedoch ist aus irgendeinem Grund die Weiterentwicklung des Farbschemas notwendig, weil zum Beispiel die Richtlinien keine Bestimmungen für eine Website enthalten, oder weil eben diese Richtlinien eine Erweiterung wünschen.

Dazu gibt es eine Reihe von Software, die Ihnen das Zusammenstellen einer Palette nach Grundsätzen der Farbenlehre erleichtert. Sie müssen also nicht erst Goethes Farbenlehre studieren, um zu einem harmonischen Ergebnis zu kommen.

Wichtig bei der Auswahl von Farben: Sie müssen zueinander passen. Hart gegeneinander geschnittene Farben, wie Rot-Blau, Schwarz-Weiß, oder Grün-Rot, sind doch nur im Interesse der Deutlichkeit zu verwenden (z.B. schwarzer Text auf weißem Hintergrund) und ansonsten wegen der Anstrengung, die sie für die Augen bedeuten, eher zu vermeiden. Seit etwa 2005 hat übrigens kein Webdesigner mehr monochrome Farbgebung für eine Website verwendet. Seit 2011 treten Farben auf Webseiten in den Hintergrund zugunsten einer klaren Kommunikation, da Webseiten auf Mobilgeräten vor allem mit Funktionen und Informationen auf sich aufmerksam machen.

Software zur Farbauswahl

Color Scheme Generator 2
Color Scheme Generator 3
ColorSchemer (kostenpflichtige Software)
ColourLovers - Experimentieren Sie mit Farben, Paletten und Mustern.

Seriosität und Professionalität

Weiß (#FFFFFF)	Blau (#0000FF)
Hellblau (#1E90FF)	Grau (#E0E0E0)

Seriosität und Professionalität gehen einher mit einer gewissen Distanz und Mäßigung. Grundsätzlich stehen Ihre seriösen Dienste jedem Kunden offen. Diese Farben drücken dies am deutlichsten aus, darum wählten die nachfolgend genannten Beispiele diese Farben am häufigsten.

Beispiele

Deutsche Bank

Ausschließlich Fotos und Grafiken brechen aus dem Farbschema der Deutschen Bank aus. Ihre Qualität jedoch unterstreicht den seriösen Charakter des Dienstleisters.

Microsoft

Eines der größten Softwareunternehmen verlässt sich auf cyan und weiß. Doch auch hier gestalten Grafiken und Fotos das Nutzererlebnis lebendiger, z.B. bei Windows Live.

Fedora Project

Das Linux-Projekt Fedora ist das Betriebssystem, dass sich vornehmlich an erfahrene Anwender und Serverbetreiber richtet.

Die Farbgebung ist subtil, im Vordergrund steht eine sachliche und nüchterne Struktur, die allein durch professionelle Fotos in Agenturqualität oder einzelne farbige Spots lebendig wird.

Energie und Dynamik, Auffälligkeit

Starkes Blau	Goldorange
Rot	Schwarz
Weiß	Knallgelb

Unternehmen, die auf starke Aufmerksamkeit setzen und ihre Kunden farblich geradezu „anschreien“ wollen, setzen auf hart geschnittene Farben, die zumeist auch noch komplementär zueinander sind. Das heißt, die Farben liegen sich im Farbkreis gegenüber. Gebräuchlich sind diese Farben vor allem im mittelgroßen Einzelhandel, der sich mit seiner Werbung an den Konsumenten richtet und sich Aufmerksamkeit verschaffen will.

Beispiele

Die Saturn und Media Markt Gruppe

Auch wenn die MediaMarkt Saturn GmbH alles versucht, es nicht öffentlich werden zu lassen: Media Markt und Saturn gehören zum gleichen Unternehmen. Beide Geschäftsketten verwenden gegeneinander geschnittene Farben. Blau und das komplementäre Orange werden zusammen mit dem edlen Schwarz von Saturn verwendet, während Media Markt sich auf rot, schwarz und weiß verlässt.

Penny Markt und Kaisers bzw. Tengelmann

Rot, goldorange und Blautöne sind hier die Farben der Wahl, um Aufmerksamkeit zu erzielen. Doch Produkte und Verbraucherinformation stehen hier im Vordergrund.

Bei Aldi Süd, eines der beiden Aldi-Handelsunternehmen, verlässt man sich seit Jahren auf blau und orange als Farben des Corporate Designs, auch wenn sie hier sehr dezent eingesetzt werden.

Variierende Farbgebung

Wird durch die Farbgebung eine weitere Information transportiert, kann sich die Farbe des Logos und auch der gesamten Website ändern. Allerdings wird hiermit das Markenbild verwaschen.

Beispiel

Sat.1

Der Sender des Konzerns ProSieben.Sat1 Media GmbH verwendet verschiedene Farben, um die verschiedenen Rubriken ihres Fernsehprogramms zu kennzeichnen. Die Metapher des bunten Sat.1-Balls hat man hier weiterentwickelt. Auch die BBC verwendet für ihre verschiedenen Rubriken verschiedene Farben, doch das Logo ändert sich dabei nicht. Einen Mehrwert bieten solche Farbwechsel nur bei großen Informationsangeboten und Portalen mit mehreren Rubriken zur Orientierung.