Farben gibt es wie Sand am Meer (auch Sand weist jede Menge unterschiedlicher Farbtöne auf) – und Farben werden zugleich sehr differenziert wahrgenommen und bezeichnet.
Erfahren Sie hier, wie Sie trotzdem in Ihrem Team zu einer gemeinsamen Auffassung von Farben kommen und wie Sie entsprechende Farbpaletten für Ihre Website erstellen können.

Was verbinden wir mit Farben wie Blau, Rot, Grün ...?

Je nach Tageszeit, Jahreszeit, Klima und Wetter, persönlicher Stimmung, kultureller Prägung und Umgebung empfinden wir Farben anders oder unterschiedlich. So ist Blau nicht gleich Blau und Rot nicht gleich Rot. Es kommt auch auf den Kontext an.

Nach neuesten Erkenntnissen aus der Forschung nehmen Menschen über kulturelle und geographische Grenzen hinweg Farben gleich oder ähnlich wahr. Unterschiedliche Wahrnehmungen gibt es demnach nur in Farbnuancen.

Farbspektrum. Von Horst Frank / Phrood / Anony - Horst Frank, Jailbird and Phrood, CC BY-SA 3.0, wikimedia

Farben wahrnehmen

Blau gilt in der Farbpsychologie als eher "kalte" Farbe. Aber ist jeder Blauton „kalt“? Denke ich an Sommer, blauen Himmel, türkisblaues (oder türkisgrünes?) Meer, dann wird mir nicht gerade kalt. Und Rot bedeutet nicht nur Achtung! oder Gefahr (Blut!), sondern auch Wärme, Sonnenuntergang, Lagerfeuer (Gemeinsamkeit), aber auch Liebe, Wallung und Hitze. Im Russischen z. B. sind die Wörter für schön und rot sehr nahe verwandt, in China gilt Rot als Farbe des Glücks und in Indien trägt die Braut Rot.

Im Post "Color Meaning, Symbolism, And Psychology" finden Sie weitere interessante Fakten zur Bedeutung von Farben in verschiedenen Zusammenhängen.

Stichprobe Farbwahrnehmung

Wir nehmen – trotz der wissenschaftlichen Basis für das Farbsehen – Farben oder Farbnuancen also sehr unterschiedlich wahr. Betrachten wir einmal verschiedene Websites, die sich mit Farbnamen befassen. Als Beispiel suchen wir uns die Farbe Azur aus und schauen, wie sie jeweils interpretiert wird.

Azzurro ...

Der Farbton Azur hat bei Name that Color den hexadezimalen Farbnamen #315BA1. Die RAL-Farbe 5009 Azur hat den Farbnamen #225f78, der wiederum bei „Name that Color“ unter dem Titel Blumine zu finden ist.

Verwirrend? Ja, und es kommt noch besser!

Wieder ganz andere Ergebnisse zeigen 500+ Colours und Named Colours.

... mal blass, mal satt

Wir sehen an diesen Beispielen, dass Farben mit unterschiedlichen Begriffen verknüpft werden. Bleiben wir bei dem Beispiel Azur. Was für den einen (#F0FFFF, azure) ein azurfarbener Eindruck ist, erscheint der anderen als zwielichtiges Blau (Twilight Blue) . Wenn wir uns die Farbe, die cloford.com als Azur angibt, ansehen (#F0FFFF), fragen wir uns: Ist das wirklich Azur? Mit Azur verbinde ich eher einen sattblauen Himmel als ein kaum sichtbares Blassblau. So sieht es auch Name that Color.

Farben auf der Homepage

Wenn es um die farbliche Gestaltung einer Website geht, an der mehrere Personen arbeiten, so müssen wir zu einem einheitlichen Verständnis von Farben kommen. Aber auch wenn ich als Einzelperson meine eigene Website baue, brauche ich klare Vorstellungen davon, was ich mit einem bestimmten Grauton meine – die Bezeichnung „Hellgrau“ hilft hier nicht viel weiter. Denn Hellgrau kann heute so aussehen und morgen schon ein wenig anders.

Farbnamen für's WWW

Offizielle Farbnamen des World Wide Web Consortium (W3C), die in allen aktuellen Browsern funktionieren, gibt es hier. Wenn wir diese Farbnamen benutzen, gewinnen wir einen Vorteil: Die Farbnamen haben quasi offiziellen Charakter und sind international. Nachteil: Die Farbnamen decken natürlich nicht das gesamte Spektrum an möglichen Farben ab. Und nicht immer treffen sie unser Verständnis der betreffenden Farbe. Wir können uns jedoch an ihnen orientieren und uns von ihnen inspirieren lassen.

Szenario Farbpaletten erstellen

Nehmen wir Folgendes an: Wir haben den Auftrag, Farbpaletten zu entwerfen für die Farben Grün, Blau, Grau und Rot. Hinzu kommen einige sonstige Farben.

Farbpaletten erstellen erfordert ein wenig Kopfarbeit

Blau und Grün sollen fünf Farbtöne umfassen, für Grau und Rot sind lediglich drei Farbtöne vorgesehen.

Die Ausgangs- oder Grundfarbe für jede Farbe ist dabei festgelegt durch das Corporate Design.

• Ausgangsfarbe Blau = #003E91 (RGB: 0, 61, 145)
• Ausgangsfarbe Grün = #3D743A (RGB: 61, 116, 58)
• Ausgangsfarbe Grau = #6A706E (RGB: 106, 112, 110)
• Ausgangsfarbe Rot = #C62828 (RGB: 241, 249, 246)

Farbpalette online erstellen

In unserem fiktiven Fall nutzen wir für die Erstellung der Farbpalette das Color Picking Tool (das Instrument gehört zu einer Tool-Sammlung namens Dan's Tools).

Dort geben wir den Hexcode ein und erhalten über die Buttons "Lighten", "Darken" und "Complimentary" Vorschläge für unsere Farbpaletten. Diese nutzen wir als Vorlagen für die einzelnen Farbkombinationen.

Verschiedenen Lösungsansätze

Lösung 1: Von hell nach dunkel?

Farbnamen nach dem Muster blassblau - hellblau - blau - dunkelblau – blau-schwarz sind zwar einfach, aber nicht unbedingt genial. Sie eignen sich für das schnelle Entwerfen von Farbpaletten, sind aber nicht sonderlich einprägsam und leicht zu verwechseln.

Lösung 2: Von Farbton-1 bis Farbton-5

Die Variante einer Abstufung durch Zahlen vermittelt uns ebenfalls kaum eine Vorstellung von der realen Farbe, die dahinter steckt. Oder können Sie folgende Farbpalette entschlüsseln oder sie sich einprägen?

grün-1 – grün-2 – grün-3 – grün-4 – grün-5

Wir benötigen also konkrete Festlegungen und einprägsame Namen für Farben.

Lösung 3 : Farben mit eingängigen Namen bezeichnen

Warum ist es sinnvoller, Farben einen spezifischen Namen zu geben? Der Vorteil von einprägsamen Namen ist, dass wir damit sofort eine bestimmte Farbe mit einem Gegenstand oder einer Umwelt verbinden. Wald oder Wiese, Gras oder Himmel, Kornblume oder Stahl, da ist gleich eine Emotion dabei, und das erleichtert es uns, die Farbe konkret vor Augen zu haben.

Kreatrivtechniken

Wie kommen wir nun zu einer gemeinsamen Sicht auf Farben, wenn wir doch unterschiedliche Begriffe davon haben können? Wenn ich meine eigene Website gestalte, dann habe ich es natürlich einfach. Wenn ich allerdings im Team oder mit Kunden eine Farbpalette für eine Website entwerfen soll, dann sollten Kreativmethoden herangezogen werden. Geeignet sind das gute alte Brainstorming, Brainwriting oder das Mindmapping. (Mehr zu Kreativitätstechniken finden Sie hier.

Im Beispielszenario haben wir die Methode Mindmapping angewendet und für den vorliegenden fiktiven Fall folgende Farbnamen generiert:

Mindmap mit den vereinbarten Farbnamen für die Farbe Grau

Inspiration Umwelt

Lassen Sie sich inspirieren von Ihrer Umgebung, gehen Sie hinaus in die Stadt oder die „freie“ Natur. Schauen Sie und entdecken Sie, welche Farben Ihnen entgegen leuchten. Im besten Fall haben Sie in ein bis zwei Stunden die Namen für Ihre individuelle Farbpalette zusammen.

Ergebnis: Farbpalette mit nuancierten Farbtönen

Farbpaletten mit individuellen Farbnamen

1. Zeile: Farbname
2. Zeile: Hexadezimaler Code
3. Zeile: RGB-Code

Links

Beispiele für Farbnamen

cloford.com listet verschiedene Quellen für Farbnamen auf:

cloford.com

Auf chir.ag gibt man den Hexcode einer Farbe ein und erhält einen Farbvorschlag:

chir.ag

Die Ralfarbpalette hat neben den RAL-Nummern auch für jede Farbe einen Namen:

ralfarbpalette.de

Farbpaletten online erstellen

Es gibt jede Menge Online-Tools, um Farbpaletten zu erstellen. Hier zwei nicht ganz so bekannte, aber sehr nützliche Tools.

paletton.com bietet einen Download u.a. als HTML-, CSS- und SASS-Code der erstellten Farbpaletten an:

paletton.com

Auf hexcolortool.com kann man individuelle Farbpaletten anhand einer Ausgangsfarbe mit helleren und dunkleren Farbtönen sowie Komplemtärfarben erstellen:

hexcolortool.com

Weitere Tools

Farben einer Website prüfen:

checkmycolours.com

Farbpalette einer bestehenden Website extrahieren:

webcolourdata.com

Farbstandards im Web

CSS Color Module Level 3 des World Wide Web Consortium (Gremium zur Standardisierung von Internettechniken):

w3.org/TR/css3-color

Zum Download des Artikels Farbpaletten für die Website erstellen