MX Magazin Übersicht
Grundlagen Farben im Web
Dirk Behlau
Farbgestaltung im Web So manche Website treibt einem mit wilden Farbkombinationen die Tränen in die Augen. Farben besitzen eine Aussagekraft, die man bei der Gestaltung unbedingt beachten sollte. Dabei ist nicht jedes Bildformat für jede Farbe geeignet. MX Magazin gibt Ihnen einen Überblick im Farb- und Formatdschungel. Versucht man sich der Farbe an sich zu nähern, muss man sich mit der Funktions- und Wirkungsweise von Farben auseinander setzen. Zunächst einmal ist eine Farbe ein Sinneseindruck, den wir Menschen haben, wenn Licht einer bestimmten Wellenlänge oder eines Wellenlängengemisches auf die Netzhaut unseres Auges fällt. Farbe ist also eine Sinnesempfindung und keine physikalische Eigenschaft eines Körpers. Ausgelöst wird diese Sinnesempfindung durch elektromagnetische Wellen, die von selbstleuchtenden oder beleuchteten Körpern ins Auge gelangen und hier von speziellen Sinneszellen in eine Nervenerregung umgewandelt werden. Diese Nervenerregung setzt unser Gehirn als jeweilige Farbe um. Der Farbeindruck setzt somit funktionsf ähige Sinneszellen in einem lebenden Organismus voraus – ohne diese biologischen Voraussetzungen würde der Begriff der Farbe nicht existieren.
dell und mit dem CMYK-Farbmodell. Das RGB-Farbmodell ist die Grundlage für nur am Monitor verwendete Grafiken. Das CMYK-Farbmodell ist hingegen die Grundlage für die Erstellung von Grafiken, die für Druckerzeugnisse wie Prospekte oder Zeitschriften bestimmt sind. Fallen im Druck für jede zusätzliche Farbe Extrakosten an, kostet eine Farbe am Monitor nichts. Dies erklärt vielleicht die oftmals kunterbunte Gestaltung im Web. Beide Modelle basieren auf unterschiedlichen technischen Voraussetzungen und entsprechend unterschiedlich bilden sie die darzustellenden Farben.
ten – die Addition dieser drei Farben ergibt einen Lichtpunkt (= Pixel), die kleinste digitale Bilddarstellungseinheit, die ihre Entsprechung am Bildschirm findet. Leuchten alle drei Farben mit ihrer höchsten Intensität, erzeugt das zusammen die Farbe Weiß. Die Farbe Schwarz entsteht, wenn kein Leuchten vorhanden ist.
CMYK. Beim Druckverfahren verwendet man das CMYK-Farbmodell, (CMYK = Cyan, Magenta, Yellow, Key [Schwarz]) das im Gegensatz zu RGB auf dem so genannten subtraktiven Farbsystem basiert. Im Druck werden alle Farben aus den vier oben RGB. Das RGB-Farbmodell basiert genannten zusammengemischt. Diese auf dem additiven Farbsystem, in dem Farben nennt man auch Körperfarben: die Farben aus so genannten Lichtfar- Grundlegend ist dabei die Überlegung, ben zusammengesetzt werden. Dieses dass Körper einen Teil des auf sie fallenSystem basiert auf der Überlegung, den Lichts absorbieren, einen anderen dass Licht, wenn es durch ein Prisma Teil reflektieren. Sichtbar sind für uns fällt, in unzählige Farbnuancen zerlegt somit nur die Farben, die der Körper wird, die durch Addition wieder wei- nicht absorbiert. Entsprechend werden Farbmodelle. Grafiker hantieren in ßes Licht ergeben würden. Dieses weiße im subtraktiven Farbsystem die Farben der Regel täglich mindestens mit zwei Licht lässt sich durch die Kombination subtrahiert, die der Körper absorbiert, Farbmodellen: mit dem RGB-Farbmo- der Grundfarben Rot, Grün und Blau die anderen können wir sehen. Mischt (RGB) erzeugen. Am Monitor passiert man alle Farben des CMYK-FarbmoWebCode DS0430 folgendes: Jede Farbe entsteht aus drei dells zusammen, erhält man Schwarz einzelnen leuchtenden kleinen Punk- statt Weiß wie im RGB-Farbmodell.
30
MX Magazin
30_33_mx_04_farben_im_web.indd
Ausgabe 4/2004
30
03.02.2004, 12:55
MX Magazin Farben im Web Grundlagen
MX Magazin
HSB-Farbmodell. Eine Farbe lässt
sich auch über die Helligkeit, Sättigung und den Farbton definieren. Diese andere Form der Farbdarstellung beruht auf dem HSB-Farbmodell (Hue = Farbton, Saturation = Sättigung, Brightness = Helligkeit). Die meisten Grafikprogramme wie Fireworks oder Photoshop besitzen entsprechende Befehle zur Farbsteuerung mit diesen drei Komponenten. Web-Farben. Wer Grafiken und Designs für das Internet oder für die reine Monitordarstellung entwickelt, sieht sich mit der Frage konfrontiert, wie viele Farben ein Computermonitor überhaupt darstellen kann. Ebenso kommt die Leistungsf ähigkeit des jeweiligen Browsers ins Spiel – nicht alle Browser behandeln Bildformate auf dieselbe Weise. Um möglichst auf allen Systemen und in allen Browsern eine übereinstimmende Darstellung zu erreichen, wurden die websicheren Farben als minimalster Nenner entwickelt. Diese 216 Farben, ursprünglich von der Firma Netscape für ihren Browser definiert, waren Farben, die sowohl Windows als auch der Mac mit 256 Farben darstellen konnten. Mittlerweile sind websichere Farben am Computer veraltet, da halbwegs moderne Rechner erheblich mehr als nur diese 256 Farben darstellen können – eine Farbtiefe von 32 Bit gilt bei modernen Grafikkarten inzwischen als Standard. Wer allerdings für mobile Devices wie Handys oder PDAs gestaltet, ist sehr wohl in der Farbgestaltung eingeschränkt, da viele Endgeräte nur über eine eingeschränkte Farbdarstellung verfügen.
Farbformate: In Bildbearbeitungsprogrammen wie Fireworks lassen sich Grafiken in unterschiedlichen Bildformaten wie JPEG, GIF oder PNG speichern.
Animationskünstler: Das GIF-Format. Das Graphics Interchange Format
(GIF) wurde schon vor vielen Jahren vom Online-Anbieter CompuServe eingeführt. Die erste Variante GIF 87 unterstützte keine Transparenz, dies ermöglichte erst das Format GIF 89a. Das GIF-Format verwendet eine verlustfreie Kompression und bietet die Möglichkeit, transparente Bereiche zu definieren. Bei der Anzeige im Webbrowser scheinen dann Elemente, die unterhalb der Grafik liegen (beispielsweise ein Hintergrundbild), an den Stellen durch, an denen die Grafik transparent ist. Das JPEG-Format bietet diese Funktion nicht. Weiterhin lässt sich eine GIF-Datei „interlaced“ abspeichern – der Browser liest sie beim Laden nicht zeilenweise ein, Debeka: Blau ist häufig Bestandteil von Versicherungs- und Banken-Websites.
sondern schichtweise. So erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders, erst mit fortschreitendem Ladevorgang wird die Grafik dann deutlicher und feiner aufgelöst am Bildschirm angezeigt. Das GIF-Format bietet zudem die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern. Dies ermöglicht Animationen, die häufig auf unzähligen Websites als mehr oder weniger aufdringliche Bannerwerbung ihren Einsatz finden. Das GIF-Format verwendet man hauptsächlich für kleine Grafiken wie Buttons, Menüs, Logos oder Symbole - für die Darstellung von Fotos ist es ungeeignet, da dort vorkommende Farbverläufe nur in 256 Farben darstellbar sind und somit nicht realistisch wirken. Experte für Fotos: JPEG. JPEG steht für Joint Photographic Expert Group und kennzeichnet die Korporation, die das Format entwickelt hat. Das JPEGVerfahren ist ein Kompressionsalgorithmus für Datenströme. Das gleichnamige Dateiformat für Grafiken ist einfach eine Anwendung dieses Algorithmus auf Pixelgrafiken. Das JPEG-Grafikformat hat gegenüber dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Es arbeitet nicht wie das GIF-Format mit Farbpaletten bestimmter Farben, sondern mit dem gesamten Farbspektrum. Der Nachteil bei JPEG ist, dass es MX Magazin
30_33_mx_04_farben_im_web.indd
31
03.02.2004, 12:55
Ausgabe 4/2004
31
MX Magazin Übersicht
Grundlagen Farben im Web
mit Verlust komprimiert. Je höher der Kompressionsfaktor, desto schlechter die Qualität der Grafik. Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farbübergängen im Bild, also bei Ecken und Kanten von abgebildeten Gegenständen. Hier „fransen“ häufig die Ränder aus. Für Bilder mit wenigen Farben und klaren Konturen, also beispielsweise für Zeichnungen, scharfe Schriftzüge usw. ist das JPEG-Format nicht geeignet. Seine Stärke zeigt das Format bei Fotos und anderen Grafiken, in denen sehr feine Farbverläufe vorkommen. Bei der Arbeit mit JPEG-Bildern ist Vorsicht geboten, da bei jedem erneuten Speichern eines JPEGs weitere Kompressionsartefakte entstehen. Der Nachfolger JPEG 2000 vermeidet Artefakte, bietet mehr Features und eine bessere Kompression, allerdings gibt es weder in Fireworks MX 2004 noch in Photoshop 7 bislang die Möglichkeit, Dateien im JPEG 2000-Format zu generieren. Adobe bietet dazu wenigstens ein kostenpflichtiges Plugin.
Yellowstrom: Einen frischen und dynamischen Auftritt erzielt der Stromlieferant durch einen freundlichen Gelbton.
ist sehr interessant – es verwendet eine verlustfreie Kompression für Echtfarbbilder mit bis zu 48 Bit pro Bildpunkt (16 Bit pro Farbkanal) und bietet dabei unter anderem den Einsatz von transparenten Bereichen – somit vereint es Vorteile der beiden Formate GIF und JPEG. Leider funktioniert PNG noch immer nicht zu 100 Prozent in allen Browsern. Im Gegensatz zum GIF-Format ist es nicht animierbar, hier sollte eigentlich das Farbformat MNG (Multiple-image Network GraPNG. Bei PNG (Portable Network phics, siehe www.libpng.org/pub/mng/) Graphic (ausgesprochen: PING) han- Abhilfe schaffen, jedoch befindet sich delt es sich um ein eigens für das Web dieses Format immer noch in der Entkonzipiertes Grafikformat. Das Format wicklung.
Farbwirkung. Als „normaler“ Webde-
signer muss man sich heutzutage um die technischen Möglichkeiten keine großen Sorgen machen. Im Prinzip kann man aus der ganzen RGB-Farbpalette schöpfen. Trotzdem sollte man bei der Auswahl der Farben höchst umsichtig sein, da jede Farbe unbewusst eine bestimmte Wirkung beim Betrachter hervorruft. Falsch ausgewählte Farben können im schlimmsten Falle das Image der zu transportierenden Marke schädigen bzw. das Unternehmen in einem nicht gewollten Licht erscheinen lassen. Beispielsweise hat der Einsatz von ungesättigten Pastellfarben den Vorteil, dass sie unaufdringlich und zugleich
More Info
Farbsymbolik Jede Farbe hat ihre eigene ganz bestimmte Wirkung auf den Betrachter. Sie erzeugt Stimmungen und weckt bestimmte Assoziationen – nicht umsonst gibt es Redensarten wie „ins Blaue fahren“, „sich schwarz ärgern“ oder „rotsehen“. Blau
Blau ist mit Abstand die beliebteste Farbe der Deutschen und wird mit vielen positiven Eigenschaften assoziiert: Sympathie, Harmonie, Vertrauen, Freundschaft. Blau ist die Farbe der Ferne, der Weite und der Unendlichkeit und wirkt still und entspannend. Mit Blau lässt sich eine seriöse und Vertrauen erweckende Stimmung auf der Website erzeugen. Deshalb kommt sie bei vielen Banken und Versicherungen auf der Website zum Einsatz. Allerdings steht Blau auch für Kälte, Passivität und Distanz.
32
MX Magazin
30_33_mx_04_farben_im_web.indd
Rot
Rot ist die kraftvollste und dominanteste Farbe. Sie steht für Leidenschaft, Energie, Leben, Vitalität, Liebe, Aufregung, Impulsivität. Zudem steht sie für Gefahr, Aggressivität und Zorn. Grün
Die Farbe der Natur und des Lebens. Frühling, Hoffnung, beginnende Liebe. Die herbe Frische: frisch, herb, sauer, bitter. Gesund, aber auch unreif („grün hinter den Ohren“). Schwarz
Schwarz ruft häufig negative Gefühle hervor: Trauer, Einsamkeit (allerdings nur in ganz bestimmten Kulturen, zum Beispiel der europäischen). Ebenso steht Schwarz für Eleganz ohne Risiko und wirkt modern, sachlich, eindeutig und funktional. Schwarz polarisiert dabei: Bei vielen Menschen ist Schwarz sehr beliebt, bei anderen stößt die Farbe auf strikte Ablehnung.
Rosa
Rosa wirkt zärtlich, zart, kindlich, süß, allerdings ebenso kitschig. Gelb
Mit Gelb bringt man häufig Sonne, Licht und Wärme oder das Glück in Verbindung. Ebenso jedoch auch Eifersucht, Neid und Feigheit. Weiß
Weiß wirkt vollkommen, ideal, gut, sachlich, klar, unschuldig und ehrlich. Violett
Violett steht für Magie, das Geheimnis, die Dekadenz und die Zweideutigkeit sowie beispielsweise für den Feminismus oder die Trauer. Grau
Grau wirkt zumeist neutral, elegant oder langweilig, trostlos und gefühllos. Silber
Silber wirkt eher kühl, gediegen und edel und dabei nicht so verbraucht wie Gold.
Ausgabe 4/2004
32
03.02.2004, 12:55
MX Magazin Farben im Web Grundlagen
MX Magazin
freundlich wirken. Farbige Elemente lassen sich damit besser hervorheben. Kalte Farben wie Blau wirken dezent, womit sie sich sehr gut als Hintergrundfarben eignen. Warme Farben wie Orange wirken lebendig, können von Besucher aber als dominant und „laut“ wahrgenommen werden. Zudem ist die Wirkung von Farben weltweit alles andere als eindeutig – Asiaten bringen Weiß als Unglücksfarbe mit Tod und Trauer in Verbindung, während die Farbe in Deutschland für Reinheit steht. Bei der Auswahl der Farben ist es außerdem wichtig, auf den bestmöglichen Kontrast zu achten - vor allem Texte müssen gut lesbar bleiben. Farbauswahl bei der Sitegestaltung. Bei der Gestaltung von Websites
bestimmt vor allem das Corporate Design des Unternehmens die Farbauswahl. Mittels der bereits vorhandenen Farbgrundlagen kann der Designer die Außenwirkung des Unternehmens gezielt steuern. Ein weiterer Orientierungspunkt für die Farbauswahl eines Webdesigns bzw. Redesigns sind bereits vorhandene Produkt- bzw. Imagebroschüren, Hauszeitungen und sonstige Geschäftspapiere. Ein guter Ansatz für die Farbauswahl zu Beginn eines Design ist das Logo einer Firma. Besteht es zum Beispiel aus den Farben Rot und Schwarz, können diese Farben die Grundlage bei der Gestaltung der Site bilden. Ein edles und hochwertiges Bild eines Unternehmens entsteht im Regelfall durch die Verwendung von Schwarz als Grundfarbe der Site. Besser wäre es jedoch, alternativ diese beiden Farben sparsam zu verwenden und die Website durch viel Weißraum aufzulockern. Bitte beachten Sie: Häufig verwenden größeren Firmen im Logo Sonderfarben im Pantone- bzw. HKS-Farbraum, die am Bildschirm nicht 1:1 wiedergegeben werden können. Zwar lassen sich diese Farben in verschiedene Farbräume umrechnen: In den wenigsten Fällen entsprechen sie jedoch exakt den Vorgaben des Unternehmens-Styleguide.
More Info
Tools Zur Auswahl der richtigen Farbkombination gibt es eine Reihe kostenloser und kostenpflichtiger Werkzeuge. ColorMatch 5K
Eines der effektivsten Werkzeuge ist das kostenlose Online-Tool ColorMatch 5K von Intravenous (www.colormatch.dk). Hier lassen sich drei Farbschieberegler im RGBModus einzeln bzw. nacheinander verschieben, wobei die Website eine 6-Colour Matching Palette generiert. Ein Klick auf eine der ausgewählten Farben verändert ebenfalls den Farbraum. Praktisch: Die Site zeigt die entsprechenden Hexadezimalwerte unter der jeweiligen Farbpalette an – diese lassen sich nun einfach per Copy & Paste in Grafikprogrammen weiter verwenden. Von ColorMatch gibt es diverse Derivate, zum Beispiel ColorMatch Remix (www.twysted.net/ colormatch.php).
Diese Variante zeigt zusätzlich die RGB-Werte an und ermöglicht den Export als Photoshop-Farbtabelle. Ein ähnliches Online-Tool ist komplett in Flash realisiert: ColorToy erzeugt wahlweise Random-Farbschemata (defencemechanism.com/color/color_ toy_fr.htm). Color Schemer
24,99 US-Dollar kostet die Vollversion des Color Schemer (www.colorschemer.com), mit dem sich Farbschemata erstellen lassen. Alternativ bietet die Website Tigercolor (www.tigercolor.com) die Software ColorImpact für 45 US-Dollar an. Hier fallen insbesondere die Exportfunktionen als CCS oder als Photoshop-Palette ins Auge. Beide Tools gibt es als 14-TageTest-Versionen – allerdings nur für die Windows-Welt. Eine kostenlose Lösung für MacOSX gibt es mit dem ColorDesigner (http://macosx.narcissisme.dk).
Tools: Harmonische Farbschemata in Windeseile erzeugt.
ten Anwender ihren Monitor korrekt kalibriert haben, führt dies zu unterschiedlichen Helligkeits- und Kontrasteinstellungen – Farben erscheinen so an jedem Rechner mehr oder weniger unterschiedlich. Außerdem gibt es Darstellungsunterschiede bei Röhrenmonitoren und TFT-Bildschirmen. Als ob das nicht schon problematisch genug wäre, kommen zudem unterschiedliche Farbdarstellungen auf dem PC und dem Macintosh hinzu. Grund: Auf dem Mac-Betriebssystem wird das Bild am Fazit. Die richtige Farbauswahl ist Monitor dank des „QuickDraw“ heller eine der Grundvoraussetzungen für dargestellt als an einem PC (unabhänein gelungenes Design. Gegen manche gig vom Monitor selbst). So bleibt ein Bedingungen kommt jedoch kein De- Frustpotenzial: Abhilfe schaffen nur signer an. Da in der Regel die wenigs- ausgiebige Tests auf allen Systemen.
Autor Dirk Behlau Dirk Behlau arbeitet als Grafikdesigner in Köln. Seit 1996 gestaltete er mehr als 100 BusinessWebsites für Kunden in Deutschland, England, Kanada und USA. Zu seinem Portfolio gehören unter anderem Kundenmagazine, CDROMs, Banner Ads, Logo-Design und Fotografie. Freie Projekte sind das Visual Design & Lifestyle PDF Magazin Sceyelines (www.sceyelines.net), das Digitales Buch & Game Review Magazin, Designbooks (www.designbooks.net) und die Videospielsite Space Invaders Shrine (www.spaceinvaders.de).
Web: www.pixeleye.net
MX Magazin
30_33_mx_04_farben_im_web.indd
33
03.02.2004, 12:55
Ausgabe 4/2004
33