Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Grundlagen der Farbgestaltung

zur Startseite
zurück Inhaltsübersicht weiter

 

Inhalt

Licht und Farben
Grundlagen der Farbentheorie
Grundlagen der Farbgestaltung
Grundlagen der Farbwirkungen
Layout und Farbe
Farben im Webdesign
Zusammenfassung
Quellen
 

Licht und Farben

Jede Farbenlehre ist ein Versuch, die sehr subjektive Farbempfindung so weit wie möglich zu objektivieren. Es ist deshalb nicht verwunderlich, dass es so sehr unterschiedliche Farbentheorien gibt.

Farbenuntersuchungen gehören zu den schönsten Gebieten der Wissenschaft. Hier berühren sich Naturwissenschaft, Geisteswissenschaft und Kunst.

Goethe war am Ende seines Lebens mehr stolz auf seine Farbenlehre als auf seinen Faust.

Die schwarzen Pixel auf einem Bildschirms sind nichts anderes als das helle Grau des ausgeschalteten Monitors bzw. Displays.

Was sind die weißen Stellen eines Aquarells in einem schattigen Innenraum gegen die Helligkeit hinter den Fensterscheiben?

Und nun erst die Farben: Wie blaustichg wirkt das Tageslicht, das in einen mit Lampen erhellten Inneraum dringt und wie gelb wirkt dieses Lampenlicht, wenn man es von draußen durch ein Fenster sieht.

Wie schnell gewöhnt sich das Auge andererseits an die unterschiedlichen Beleuchtungen, so dass wir meinen, die Farben stets richtig beurteilen zu können, egal welche Lichtquelle uns zur Verfügung steht.

zum Anfang

Grundlagen der Farbentheorie

Es gibt sehr viele Ansätze zur Farbenlehre und noch mehr verschieden Farbringe, Farbkreise, Farbdreiecke, Farbkugeln usw. Ich will dieser Menge keine neue Theorie hinzufügen. Ich will nur ein paar zusammenfassende Überlegungen zur praxisorientierten Farbenlehre vorstellen.
zum Anfang

Grundlagen der Farbgestaltung

Hier steht was.
zum Anfang

Grundlagen der Farbwirkungen

Die Auswahl der Farben ist von entscheidender Bedeutung für die beim Besucher der WebSite erzeugte Reaktion. Dabei sind geschlechtsspezifische und regionale kulturelle Besonderheiten zu beachten.
 
  Kraft, Energie, Liebe, Wärme, Leidenschaft, Aggression, Gefahr

Rot gilt in China als Symbol für Festlichkeit und Glück.
 
  Vertrauen, Konservativ, Sicherheit, Technologie, Sauberkeit, Kummer, Ordnung

Blau gilt in China als Farbe der Unsterblichkeit, fü Juden der Heiligkeit, für Krishna im Hinduismus. Blau ist die unbedenklichste globale Farbe.
 
  Natur, Erde, Gesundheit, Glück, Eifersucht, Erneuerung, Geld

Grü gilt in den USA für Geld. Es wirkt beruhigend und antidepressiv.
 
  Optimismus, Freude, Glück, Hoffnung, Philosophie, Unehrlichkeit, Feigheit, Betrug

Gelb gilt in asiatischen Ländern als Symbol für Heiligkeit und Herrschaft. Frauen reagieren häufig sehr positiv auf Gelbtöne.
 
  Spiritualität, Geheimnis, Königlich, Grausamkeit, Arroganz, Homosexualität

Violett gibt es kaum in der Natur. Die Farbe steht für Trauer und Religion.
 
  Energie, Balance, Wärme

Orange gilt in den USA als billig.
 
  Erde, Zuverlässigkeit, Komfort, Ausdauer

Braun gilt als neutral und wird mit Natur in Verbindung gebracht.
 
  Intellekt, Futurismus, Eleganz (Silber), Bescheidenheit, Traurigkeit, Zerfall

Grau wird als neutralisierende Farbe verwendet und kann diskret elegant wirken.
 
  Reinheit, Heiligkeit, Sauberkeit, Präzision, Unschuld, Sterilität, Tod

Weiß ist für Kontraste sehr notwendig.
 
  Macht, Sexualität, Eleganz, Geheimnis, Angst, Traurigkeit, Tod

Schwarz ist für Kontraste sehr notwendig.
zum Anfang

Layout und Farbe

Hier steht was.
zum Anfang

Farben im Webdesign

Als Werte für Attribute wie "color" oder "bgcolor" kann man englische Farbnamen oder die 6-stellige hexadezimale Farbnummer mit vorangestellter Raute verwenden, wobei die ersten beiden Ziffern den Rot-Wert, die mittleren beiden Ziffern den Grün-Wert und die letzten beiden Ziffern den Blau-Wert festlegen. Color="#000000" ist somit Schwarz, color="#FF0000" ist Rot, color="#00FF00" ist Grün, color="#0000FF" ist Blau und color="#FFFFFF" ist Weiß.

Farbwähler (Achtung, beim Safari-Browser werden die RGB-Werte nicht angezeigt.)

Diese Farben werden allerdings auf unterschiedlichen Systemen je nach Hardware, Betriebssystem und Browser nicht gleich dargestellt. Deshalb sollte man sich auf die 216 Farben der Web-sicheren Palette beschränken. Es gibt sogar Tests, nach denen nur 125 oder gar nur 22 Farben wirklich sicher sind. Als Faustregel kann man sich einprägen, dass die Farbangaben nur aus den Ziffernpaaren 00, 33, 66, 99, CC und FF gebildet werden sollten. Dann erreicht man weitgehend auf allen modernen Plattformen die gewünschte Farbwirkung.

#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF


zum Anfang

Zusammenfassung

Farben-Checkliste
zum Anfang

Quellen

Molly E. Holzschlag; Farbe für Websites; rororo computer 2002, ISBN 3-499-61210-0
zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht