Griff ins Farbtöpfchen

Farbschemata für die Webseite

Beeindruckend oder dröge - ob, und wie ein Web-Auftritt wirkt, hängt eng mit der Auswahl der richtigen Farben zusammen.

  1. Farbschemata für die Webseite
  2. Teil 2: Farbschemata für die Webseite
Farbschemata für die Webseite

© Archiv

Farbschemata für die Webseite

Farben sind ein wichtiger Bestandteil des visuellen Designs - sie bestimmen in besonderem Maß die ästhetische Qualität der Website und haben unmittelbaren Einfluss auf ihren Gesamterfolg. In der Praxis ist die Farbauswahl aber nicht selten ein Zufallsprodukt aus der Firmenfarbe des Kunden und der kreativen Tagesform des Webdesigners. Dabei lässt sich der Prozess der Farbauswahl durchaus rationalisieren, d.h. er sollte in erster Linie Regeln und nur zuletzt dem Bauchgefühl folgen. Wir stellen Ihnen diese Regeln vor und versorgen Sie mit nützlichen Programmen, dank derer Sie zügig zu stimmigen Farbpaletten gelangen.

Farbsymbolik

Jede Farbe weckt Gefühle, derer Sie sich bei der Zusammenstellung der Farbpalette für ein Webdesign bewusst sein sollten. Das ist schwierig, weil die Zuordnung nicht immer klar, sondern oft sogar widersprüchlich ist: Rot wird beispielsweise nicht nur mit Gefahr assoziiert, sondern auch mit Liebe und Aggression sowie mit Macht in Zusammenhang gebracht.

In der Regel greift ein Webdesign auf mehrere Farben gleichzeitig zurück. Deshalb ist die Beurteilung der Wirkung von Farbkombinationen für den Webdesigner in der Regel wichtiger als die einzelner Farben. Ausgehend von den Firmenfarben des Kunden gilt es, eine Farbkombination zu finden, die Werte und Emotionen vermittelt, welche sowohl zum Webseiten-Inhalt als auch zur Zielgruppe passen.

Bei der Untersuchung der psychologischen Wirkung von Farben hat sich herauskristallisiert, dass Rot, Orange und Gelb zusammen Aktivität und Energie vermitteln, Ehrlichkeit mit Weiß, Blau und Grün und Funktionalität mit Weiß, Grau und Schwarz verbunden wird. Weiß, Gelb und Blau vermitteln Neues, während man Dynamik mit Rot, Blau, Orange in Zusammenhang bringt und Sachlichkeit mit Weiß, Grau und Blau assoziiert. Pastelltöne wirken zurückhaltend und werden vor allem von älteren Menschen bevorzugt, während jüngere Zielgruppen eher gesättigte Farben bevorzugen. Anwendungsbeispiele Auf Basis dieser Beobachtungen haben wir einige beispielhafte Kombinationen aus Website-Themen und passenden Farbkombinationen zusammengestellt. Die das Design dominierende Farbe steht dabei jeweils an erster Stelle:

Farbschemata für die Webseite

  • Technik: Blau, Weiß, Grau/Schwarz oder Weiß, Rot oder Rot, Blau, Grün.
  • Gesundheit: Weiß, Blau, Grün oder Rot, Orange, Gelb oder Weiß, Blau, Gelb.
  • Sport: Blau, Gelb, Rot oder Weiß, Rot, Gelb oder Rot, Blau, Orange.
  • Wirtschaft: Blau, Rot, Grün, Blau, Grün, Weiß oder Blau, Grün, Braun.
  • Kinder und Jugendliche: Rot, Grün, Orange oder Blau, Braun und Grün.
  • Kunst und Kultur: Rot, Blau, Weiß oder Violett, Orange, Grau oder Rot, Orange, Gelb.

Natürlich sind diese Vorschläge nur als Denkansätze zu verstehen und nicht als fixe Vorgaben. Das gilt auch deshalb, weil es auch um die farblich sinnvolle Gestaltung von Bedienelementen geht. Dass die meisten Surfer hinter in blauer Schrift geschriebenen Worten Links vermuten ist nur ein Beispiel dafür.

Eine gute Übersicht zur Bedeutung einzelner Farben und zahlreicher Kombinationen finden Sie online unter . Einen Überblick über Farbsymbolik und -psychologie verschaffen die Wikipedia-Einträge zu den einzelnen Farben.

Farbauswahl

Für die Webdesign-Praxis sind Vorgaben wie Rot, Gelb und Blau zu unspezifisch. Hier sind konkrete, gut zueinanderpassende Farbtöne gefragt - gar nicht so leicht angesichts einer Auswahl von 16,7 Millionen Schattierungen, die Ihnen im Browser zur Verfügung stehen. Was fehlt ist eine Rezeptur, die der Kreativität freien Raum lässt und andererseits weniger farbsichere Designer vor unharmonischen Schnitzern bewahrt.

Farbschemata für die Webseite

© Archiv

Color Wheel Pro zeigt das erstellte Farbschema in Form einer exemplarischen Website an.

An Theorien zur Farbharmonie haben sich von da Vinci über Newton und Goethe bis zu Itten zahllose große Geister mit ganz unterschiedlichen Ergebnissen versucht. Doch statt deren Theorien zu pauken, greifen Sie besser auf die folgenden Programme und Web-Anwendungen zurück. Diese berücksichtigen die elementaren Harmonie-Regeln automatisch und erleichtern Ihnen so das Finden stimmiger Farbkombinationen.

Adobe Kuler

Adobe hat mit Kuler das derzeit wohl wichtigste Werkzeug zur Farbauswahl entwickelt. Die nach kostenloser Registrierung unter frei zugängliche Flash-Applikation geht von einer vorgegebenen Farbe aus und erstellt über verschiedene Kombinationsregeln eine stimmige Farbpalette. Diese verändern Sie nach Bedarf über einfache Schieberegler und kopieren anschließend die sinnigerweise im Hex-Format ausgegebenen Farbwerte direkt in Ihre Design-Anwendung.

Neuerdings akzeptiert Kuler auch Bilder als Grundlage für seine Farbvorschläge. Dabei laden Sie beispielsweise ein Foto hoch und entnehmen anschließend über eine Farbpipette bis zu fünf Proben. Alternativ pickt Kuler selbstständig Farbvorschläge in Abhängigkeit von einer ausgewählten Grundstimmung aus dem Bild heraus. Speichern Sie das Schema nun, können Sie es später unter Mykuler aufrufen, um es weiter zu bearbeiten. In der angeschlossenen Community können eigene Farbschemata mit Stichworten versehen veröffentlicht und die Kreationen der Mitglieder bewertet werden.

Illustrator & Dreamweaver

Adobe Illustrator CS3 beinhaltet mit der Palette "Farbhilfe" die Kuler-Technik. Alternativ importiert Illustrator auch von Kuler exportierte Swatch-Exchange- Dateien (.ase). Diese lassen sich wie eine Farbpalette benutzen und stellen sicher, dass Sie nur aus der Kuler-Palette stammende Farben verwenden. Der englischsprachigen Version von Illustrator vorbehalten bleibt ein Menüpunkt, über den Sie direkt aus der Adobe-Anwendung auf Kuler zugreifen können, ganz ohne den Umweg über die Swatch-Datei.

Mit den Dreamweaver Tools for Kuler existiert ein Plug-in für Adobes Webdesign-Anwendung, die Kuler über ein Bedienfeld in Dreamweaver 8 und CS 3 integriert. Das Plug-in stammt von Webassist Professional und wird für Windows und Mac OS X kostenlos unter abgegeben.

ColorTheory Pro

Adobe Photoshop wird gerne zur Entwicklung neuer Webdesigns genutzt, doch selbst in der aktuellen Version CS3 bietet das teure Programm keine Hilfe bei der Erstellung von Farbpaletten an. Diese Lücke schließt das Plug-in Colortheory Pro von Digitalanarchy. Nach der Installation steht es im Filter-Menü bereit und ergänzt die fehlende Paletten-Generierung.

Colortheory Pro erlaubt die Festlegung von bis zu drei Basisfarben. Das ist vor allem dann nützlich, wenn Sie sich mit dem Kunden gleich auf mehrere Farben verständigt haben, die in der Website vorkommen sollen. Mit Pipetten lassen sich diese Farben z.B. aus einem Bild extrahieren oder im Farbkreis aussuchen. Zur besseren Beurteilung des Farbschemas bietet Colortheory Pro mehrere Muster wie Kreise, Quadrate und Streifen an. Die Ergänzungsfarben lassen sich nach 25 Farbformeln ermitteln - damit deklassiert das Programm die Konkurrenz, die meist nur eine Handvoll bietet.

Ein Manko hat das Plug-in: Leider gibt es keine Möglichkeit, die Farben direkt in die Paletten von Photoshop zu übernehmen. Stattdessen will das Farbschema als Bilddatei abgespeichert und manuell über die Pipette in die Photoshop-Palette übernommen werden. Colortheory Pro arbeitet neben Photoshop auch mit Illustrator zusammen und ist für Windows und Mac OS X erhältlich. Eine kostenlose Testversion für zehn Tage steht online unter bereit.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".