Farben im Design optimal einzusetzen ist wesentlich schwieriger, als man im ersten Moment meinen möchte. Wenn du regelmäßig professionell Webseiten erstellst kennst du das Problem aus erster Hand.

Dieser Artikel führt dich durch das Thema und hilft dir dabei, die passenden Farben zu finden, wenn du noch ganz am Anfang stehst.

Wenn du das erste Mal eine Website für ein Unternehmen baust, ist die Farbwahl ein essentielles Thema. Vor allem, wenn noch kein Corporate Design festgelegt wurde, an dem du dich orientieren könntest.

Die Farbwahl für deine Website solltest du besser ernst nehmen. Einmal festgelegt bestimmt sie fortan, welchen ersten Eindruck du bei neuen Besuchern hinterlässt. Und wie wir beide wissen, gibt es keine zweite Chance für den ersten Eindruck.

Aus diesem Grund solltest du dir ein paar Fragen stellen, bevor du dich blind für irgendwelche Farben entscheidest:

Nachdem du diese Punkte durchgearbeitet hast, wirst du ein besseres Verständnis dafür haben, welches Farbschema für deine Website ideal ist.

Um dir ein wenig unter die Arme zu greifen, möchten wir dir zunächst zeigen, wie sich verschiedene Farbtöne unterbewusst auf die menschliche Wahrnehmung auswirken.

Wir können hier leider nicht das extrem umfangreiche Thema der Farbpsychologie abdecken – dafür gibt es genügend andere Seiten.

Stattdessen bekommst du eine übersichtliche Tabelle mit gängigen Farben im Webdesign und deren Wirkung.

Quelle: Die unbewusste Macht von Farben in Design und Marketing

Je nachdem, welchen Eindruck deine Website vermitteln soll, kannst du dir die Wirkung der Farben und die zugrunde liegenden Psychologie zunutze machen.

Für gewöhnlich wird aber nicht nur eine einzige Farbe über den gesamten Webauftritt verwendet, sondern Kombinationen aus verschiedenen Farbtönen. Aus diesem Grund, musst du darauf achten, dass sich die Wahrnehmungen der einzelnen Farben nicht widersprechen.
Hier wird es tricky!

Die Farben blau und rot scheinen das komplette Gegenteil zu vermitteln. Kühl und beruhigend auf der einen Seite, heiß und impulsiv auf der anderen Seite.

Allerdings gibt es Webseiten und Unternehmen, welche die Rot-Blau-Kombination sehr stilvoll umsetzen.

Normalerweise fällt es schnell auf, wenn eine Farbkombination wirklich schlecht ist.

Hier ein Beispiel, damit du weißt, was ich meine…

Stell dir eine Website vor, die alle 5 dieser Farben einsetzt. Keine sehr schöne Angelegenheit, wenn du mich fragst.

Hinweis: Bei diesem Tool von Adobe kannst du dir verschiedene Farbpaletten erstellen lassen.

Ein riesiger Fehler, den vor allem Anfänger im Webdesign machen, ist zu viele verschiedene Farben gleichzeitig zu nutzen. Denn ähnlich wie bei Schriftarten gilt das Motto “Weniger ist mehr”.

Zwei Grundfarben, an denen sich dein gesamtes Webdesign orientiert, sind mehr als ausreichend. Jede weitere Farbe sollte nur sehr gezielt eingesetzt werden. Zum Beispiel bei Call-to-Action Buttons.

Da muss nicht um jeden Preis die Corporate Identity eingehalten werden. Denn ein CTA muss hervorstechen, um die Besucher zur gewünschten Handlung zu leiten. Bei GREYD werden Buttons deshalb meist mit ganz anderen Farben hinterlegt als auf dem Rest der Website.

Webdesign ist ständig im Wandel. Angetrieben durch die globale Pandemie und vermehrte Arbeit im Home Office, ist die durchschnittliche Zeit vor dem Bildschirm stark gestiegen.

Da ist es nicht weiter verwunderlich, dass uns Menschen nach solch intensiver Nutzung irgendwann die Augen schmerzen.

Schon im Jahr 2020 und jetzt in 2021 hat sich daher die vermehrte Nutzung des Dark-Mode bemerkbar gemacht.

Der Dark-Mode auf YouTube schont die Augen und wird immer beliebter.

Modernes Webdesign stützt sich an diesen Entwicklungen und sollte augenschonende Farbkombinationen – im Gegensatz zu grellen Website Farben – zum Einsatz bringen.

Selbstverständlich musst du nicht zwingend schwarze oder dunkelgraue Farbtöne auf deiner Webseite nutzen, wenn diese nicht zu deinem Unternehmen passen (vergiss nicht die oben genannte Farbpsychologie).

Die wichtige Botschaft ist, dass dein Farbschema angenehm auf die Augen wirken sollte. Knallige Farben, die nach Aufmerksamkeit schreien und die Sehnerven überreizen, sind wirklich nicht angebracht – außer gezielt für die oben erwähnten Call-to-Actions.

Ein weiterer Tipp, den wir dir aus unserer langjährigen Erfahrung als Webdesigner geben können, ist, dass du auf verschiedenen Farbtönen derselben Grundfarbe aufbaust.

Angenommen, du möchtest auf einer dunkelblauen Farbe aufbauen, wie hier im Bild ganz links gezeigt. Dann kannst du auf der Webseite die restlichen blauen Farbtöne mit anderer Schattierung untermischen.

Das führt dazu, dass deine Webseite nicht zu langweilig wirkt, aber dennoch ein einheitliches Design aufweist.

Apropos, einheitliches Webdesign.

Die GREYD.SUITE bietet dir als eines der sehr wenigen Webdesign-Tools durchgehend globale Design Settings.

Im Klartext bedeutet das: Bei uns greifen wirklich alle Funktionen (Formulare, alle Seitenmodule, Pop-ups, Footer, Header, etc.) auf die zentral eingestellten Farben zurück!

Natürlich kannst du aber trotzdem einzelne Elemente in jeder beliebigen anderen Farbe einstellen. Das spart zum einen massiv Zeit beim Aufbau und reduziert auch die Fehlerquote, wenn mehrere Leute an einer Seite arbeiten.

Weil zum Beispiel ein Content Redakteur beim Versuch einen Button von einer anderen Seite nachzubauen, beim Farbwert nicht daneben greifen kann.

Welche Farben zusammenpassen und welche nicht, lässt sich nie pauschal beantworten.

Es gibt nur wenige Farben, die wirklich gar nicht zusammenpassen. Falls doch, dann handelt es sich wieder um einzelne Farbtöne und nicht, um die Grundfarben an sich.

“Schwarz und gelb passen NIE zusammen”, wäre genauso falsch wie “Schwarz und gelb passen IMMER zusammen!”.

Tut mir leid, dass ich hier keine eindeutige Antwort für dich habe.

Die beste Empfehlung ist immer, dir möglichst viele und vor allem unterschiedliche Webseiten (neben der Konkurrenz) anzusehen und dich davon inspirieren zu lassen.

Welche Farbkombinationen sprechen dich besonders positiv an?

Das ist immer die Frage, von der du ausgehen solltest. Letzten Endes hauchst du deinem Farbschema mit dem Aufbau deiner Marke und deines Unternehmens – der Geschichte drum herum – noch viel mehr Bedeutung ein.

Die ganze bunte Theorie ist schön und gut. Reicht aber für ein gutes Verständnis noch nicht ganz aus.

Darum möchten wir dir im Folgenden noch ein paar Beispiele cooler Farbkombinationen auf Webseiten zeigen.

Du bist dir nicht sicher, wie du die richtigen Farben findest?

Zum Glück gibt es mittlerweile passende Tools, welche komplette Farbschemata für dich generieren.

Auf coolors.co kannst du dir Farbpaletten automatisch generieren lassen oder populäre Farbpaletten von anderen Nutzern kopieren bzw. dich davon inspirieren lassen.

Wenn du bereits eine bestimmte Farbe hast – oder genauer gesagt den exakten Farbcode – welche du verwenden möchtest, hilft dir der Farbgenerator ebenfalls weiter.

Du kannst nämlich einzelne Farbcodes fixieren und dich dann solange durch die Vorschläge klicken, bis eine ansprechende Farbkombination für dein Webdesign dabei war.

Die richtige Farbkombination im Webdesign zu finden ist nicht immer super simpel. Vor allem, wenn das Unternehmen noch kein richtiges Corporate Design hat, musst du praktisch von Null anfangen. Generatoren für Farbpaletten können dir dabei sehr behilflich sein.

Beachte bei der Farbwahl die psychologische Wirkung unterschiedlicher Farbtöne. Nicht alle Farbkombinationen passen zusammen. Aber es gibt immer Beispiele von Webseiten, die schräge Farben clever kombinieren.

Orientiere dich daher an jenen Unternehmen, deren Webdesign einen guten Eindruck bei dir hinterlassen hat und lass dich von ihnen inspirieren!