„So entwirfst du ganz einfach eine Farbpalette für Deine Webseite“ lautet der Titel einer übersichtlichen und umfassenden Einführung ins Thema Farbgestaltung, ein Artikel des Webdesigners, Dozenten und Fachbuchautoren Martin Hahn. Ob es tatsächlich so einfach ist, eine stimmige  Farbpalette für unsere Webseite zu entwickeln?

Dies bekommen wir nur durch „Tun“ heraus- im „Learning by Doing“. Die Farbpalette bestimmt wesentlich das „Look and Feel“ einer Seite und dieses sollte zum Inhalt passen und seine Aussagen quasi „intuitiv“ unterstützen. [siehe Blogartikel vom selben Autor: Psychologische Farbwirkung].

Hahn legt zunächst vier funktionale Farbtöne fest:

• die Hintergrundfarbe
• die Basisfarbe
• die Textfarbe
• die Aktzentfarbe

Aus diesen vier Farbtönen lassen sich durch Aufhellen mit Weiß, Abdunkeln mit Schwarz oder Entsättigen mit einem mittleren Grauton weitere Nuancen und Farbreihen hinzufügen.

Hintergrundfarbe / Farbklima des Hintergrundbildes

Die Hintergrundfarbe soll auch optisch im Hintergrund sein. Das funktioniert am besten mit einem dezenten, hellen Ton, der sich an den Farben des Himmels orientiert: helles Grau, helles Blau, Pastelltöne oder stark entsättigte (vergraute) Farbtöne. Im dunklen Farbbereich wählt man ein dunkles Grau, dunkles Blau oder dunkle, stark entsättigte Farbtöne. Die meisten Webseiten halten sich an diese Regel. Bricht man die Regel jedoch, so muss man sich im Klaren sein, dass der Hintergrund sehr viel Aufmerksamkeit auf sich zieht. Es ist dann zu überlegen, wie der Inhalt der Seite dennoch gut lesbar bleibt und angemessen zur Geltung kommt. [Beispiel]

Basisfarbe

Die Basisfarbe steht in einem bewusst gewählten Kontrast zur Hintergrundfarbe. In der Basisfarbe ist zum Beispiel das Logo oder Markenzeichen eines Auftritts gestaltet, wichtige Navigationselemente oder betonte Textelemente. Gibt es ein Corporate Design, ist sie hier bereits festgelegt worden. Die Basisfarbe ist eher gediegen und schafft das Umfeld, aus dem eine Akzentfarbe hervorsticht.

Textfarbe

Text braucht ausreichend Helligkeitskontrast für gute Lesbarkeit. Ist der Kontrast zu stark, stören allerdings sogenannte „Nachbilder“ auf der Netzhaut die Lesbarkeit. Für einzelne Wörter, Überschriften oder Navigationselemente wird als Textfarbe gerne die Basisfarbe eingesetzt. Je nach Kontrast und Wirkung werden für Fließtexte eher Schwarz, Weiß oder eine Grauabstufung gewählt.

Akzentfarbe

Akzente sollen die Aufmerksamkeit des Betrachters ganz besonders auf sich ziehen. Dies geschieht am besten über einen kräftigen Rotton oder andere, besonders intensive, leuchtkräftige Farben auf relativ kleinen Flächen. Die Akzentfarbe kontrastiert stark zur Hintergrundfarbe und zur Basisfarbe. Sie setzt Schwer-„Punkte“. Akzentfarben sind markant, bleiben idealerweise gut im Gedächtnis und sind daher unbedingt im Corporate Design festzulegen.

Wie finden wir das passende Farbklima?

DesignerInnen orientieren sich gerne am Vorbild der Natur: Vögel, Schmetterlinge oder Pflanzen bieten interessante Farbkonzepte. [Beispiele: Rotkehlchen, Blauer Admiral, Weiße Orchideen] Oft gibt es bereits ein Corporate Design oder ein Markenzeichen, aus welchem das Farbklima entnommen werden kann. Nicht zuletzt kann ein Farbklima auch intuitiv aus wichtigen inhaltlichen Aussagen entwicklet werden, unter Berücksichtigung der psychologischen Wirkung von Farben.

Weitere Gedanken zum Thema

Vasilis Baimas hat aber einen netten flatuicolorpicker ins Netz gestellt.
Für die Farbigkeit von Hintergrundbildern und bewegten Hintergrundbildern gelten im Grunde genau die selben Regeln wie für Hintergrundfarben. Möchte man mit aussagekräftigen Fotos gestalten, so kommen diese zusammen mit einem  farblosen oder stark entsättigten Farbklima besonders gut zur Geltung. Eine gute Lösung braucht Entwicklungszeit, Muße und Erfahrung. Mit guten Beispielen anderer lässt sich Eigenes nähren und weiterentwickeln.