6 Farben im Web * Hinweis

Transkript

1 201 6 Farben im Web * Farben sind das Erste, was ein Besucher Ihrer Website wahrnimmt. Da es für den ersten Eindruck keine zweite Chance gibt, sollten Sie sich mit der Farbgestaltung im Web intensiv auseinandersetzen. Im ersten Kapitel werden wichtige Begriffe zur Farbgestaltung eingeführt:»was ist Farbe?«, S. 202 Für die Darstellung von Farben auf dem Monitor werden das RGBund das HSB-Farbmodell eingesetzt, für Farbdrucker das CMYK- Farbmodell:»Farbmodelle«, S. 205 Die Qualität der Farbgestaltung wird durch die drei K s (Komplementärfarben, Kontrast und Kombination) beeinflusst:»die 3 K s der Farbgestaltung«, S. 212 Mit Farben sind bestimmte Assoziationen verbunden, die man bei der Gestaltung einer Website kennen sollte:»farb-psychologie«, S. 216 Je nach dem gewünschten Effekt können Farben nach unterschiedlichen Gesichtspunkten kombiniert werden:»farben kombinieren«, S. 219 Eine gute Lesbarkeit der Texte auf dem Monitor wird durch eine geeignete Kombination von Schrift- und Hintergrundfarben erreicht:»schriftfarbe und Hintergrund«, S. 226 Etwa 8 Prozent aller Männer sind farbenblind. Wie sieht ein Farbenblinder die Farben einer Website?»Farbenblindheit«, S. 229 Die praktische Umsetzung des Farb-Designs für eine Website wird anhand der Fallstudie gezeigt:»ökostromanbieter: Farb-Design«, S. 235 Dieses Kapitel enthält zahlreiche Beispiele zur Farbgestaltung. Leider ist es technisch nicht möglich, Bildschirmfarben orginalgetreu auf Druckfarben abzubilden. Außerdem können Druckfarben ganz unterschiedlich ausfallen. Daher kann es sein, dass einige der beschriebenen Farbeffekte hier nicht sichtbar sind. Die»echten«Farben können Sie im zugehörigen kostenlosen E-Learning-Kurs»Farb-Design für Websites«sehen. Hinweis

2 202 6 Farben im Web * 6.1 Was ist Farbe? * Lichtfarben entstehen durch Übereinanderprojektion von farbigem Licht und werden unter anderem auf Bildschirmen verwendet. Alle Lichtfarben lassen sich durch additive Mischung aus den Primärfarben mischen. Körperfarben werden sichtbar, wenn Gegenstände Licht reflektieren. Sie werden unter anderem im Druckbereich verwendet. Hier entstehen neue Farben durch subtraktive Farbmischung. Was ist eigentlich Farbe? Das Sonnenlicht besteht aus elektromagnetischen Wellen unterschiedlicher Wellenlänge. In der Netzhaut gibt es drei verschiedene Typen farbempfindlicher Sehzellen, die auch Zapfen genannt werden: für kurzwelliges, mittelwelliges und langwelliges Licht. Die Zapfen sammeln die Lichtstrahlen ihrer Wellenlänge und leiten sie an das Gehirn weiter, wo dann die eigentliche Farbempfindung entsteht. Kurzwelliges Licht sehen Sie als Blau, mittelwelliges als Grün und langwelliges als Rot. Da die Lichtstrahlen farblose Energiestrahlen sind, kann man sagen: Farbe entsteht im Auge des Betrachters. Außer dem sichtbaren, gibt es den unsichtbaren Bereich des Lichts: das ultraviolette Licht (unterhalb des sichtbaren Bereichs) und das Infra-Rot-Licht (oberhalb des sichtbaren Bereichs). Grundsätzlich lassen sich zwei Erscheinungsformen von Farben unterscheiden: Lichtfarben und Körperfarben. Lichtfarben Lichtfarben sind die Farben, die von einer Lichtquelle, z. B. der Sonne oder einer Glühlampe aber auch bei Fernsehern, Computer-Bildschirmen oder Videoprojektoren, direkt in das Auge gelangen (Abb ). Abb : Das Sonnenlicht setzt sich aus Licht unterschiedlicher Wellenlängen zusammen. Rote, grüne und blaue Wellenlängen nehmen wir in der Summe als weißes Licht wahr. Primärfarben des Lichts Alle Lichtfarben lassen sich aus den drei Primärfarben Rot, Grün und Blau mischen (Abb ), man spricht daher von

3 6.1 Was ist Farbe? * 203 RGB-Farben. Näheres dazu finden Sie im Kapitel»Farbmodelle«, S Abb : Aus diesen drei Primärfarben setzt sich jede Lichtfarbe zusammen. Mischen sich rote und grüne Lichtstrahlen, so erscheint das Licht Gelb. Reines Gelb besitzt 100 % Rotanteil und 100 % Grünanteil, aber keinen Blau-Anteil. Da rotes und grünes Licht zu einer neuen Farbe»addiert«werden, spricht man von additiver Farbmischung. Wie die Abb zeigt, entsteht Gelb aus Rot und Grün, Magenta aus Rot und Blau, Cyan aus Grün und Blau. Weißes Licht entsteht durch die Überlagerung aller Wellenlängen zu jeweils gleichen Teilen. Oder anders ausgedrückt: Die Mischung aller drei Primärfarben zu gleichen Teilen (100 % Rot, 100 % Grün und 100 % Blau) ergibt Weiß. Fällt kein Licht auf die Sehzellen, dann»sieht«man die Farbe Schwarz. In diesem Fall liegt eine vollständige Abwesenheit aller Primärfarben vor. Additive Farbmischung für Lichtfarben Abb : Durch additive Mischung von Rot, Grün und Blau entsteht Weiß. Körperfarben Körperfarben werden sichtbar, wenn Licht von Gegenständen reflektiert wird. Fällt weißes Licht auf einen Gegenstand, dann wird ein Teil davon absorbiert (verschluckt) und ein anderer Teil der Strahlen reflektiert (zurückgeworfen). Die Farbe, die Sie von einem Gegenstand wahrnehmen, setzt sich aus diesen reflektiertenstrahlenzusammen(abb.6.1-4).körperfarbennehmensie immer wahr, wenn Sie Gegenstände des Alltags betrachten: Ihre Kleidung, eine Zeitschrift oder die Fliesen auf dem Boden. Wie Sie die Farbe eines Gegenstands wahrnehmen, hängt sehr stark

4 204 6 Farben im Web * von dem einfallenden Licht ab. Daher sehen Kleidung oder Bilder oft bei Sonnenlicht und Kunstlicht ganz unterschiedlich aus. Mit Körperfarben wird im Druckbereich gearbeitet. Abb : Betrachten wir einen Körper, so nehmen wir nur die reflektierten Strahlen des Lichts wahr. Bei einer Fläche, die uns cyanfarben erscheint, wird der rotwellige Anteil des Lichts absorbiert, Blau und Grün werden reflektiert und ergeben im Auge des Betrachters in der Summe Cyan. Primärfarben im Druck Wenn Sie einen Farb-Tintenstrahldrucker besitzen, dann wissen Sie, dass er vier Patronen mit den Farben Cyan, Magenta, Gelb und Schwarz enthält. Die Farben Cyan, Magenta und Gelb sind die Primärfarben im Druckbereich (Abb ). Theoretisch lassen sich alle druckbaren Farben aus diesen drei Primärfarben mischen. In der Praxis wird Schwarz dazugegeben, um dem Druckbild mehr Tiefe zu geben und um reines Schwarz nicht aus den drei Grundfarben mischen zu müssen. Da man beim Druck alle Farben aus den Farben Cyan, Magenta, Gelb (Yellow) und Schwarz (Black) bildet, spricht man von CMYK-Farben. Näheres dazu finden Sie im Kapitel»Farbmodelle«, S Abb : Im Druckbereich sind die Primärfarben Cyan, Gelb (Yellow) und Magenta. Subtraktive Mischung für Körperfarben Das Weglassen bzw. Subtrahieren der Farbe Blau ergibt für den Betrachter die Farbe Gelb. Das Fehlen der Farbe Rot nimmt man als Cyan wahr und das Herausfiltern von Grün als Magenta. Wird keine Farbe subtrahiert, dann entsteht die Farbe Weiß, während die Subtraktion aller Farben Schwarz erzeugt. Bei den Druckfarbensprichtmandahervondersubtraktiven Farbmischung. Im Gegensatz zur additiven Mischung, bei der es darum geht,

5 6.2 Farbmodelle * 205 welche Farben in einer Mischung enthalten sind, ist bei der subtraktiven Mischung von Bedeutung, welche Farben herausgefiltert (subtrahiert) werden bzw. welche reflektiert werden. 6.2 Farbmodelle * Für Bildschirmfarben gibt es mehrere Farbmodelle. Am häufigsten wird wohl das RGB-Farbmodell verwendet. Beim HSB-Farbmodell werden die Farben durch Angabe von Farbton, Sättigung und Helligkeit definiert. Werden Webseiten gedruckt, dann müssen Lichtfarben auf Druckfarben abgebildet werden. Die Drucker verwenden hierfür das CMYK-Farbmodell. Die websicheren Farben bilden eine Palette von 216 Farben, die auf Windowsund Macintosh-Computern gleich dargestellt werden. RGB-Farbmodell Das RGB-Farbmodell ist das Standardmodell für Lichtfarben. Computer-Bildschirme stellen Farben dar, in dem unterschiedliche Mischungen der Farben Rot, Grün und Blau verwendet werden (Abb ). Man spricht daher von RGB-Farben. Abb : Im RGB-Farbmodell setzt sich jedes Bild aus den Farben Rot, Grün und Blau zusammen. Ein reines Rot besitzt 100 % Rotanteile und keinerlei Anteile an den Farben Grün und Blau. Das wird durch den Farbwert (255 R, 0 G, 0 B) ausgedrückt. Die Intensität des Rotanteils wird also durch Werte von 0 bis 255 definiert. Analog besitzt ein reines Grün den Farbwert (0 R, 255 G, 0 B) und ein reines Blau den Farbwert Primärfarben im RGB-Modell

6 206 6 Farben im Web * Farben mischen (0 R, 0 G, 255 B). Die Anteile der Primärfarben werden im RGB- Farbmodell immer in der Reihenfolge Rot-Grün-Blau angegeben. Daher gilt: (x R, y G, z B) = (x,y,z). Durch Mischung der drei Primärfarben entstehen weitere Farben. Da die Rot-, Grün- und Blauanteile jeweils die Werte von 0 bis 255 annehmen können, ergeben sich ca. 16 Millionen darstellbare Farben. Werden jeweils zwei Primärfarben gemischt, dann ergeben sich die Farben der Abb Natürlich lassen sich die Farben auch in beliebigen Verhältnissen mischen, wie beispielsweise in Abb Abb : Durch Mischung der drei Primärfarben entstehen weitere Farben wie Gelb, Magenta und Cyan. Abb : Durch beliebige Mischung der drei Primärfarben entstehen weitere Farben wie Orange, Hellgrau und Lila. Grautöne Farbwerte Reine Grautöne besitzen im RGB-Farbmodell stets gleiche Werte für alle drei Farbanteile, d. h. (x R, x G, x B) mit x= Der»Grauton«(255 R, 255 G, 255 B) entspricht reinem Weiß und der»grauton«(0r,0g,0b)reinemschwarz. Farben werden in Bildbearbeitungsprogrammen oft durch ihre dezimalen RGB-Werte spezifiziert. Bei der Verwendung in HTML und CSS werden Hexadezimal-Codes angegeben. Beispielsweise besitzt die Farbe Rot = (255 R, 0 G, 0 B) den Wert #FF Diese hexadezimalen Werte entstehen dadurch, dass die drei einzelnen Werte des RGB-Codes in das hexadezimale Zahlensystem konvertiert und dann hintereinander geschrieben werden. Die RGB-Werte einer Farbe können alternativ prozentual ausgedrückt werden, wobei der Wert % Farbe entspricht. HSB-Farbmodell Außer durch den RGB-Wert können Farben durch folgende Angaben beschrieben werden:

7 6.2 Farbmodelle * 207 Farbton (hue) Sättigung (saturation) Helligkeit (brightness) Man spricht hier vom HSB-Farbmodell. DasAkronymHSBsteht für hue, saturation und brightness. Dieses Farbmodell wird auch als HSV-Farbmodell bezeichnet. Hier wird für das Akronym anstelle der Helligkeit der Begriff value (Farbwert) verwendet. Der Farbton gibt die eigentliche Farbigkeit einer Farbe wieder, die auf einem Kreis in Grad-Schritten zwischen 0 und 360 Grad gemessen wird. Beispielsweise besitzt die Primärfarbe Rot den Farbton 0 Grad, die Primärfarbe Grün den Farbton 120 Grad und die Primärfarbe Blau den Farbton 240 Grad. Die Sättigung lässt die Farben stärker oder schwächer hervortreten. Sie wird in Werten von 0 % bis 100 % angegeben. Abb zeigt, wie für den Farbton 240 Grad bei konstanter Helligkeit von 100 % die Sättigung in Stufen von 25 % abnimmt. 0 % Sättigung ergibt die Farbe Weiß. Farbton (hue) Sättigung (saturation) Abb : Für den Farbton 240 und die Helligkeit 100 % variiert die Sättigung zwischen 100 % und 0 %. Die Helligkeit beschreibt, wie sehr ein Farbton heller oder dunkler aussehen kann. Sie wird ebenfalls in Werten zwischen 0 % und 100 % definiert. Abb zeigt, wie für den Farbton 240 Grad bei konstanter Sättigung von 100 % die Helligkeit in Stufen von 25 % abnimmt. 0 % Helligkeit ergibt die Farbe Schwarz. Helligkeit (brightness) Abb : Für den Farbton 240 und die Sättigung von 100 % variiert die Helligkeit zwischen 100 und 0 %. Das HSB-Farbmodell ist besonders gut geeignet, wenn man gezielt bestimmte Farben erzeugen will [Pris03]. Abb zeigt, wie man beispielsweise bei dem Bildbearbeitungsprogramm PhotoshopdenFarbton240Gradvariierenkann.Einmöglichstreines Blau erhalten Sie bei hoher Sättigung und hoher Helligkeit (rechts oben). Verringern Sie bei konstanter Sättigung die Helligkeit, dann erhalten Sie ein dunkles Blau, das schließlich in Einsatz des HSB-Modells

8 208 6 Farben im Web * Schwarz übergeht (unterer Rand). Helle Blautöne erhalten Sie bei geringer Sättigung und hoher Helligkeit (links oben). Abb : Die Markierung zeigt 30 % Sättigung und 70 % Helligkeit für den Farbton 240 (Photoshop). Grautöne Verschiedene Monitore Mit abnehmender Sättigung erhalten die Farben einen immer höheren Grauanteil. Man spricht hier von entsättigten Farben. Reine Grautöne erhält man bei einer Sättigung von 0 %. Sie können je nach der Helligkeitsstufe zwischen Weiß (100 % Helligkeit) und Schwarz (0 % Helligkeit) variieren. Reine Grautöne werden auch als ungesättigte Farben bezeichnet. Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm? Wenn ja, dann können Sie diese Übung durchführen: Gehen Sie von der Primärfarbe Rot aus und erstellen Sie dazu einen hellroten Ton, der keine Grautöne enthält. Erstellen Sie für den gleichen Farbton ein helles Graurot. Variieren Sie das reine Rot zu einem Dunkelrot, wobei der Farbton unverändert bleiben soll. Sicher haben Sie schon festgestellt, dass Farben auf verschiedenen Monitoren ganz unterschiedlich wirken können. Wie Farben am Bildschirm angezeigt werden, hängt unter anderem von der verwendeten Grafikkarte im Computer ab. Zusätzlich lassen sich am Bildschirm weitere Einstellungen wie Kontrast und Helligkeit durchführen.

9 6.2 Farbmodelle * 209 CMYK-Farbmodell CMYK ist ein weltweiter Arbeitsstandard in der Druckindustrie. Fast alle Zeitschriften, Zeitungen und Magazine werden im CMYK-Farbmodell gedruckt. Es wird überall dort eingesetzt, wo Farbpigmente im Halbtonverfahren auf Materialien gedruckt werden (Offsetdruck, Siebdruck, Laserfarbdruck, Plotter). Beim CMYK-Farbmodell setzt sich jede Farbe aus Cyan, Magenta, Gelb (Yellow) und Schwarz (Black) zusammen. Theoretisch wäre Schwarz nicht notwendig, denn Cyan, Magenta und Gelb ergeben zusammen die Farbe Schwarz. Beim Vierfarbdruck wird jedoch die Farbe Schwarz dazugemischt, um dem Druckbild mehr Tiefe und Kontraste zu geben und um reines Schwarz nicht aus den drei Primärfarben mischen zu müssen. Daher verwendet ein Farbdrucker die vier Farbpatronen in Cyan, Magenta, Gelb und Schwarz. CMYK-Farben werden durch prozentuale Angaben für die Anteile von Cyan, Magenta, Gelb und Schwarz ausgedrückt. Beispielsweise wird ein Orangeton durch die Farbwerte (5 C, 70 M, 90 Y, 0 K) spezifiziert. Im Allgemeinen variieren die einzelnen Farbanteile vonstufenvon5%oder10%,dagenauereangabeninderpraxis kaum umgesetzt werden können. Abb zeigt CMYK-Farben für einen konstanten Gelbanteil von 90 % und 0 % Schwarzanteil. Die Magenta-Anteile variieren zwischen 0 % und 100 %, die Cyan- Anteile bei diesem Ausschnitt zwischen 0 % und 30 %. Die CMYK- Farbe mit der Nummer 32 besitzt beispielsweise den Wert (10 C, 60 M, 90 Y, 0 K). Druckindustrie CMYK-Farben spezifizieren Abb : Ausschnitt aus einer CMYK-Farbkarte für einen konstanten Gelbanteil von 90 % und 0 % Schwarz.

10 210 6 Farben im Web * Grautöne Webseiten drucken Farbkarten Konvertierung Grautöne lassen sich im CMYK-Modell auf zwei Arten spezifizieren. Sie können einen Grauton durch reines Schwarz definieren, z. B. (0 C, 0 M, 0 Y, 50 K). Nach den Umrechnungsformeln der Bildbearbeitungsprogramme erhalten Sie die gleiche CMYK-Farbe auch durch eine Mischung von Cyan, Magenta, Gelb und ggf. Schwarz. Photoshop errechnet beispielsweise für obigen Grauton den CMYK-Wert (45 C, 36 M, 35 Y, 1 K). Für das Auge können diese Grautöne aber durchaus unterschiedlich aussehen. Wenn Sie eine Webseite auf dem Farbdrucker ausgeben, dann wandelt der Drucker die RGB-Farben automatisch in CMYK-Farben um. Vielleicht haben Sie schon festgestellt, dass die Druckerausgabe ganz anders aussieht als auf dem Bildschirm. Oft wirken Ihre brillianten Bildschirmfarben auf dem Ausdruck relativ matt und blass. Da man beim Bildschirm in eine Lichtquelle schaut, besitzen die Farben in der Regel eine stärkere Leuchtkraft als gedruckte Farben, die nur das im Raum vorhandene Licht reflektieren. Ein weiteres Problem ist, dass beide Farbmodelle einen gewissen Farbumfang haben, der nicht übereinstimmt. Obwohl die neuesten Programme raffinierte Algorithmen besitzen, um RGB-Farben möglichst originalgetreu in CMYK-Farben zu wandeln, gibt es einige Farben, die nicht gedruckt werden können. MansprichtvonCMYK-Farblöchernodernicht-druckbarenFarben. Wenn Sie einen CMYK-Farbwert in einem Bildbearbeitungsprogramm (z. B. Photoshop) einstellen und auf verschiedenen Druckern ausgeben, dann werden Sie vermutlich sehr voneinander abweichende Farbtöne erhalten. Da die verwendeten Tinten und Toner chemische Produkte sind, wird das Ergebnis durch Faktoren wie Temperatur, Lichtempfindlichkeit etc. beeinflusst. Auch die Papiersorte ist zu berücksichtigen. Auf Hochglanzpapier sehen Farben beispielsweise anders aus als auf grauem Papier. Wollen Sie CMYK-Farbwerte exakt bestimmen, dann empfiehlt sich die Verwendung von CMYK-Farbkarten, die mit unterschiedlich großen Farbpaletten erhältlich sind. Einen Ausschnitt aus einer einfachen Farbkarte zeigt Abb Praktischer Einsatz der Farbmodelle Die beschriebenen Farbmodelle sind nebeneinander im Einsatz. HTML-Programmierer verwenden das RBG-Farbmodell. Für den Farbentwurf eignet sich das HSB-Farbmodell am besten. Für den Vierfarbdruck auf dem Drucker werden alle Lichtfarben in den CMYK-Farbraum konvertiert. Farben können zwischen dem RGB- und dem HSB-Farbmodell problemlos konvertiert werden. Beispielsweise kann ein helles Rot durch den RBG-Wert (255 R, 125 G, 127 B), den HSB-Wert

11 6.2 Farbmodelle * 211 (h: 0, s: 50, b: 100) und auch durch den CMYK-Wert (0 C, 64 M, 39 Y, 0 K) beschrieben werden. In vielen Programmen zur Bildbearbeitung ist es möglich, eine Farbe auf mehrere Arten einzustellen. Abb zeigt, wie Photoshop die Farbe (255 R, 127 G, 127 B) in die verschiedenen Farbmodelle umrechnet. Abb : Photoshop zeigt dieselbe Farbe im HSB-, RGB- (dezimal und hexadezimal), LaB- und CMYK-Farbraum an. Die Angabe»LaB«in der Abb steht für das Lab-Farbmodell. Bei Bildern im RGB- oder im CMYK-Farbraum muss das gesamte Bild für jeden Farbkanal (z. B. Rot, Grün und Blau bei RGB- Bildern) dargestellt werden, denn Farb- und Helligkeitsinformationen werden pro Farbkanal zusammen beschrieben. Das Lab- Farbmodell geht hier einen grundsätzlich anderen Weg, indem es Farbinformationen von den Helligkeitsinformationen trennt. L (Luminanz) ist der Helligkeitskeitskanal. Hier wird die eigentliche Zeichnung abgebildet. Der a- und der b-kanal beschreiben nur Farbinformationen. Arbeiten Sie bereits mit einem Bildbearbeitungsprogramm? Wenn ja, dann können Sie diese Übung durchführen: Mit welchen Farbmodellen arbeitet das Programm? Wie werden die Farben von einem Farbmodell in ein anderes konvertiert? Lab-Farbmodell

12 212 6 Farben im Web * 6.3 Die 3 K s der Farbgestaltung * Die 3 K s der Farbgestaltung sind Komplementärfarben, Kontraste und Kombination der Farben. Zur Bestimmung der 3 K s dient der Farbkreis. Je nach beabsichtigtem Effekt können Farben unterschiedlich kombiniert werden, beispielsweise durch Splitten der Komplementärfarbe oder Aufspannen eines gleichseitigen Dreiecks. Farbkreis für Lichtfarben Farbkreis bilden 3K sder Farbgestaltung Eine gute Farbgestaltung macht die Webseiten nicht nur attraktiv, sondern macht es dem Benutzer auch leichter, sich darin zurechtzufinden und die dargestellten Informationen zu erfassen. Ein wirkungsvolles Mittel, um die Konzepte und Begrifflichkeiten der Farbenlehre zu verstehen, ist der Farbkreis. Für die Darstellung auf dem Bildschirm werden die Primärfarben Rot, Grün und Blau verwendet. Aus diesen Farben lassen sich die folgenden Farben»mischen«: Grün (0 R, 255 G, 0 B) und Rot (255 R, 0 G, 0 B) ergeben Gelb (255 R, 255 G, 0 B) Blau (0 R, 0 G, 255 B) und Rot (255 R, 0 G, 0 B) ergeben Magenta (255 R, 0 G, 255 B) Grün (0 R, 255 G, 0 B) und Blau (0 R, 0 G, 255 B) ergeben Cyan (0 R, 255 G, 255 B) Man spricht bei diesen Farben auch von den Sekundärfarben der Lichtfarben. Aus Primär- und Sekundärfarben entsteht dann ein 6-teiliger Farbkreis mit den Farben Gelb, Rot, Magenta, Blau, Cyan und Grün. Werden nun wieder je zwei benachbarte Farben»gemischt«, dann entsteht ein 12-teiliger Farbkreis, in dem das graue Dreieck die drei Primärfarben zeigt (Abb ). Beispielsweise ergeben Gelb (255 R, 255 G, 0 B) & Rot (255 R, 0 G, 0 B) die Farbe Orange (255 R, 127 G, 0 B). Das Mischen der Farben erfolgt nach dem additiven Farbmischverfahren. Durch weiteres Mischen jeweils zweier benachbarter Farben kann der Farbkreis beliebig weiter detailliert werden. Der Farbkreis dient zur Bestimmung der 3 K s der Farbgestaltung. Dies sind [CrCr01]: Komplementärfarben Kontrast Kombination Komplementärfarben Wenn Sie Anzeigen in einer Illustrierte betrachten, dann fallen Ihnen einige eher ins Auge als andere. Der Grund dafür liegt oft

13 6.3 Die 3 K s der Farbgestaltung * 213 Abb : 12-teiliger Farbkreis für Lichtfarben. darin, dass bei diesen Anzeigen Komplementärfarben geschickt eingesetzt wurden. Komplementärfarben liegen sich im Farbkreis genau gegenüber. Beispielsweise ist die Komplementärfarbe von Orange die Farbe Eisblau (Abb ). Ein reines Rot mit dem Wert (255 R, 0 G, 0 B) besitzt beispielsweise die Komplementärfarbe (0 R, 255 G, 255 B). Auf der Website von Thomas Gebhardt ( optik/farben/kfarbe.htm) wird die Möglichkeit angeboten, auf einfache Art zu jeder beliebigen Farbe die Komplementärfarbe berechnen und anzeigen lassen. Komplementärfarbe ermitteln Eine Farbe mit dem Wert (x R, yg, zb) besitzt die Komplementärfarbe ((255-x) R, (255-y) G, (255-z) B.) Was sind Komplementärfarben? Formel Kontrast Komplementärfarben stellen gleichzeitig den höchstmöglichen Farbkontrast dar. Sie erzeugen Spannung und machen ein Bild lebendig. Wenn Sie Orangen vor einem blauen Hintergrund darstellen, dann wird das Bild viel»lebhafter«wirken als beispielsweise vor einem gelben Hintergrund. Kombination der Farben Die Farben einer Website sollen dazu beitragen, dass die Website ein harmonisches Ganzes und nicht eine Sammlung vieler

14 214 6 Farben im Web * Komplement splitten einzelner Elemente bildet. Dabei spielt auch die Zielgruppe eine entscheidende Rolle. Daher ist es wichtig, von vornherein die Farbpalette festzulegen. Die Frage, die sich in der Praxis stellt, lautet: Wie findet man geeignete Farbkombinationen? Eine Kombination von drei Farben erhält man durch Splitten der Komplementärfarbe. Beispielsweise werden anstelle der direkten Komplementärfarbe von Gelb die beiden benachbarten Farben Eisblau und Violett gewählt (Abb ). Eine Kombination mit fünf Farben erhält man, wenn man auf jeder Seite zwei Nachbarfarben des Komplements wählt. Beispielsweise können in der Abb für die Komplementärfarbe zu Gelb (d. h. Blau) die Nachbarbarben Cyan und Eisblau sowie Violett und Magenta mit Gelb kombiniert werden. Abb : Für eine Kombination von drei Farben kann die Komplementärfarbe gesplittet werden. Farbklänge Benachbarte Farben Werden aus dem Farbkreis drei Farben gewählt, die ein gleichseitiges Dreieck aufspannen, dann entstehen Farbkombinationen, die kontrastreich wirken, aber dennoch harmonisch zusammenpassen und ästhetisch angenehm wirken. Es entsteht ein Farb- Dreiklang (Abb ). Analog lässt sich durch Aufspannen eines Quadrats im Farbkreis ein Farb-Vierklang bilden. Farben, die auf dem Farbkreis direkt nebeneinander liegen, werden als benachbarte Farben oder analoge Farben bezeichnet. Werden solche Farben kombiniert, z. B. Gelb, Gelbgrün, Grün, dann entsteht ein harmonischer Gesamteindruck, der beim Betrachter Ruhe und Ausgeglichenheit assoziiert. Es entstehen Farbkombinationen, die auch in der Natur vorkommen können (Gelber Löwenzahn auf einer saftigen grünen Wiese).

15 6.3 Die 3 K s der Farbgestaltung * 215 Abb : Eine Kombination mit 3 Farben ergibt sich durch Bilden eines gleichseitigen Dreiecks im Farbkreis. Die Farben im Farbkreis lassen sich in kalte und warme Farben einteilen, wobei die Farben Grün und Magenta auf der Schnittstelle liegen und als neutral angesehen werden (Abb ). Generell eignen sich die kalten Farben eher als Hintergrundfarben, weil sie optisch mehr zurücktreten. Die warmen Farbtöne sollten dagegen für Texte und Objekte im Vordergrund gewählt werden, weil sie dem Betrachter weiter vorne stehend erscheinen. Warme und kalte Farben Abb : Der Farbkreis enthält je zur Hälfte kalte und warme Farben.

16 216 6 Farben im Web * Erstellen Sie mit Ihrem Bildbearbeitungsprogramm Grafiken, die aus verschiedenen Rechtecken bestehen. Alternativ können Sie in HTML mehrspaltige Tabellen erstellen und die Hintergrundfarben der Zellen entsprechend wählen. Sie müssen dann mit Hexadezimalwerten arbeiten: Wählen Sie zwei Komplementärfarben. Kombinieren Sie drei Farben durch Splitten des Komplements. Bilden Sie einen Farb-Dreiklang. Bilden Sie einen Farb-Vierklang. Kombinieren Sie drei benachbarte Farben. Kombinieren Sie drei warme Farben. Kombinieren Sie drei kalte Farben. Wie wirken diese Farbkombinationen auf Sie? Welche Assoziationen wecken Sie? 6.4 Farb-Psychologie ** Die Wahrnehmung von Farben wird beeinflusst durch biologische, kulturelle und individuelle Grundlagen. Im westlichen Kulturkreis rufen Farben bestimmte Assoziationen hervor, die jedoch mehr oder weniger differieren können. 1 Biologische Grundlagen 2 Kulturelle Grundlagen In vielen Websites werden Farben intensiv eingesetzt. Sie machen eine Website aber nicht nur attraktiver, sondern können auch das Gegenteil bewirken. Oft werden Farben unbewusst wahrgenommen und lösen bei den Betrachtern unterschiedliche Gefühle aus. Diese subjektive Farbwahrnehmung wird beeinflusst durch (vgl. [This00]): 1 Biologische Grundlagen 2 Kulturelle Grundlagen 3 Individuelle Grundlagen Die Farbe Rot wird vom Menschen sehr viel stärker wahrgenommen, weil das Auge etwa doppelt so viele Sehzellen dafür besitzt (ca. 64 %) wie für die Farbe Grün (ca. 34 %). Für die Farbe Blau besitzt das Auge nur ca. 2 % Sehzellen. Daher kann mit der Farbe Rot unabhängig von allen anderen Einflüssen immer eine starke Aufmerksamkeit erreicht werden. Der Kulturkreis, in dem ein Mensch lebt, besitzt ebenfalls einen erheblichen Einfluss. Beispielsweise ist Weiß in der westlichen Kultur die Farbe der Reinheit und Klarheit, während es in Ländern wie Japan und China die Farbe des Todes und der Trauer ist. Im Gegensatz zu klassischen Anwendungen werden Websites rund um den Globus benutzt. Werden Farben ohne Berücksichtigung ihrer Bedeutung in den Kulturkreisen eingesetzt, dann kön-

17 6.4 Farb-Psychologie ** 217 nen sie negative Assoziationen bei den Benutzern der Website hervorrufen. Jeder Mensch hat bewusst oder unbewusst bestimmte Vorlieben und Abneigungen für spezielle Farben. Auch die Moderichtungen können den individuellen Geschmack beeinflussen. In unserem Kulturkreis rufen Farben innerhalb einer gewissen Bandbreite ähnliche Assoziationen hervor. Wie vielfältig diese sein können, zeigt die folgende Aufstellung: Rot ist die Farbe des Feuers. Sie ist die kraftvollste und dominanteste Farbe und eine ideale Signalfarbe, um Aufmerksamkeit zu erregen. Aktivität, Dynamik, Vitalität, Energie, Entschlossenheit Liebe, Kraft, Temperament, Leidenschaft, Aggression Feuer, Gefahr, Warnung, Blut, Wut, Zorn, Brutalität, heiß, Fehler, Stopp Orange ist eine Power-Farbe, die lebendig, aktiv und energiegeladen wirkt. Wärme, Lebhaftigkeit, Ausgelassenheit, Wildheit, Aufgeschlossenheit, Kontaktfreude, Jugendlichkeit, Gesundheit, Selbstvertrauen Aktivität, Aufmerksamkeit, Mut, Spaß, Glück, Optimismus, Lebensfreude herbstlich, Halloween, untergehende Sonne Leichtlebigkeit, Aufdringlichkeit, Ausschweifung, billig und unseriös Gelb ist die Farbe der Sonne, die Licht und Heiterkeit vermittelt. Sonne, Wärme, Helligkeit, Licht Heiterkeit, Freude, Lebhaftigkeit, Verspieltheit, Glück, Optimismus, Freundlichkeit, Hoffnung Wissen, Weisheit, Vernunft, Logik Wert, Gold Vorsicht Schmutzige Gelbtöne: Täuschung, Rachsucht, Pessimismus, Egoismus, Geiz, Neid Grün ist die Farbe der Wiesen und Wälder, die Wachstum, Frische und Hoffnung symbolisiert. Sie wirkt entspannend und beruhigend. Natur, Vegetation, Wachstum, Üppigkeit, Frische, Fruchtbarkeit Ruhe, Ausgeglichenheit, Entspannung, Friedlichkeit, Hoffnung Großzügigkeit, Sicherheit, Harmonie, Erneuerung des Lebens Gift, Neid, Gleichgültigkeit, Stagnation, Müdigkeit 3 Individuelle Grundlagen Farb- Assoziationen

18 218 6 Farben im Web * Unerfahrenheit, Neuheit Cyan (Türkis) ist die Farbe des Meeres an einem sonnigen Tag. Sie wirkt frisch und klar. Großzügigkeit, Wachheit, Bewusstsein, Klarheit, geistige Offenheit, Freiheit Kühle und Distanz, Gefühl der Leere Blau ist die Farbe der Weite (Himmel, Meer) und vermittelt Ruhe und Vertrauen. Himmel, Meer, Unendlichkeit, Weite Ruhe, Vertrauen, Pflichttreue, Schönheit, Sehnsucht Harmonie, Intuition, Ausgeglichenheit, Glaubwürdigkeit Kühle, Passivität, Traumtänzerei, Nachlässigkeit, Melancholie Violett ist eine würdevolle Farbe, die außergewöhnlich und extravagant wirkt. Inspiration, Mystik, Magie, Kunst Außergewöhnlichkeit und Extravaganz Frömmigkeit, Buße, Opferbereitschaft Stolz, Arroganz, Unmoral Magenta (Pink) ist eine sanfte Farbe, die in der Natur hauptsächlich als Blütenfarbe vorkommt. Idealismus, Dankbarkeit, Engagement, Ordnung, Mitgefühl Snobismus, Arroganz, Dominanz Weiß ist in unserer Kultur die Farbe der Reinheit und Klarheit. Reines Weiß kann auch sehr kalt wirken. Reinheit, Klarheit, Ordnung, Sauberkeit Vollkommenheit, Erhabenheit, Unschuld, Authentizität Unnahbarkeit, Empfindsamkeit, kühle Reserviertheit Winter, Kälte, Eis, Schnee Grau ist die Farbe des Himmels an einem trüben Tag. Sie kann für Nüchternheit und Eleganz stehen, aber auch für Langeweile und Trostlosigkeit. Neutralität, Nüchternheit, Vorsicht, Zurückhaltung, Kompromissbereitschaft Theorie, Nachdenklichkeit, Eleganz, Sachlichkeit, Technologie Langeweile, Eintönigkeit, Trostlosigkeit, Elend, Unsicherheit, Lebensangst Bewölkt, Düsterkeit, Alter Schwarz ist in unserer Kultur die Farbe von Trauer und Tod, wirkt aber auch elegant. Eleganz, Würde, Ansehen, Feierlichkeit, Schwere