Farbe im Webdesign

Wie bei anderen Gestaltungselementen ist auch beim Farbeinsatz in der Regel die Devise: „Weniger ist mehr“. Zumindest, wenn du etwas machen willst, was dem breiten Publikumsgeschmack entspricht. Beschränke dich also auf wenige Farben.
Wenn du dieses Prinzip konsequent durchziehen möchtest, ist es manchmal völlig ausreichend, nur mit einer einzigen Akzentfarbe zu arbeiten und den Rest der Seite in schwarz-weiß und Grautönen oder zumindest in ungesättigten Farben zu halten.
Du willst dich nicht mit einer Hauptfarbe begnügen? Kein Problem, setze noch eine zweite und eine dritte Farbe ein. Aber denk immer dran, dass es eine Hauptfarbe gibt. Die beiden anderen Farben sollten entsprechend sparsam eingesetzt werden.
Das nennt man auch die 60-30-10 Regel. Diese 60-30-10 Regel besagt, dass du 60% deiner Elemente mit der Hauptfarbe versiehst. Ein Drittel der Elemente werden mit der Sekundärfarbe versehen und eine Akzentfarbe kannst du auf 10% deiner Elemente anwenden.

Es gibt keine schönen oder hässlichen Farben. Nur passende oder unpassende. Es kommt immer auf den Kontext an, in dem Farbe eingesetzt wird, vor einem dunklen oder vor einem schwarzen Hintergrund können Farben viel intensiver leuchten als vor einem weißen Hintergrund.
Setzt du eine kräftige Farbe in einem pastelligen Umfeld ein, fällt die kräftige Farbe eher auf, als wenn du sie in einem sehr bunten Kontext einsetzt.

Bestimmte Farben rufen häufig eine bestimmte Stimmung hervor. Rot z.b wird als Alarmsignal wahrgenommen. Es steht auch für Energie, Leidenschaft oder Liebe. In asiatischen Kulturen wird Rot mit Wohlstand oder einem langen Leben assoziiert.
Gelb wirkt aufmunternd, es steht für die meisten Leute für Sonnenschein, Wärme und Wohlbefinden.
Cyan hat eine frische Wirkung
Grün steht für eine saubere Umwelt. Aber auch für „Los geht’s“ an der Ampel.
Blau wirkt für die meisten Leute eher vertrauensbildend.
Violett hat für viele Betrachter eine extravagante Wirkung.
Weiß wirkt hygienisch und sauber.
Schwarz kann luxuriös und auch seriös wirken.

Farbempfinden hat natürlich auch mit dem kulturellen Hintergrund zu tun. Während beispielsweise in Westeuropa Schwarz die Farbe der Trauer ist, haben Tod und Vergänglichkeit in Korea die Farbe weiß.

Und wie kommst Du nun zur idealen Farbe für dein Webdesign?!?
Lass dich inspirieren. Von der Natur, von den Bildern deines Webauftritts, von Printprodukten. Stöbere in Farbpaletten, nutze entsprechende Online-Plattformen.
Im folgenden Abschnitt stelle ich Dir Werkzeuge dazu vor.

Werkzeuge

Es gibt ausgezeichnete Werkzeuge und Online-Tools, die dir bei der Farbgestaltung helfen.
Eine gute Farbinspiration sind die Paletten bei https://www.colourlovers.com/palettes
Barrierefreiheit bei Farben testen: https://wave.webaim.org/
Verläufe: https://cssgradient.io/ oder https://www.colorzilla.com/gradient-editor/ und https://gradienthunt.com/
Mehr Farb-Tools findest Du unter https://www.webdesign-journal.de/farb-tools/

Farbmodelle

Um die Wirkung von Farben zu verstehen, ist es keine schlechte Idee, sich mit den theoretischen Grundlagen auseinanderzusetzen, wie z.B. die verschiedenen Farbmodelle nach Itten siehe https://de.wikipedia.org/wiki/Sieben_Farbkontraste oder die Farbenlehre von Küppers, siehe https://de.wikipedia.org/wiki/Harald_K%C3%BCppers.
Auch die Funktionsweise des Auges, also wie funktioniert die Netzhaut, wie funktioniert das Farbempfinden, sind in dem Zusammenhang nicht uninteressant siehe https://studyflix.de/biologie/zapfen-und-stabchen-5396.
Es gibt ganz unterschiedliche Farbmodelle, ganz unterschiedliche Möglichkeiten, Farben zu beschreiben. Ein sehr brauchbares Modell ist dabei die Farbe mit Farbton, Helligkeit und Sättigung zu beschreiben (HSB und HSL).
In CSS kannst Du Farbe auch mit Hexadezimal-Werten, mit Farbnamen oder RGBa-Werten beschreiben. Im Farbwähler deines Editors (zum Beispiel Visual Studio Code) kannst Du zwischen diesen Schemata hin- und herwechseln.

Checkliste

Kontrolliere deine Farbgestaltung anhand folgender Punkte:

• Frag dich, ob das Farbschema harmonisch wirken soll oder ob du eher ein lebhaftes Design haben möchtest und die Farben eine Spannung aufbauen sollen.
• Nutze Farbkontraste bewusst, siehe auch https://www.webdesign-journal.de/farbkontraste-komplementaerfarben/
• Haben deine Texte einen ausreichenden Farbkontrast?
• Passt die Bildsprache zur Farbwahl?

Und denk dran: Gestaltung theoretisch zu analysieren und nach verschiedenen Gestaltungsgesetzen zu hinterfragen macht Sinn, aber letztendlich entsteht eine gute Gestaltung aus dem Bauch heraus.

Literaturhinweise

Farbassoziationen: https://www.spaceride.de/blog/globale-farbsymbolik-im-design
Farben finden: https://www.webdesign-journal.de/farbpalette-erstellen/
Aktuelle Farbtrends: https://www.webdesign-journal.de/farbtrends-im-webdesign/
Die hässlichste Farbe: https://www.t-online.de/leben/alltagswissen/id_100277746/die-haesslichste-farbe-der-welt-pantone-448-c-wie-sie-leben-rettet.html