Wie Du die richtige Farben für Deine Website wählst

min. Lesezeit

farben-fuer-website-2

Too long; don’t read

  • Die richtigen Farben sind wichtig für Deine Website, weil sie das gesamte Erscheinungsbild prägen.
  • Bei der Wahl der richtigen Farben solltest Du Dich mit der Farbpsychologie beschäftigen.
  • Du solltest nach der 60-30-10 Regel arbeiten, um das perfekte Farbverhältnis zu schaffen.

Bevor Deine Website online geht, musst Du Dich zwangsläufig mit der Frage beschäftigen, welche Farben für Deine Website geeignet sind. Dazu sind verschiedene Aspekte zu beachten die wir Dir im folgenden Beitrag vorstellen werden.

Am Corporate Branding orientieren

In vielen Unternehmen steht bereits das Corporate Branding, bevor eine Internetpräsenz entwickelt wird. Dies bietet eine gute Grundlage für die Wahl der Farben einer Website.

Bestenfalls verfügt Dein Unternehmen sogar schon über ein Design System. Dann hast Du bereits gut durchdachte Farben zur Hand, die natürlich auch auf Deiner Website zum Einsatz kommen sollten.

Nur wenn Dein Auftritt kanalübergreifend konsistent bleibt, kannst Du eine wirklich starke Unternehmensmarke entwickeln. Dabei spielen die gewählten Farben natürlich eine tragende Rolle.

Farbpsychologie beachten

Jede Farbe vermittelt automatisch Emotionen. Du kannst nur dann die besten Farben für Deine Website finden, wenn Du weißt, was eine Farbe in ihrem Betrachter auslöst. So kannst Du sichergehen, dass die Assoziationen, die beim Anblick einer Farbe hervorgerufen werden, Deine Unternehmensmission stützen.

Im Folgenden bekommst Du einen Überblick darüber, welche Farben welche Gefühle auslösen können. Detailliertere Informationen erhältst Du in unserem praktischen Color-Guide, den Du Dir hier downloaden kannst.

farben-fuer-website
Die Farbpsychologie muss für die Auswahl der Farben einer Website beachtet werden.
Cover des E-Books

Mit der richtigen Farbwahl zum Erfolg

Cover des E-Books

Erfahre, wie Du Farben gezielt einsetzt, um die Mission und Werte Deines Unternehmens zu kommunizieren und eine unverwechselbare Markenidentität aufbaust.

Jetzt Exemplar kostenlos downloaden

Rot

Rot ist eine Farbe, die sehr kraftvoll wirkt und eine bestimmte Dringlichkeit vermittelt.

Andererseits wird sie jedoch auch mit Gefahr und Wut assoziiert.

Orange

Orange löst ein Gefühl von Wärme, Sicherheit und Freundlichkeit aus und steht für Innovation.

Allerdings wird die Farbe auch mit Frustration und Ignoranz verbunden.

Gelb

Die Farbe Gelb wirkt warm, optimistisch, fröhlich und kreativ.

Gleichzeitig verkörpert sie Irrationalität und Frustration.

Grün

Grün wird von den meisten Menschen mit Natur, Umwelt und Gesundheit assoziiert.

Diese Farbe ruft jedoch auch Gefühle von Stagnation, Neid und Schwäche hervor.

Blau

Blau ist eine Farbe, die Vertrauen, Zuverlässigkeit und Sicherheit verkörpert.

Sie wird jedoch auch mit Kälte, Unfreundlichkeit und Emotionslosigkeit in Verbindung gebracht.

Pink

Pink wirkt fantasievoll, leidenschaftlich, kreativ und innovativ.

Viele assoziieren Pink jedoch auch mit Aufsässigkeit, Leichtfertigkeit und Impulsivität.

Lila

Die Farbe Lila steht für Reichtum, Weisheit, Spiritualität und Eleganz.

Sie verkörpert andererseits aber auch Dekadenz, Unterdrückung und Launenhaftigkeit.

Schwarz

Schwarz wird mit Sicherheit, Autorität, Luxus, Kraft und Eleganz verbunden.

Gleichzeitig steht die Farbe aber auch für Unterdrückung, Bedrohung und Trauer.

Weiß

Weiß ist eine Farbe, die mit Makellosigkeit, Sauberkeit und Unschuld assoziiert wird.

Sie kann jedoch auch langweilig, leer, steril und distanziert wirken.

Deine Zielgruppe und Konkurrenz kennen

Neben dem Corporate Branding und der Farbpsychologie gibt es noch zwei weitere Faktoren, die Du berücksichtigen solltest, wenn Du die Farben für Deine Website wählst: Deine Zielgruppe und Deine Konkurrenz.

Die Farben auf Deiner Website müssen Deine Zielgruppe ansprechen und ihr die richtige Message vermitteln. Dazu musst Du wissen, wie alt Deine Zielgruppe ungefähr ist, wie die Geschlechter verteilt sind und wo Deine Zielgruppe ansässig ist.

Das ist deshalb so wichtig, da all diese Faktoren beeinflussen, wie verschiedene Farben wahrgenommen werden. So ist beispielsweise Lila zwar eine Farbe, die allgemein für Reichtum und Eleganz steht, jedoch von Frauen viel positiver wahrgenommen wird als von Männern. So gaben in einer Umfrage 23% der befragten Frauen Lila als ihre Lieblingsfarbe an während für 22% der befragten Männer Lila zu den unbeliebtesten Farben gehörte.

Mehr dazu, wie sich die Farbwahrnehmung zwischen verschiedenen Zielgruppen unterscheidet, liest Du in unserem kostenlosen Color-Guide.

Neben Deiner Zielgruppe spielt auch Deine Konkurrenz eine große Rolle dafür, welche Farben Du für Deine Website auswählen solltest. Es ist enorm wichtig, sich von der Konkurrenz abzuheben, um eine starke Unternehmensmarke zu entwickeln. Deshalb solltest Du Dir die Websites Deiner Konkurrenten genau anschauen und überlegen, wie Du der Zielgruppe zeigen kannst, dass Dein Unternehmen besser für sie geeignet ist.

Auszug aus dem E-Book

Mehr Umsatz mit der richtigen Farbwahl

Auszug aus dem E-Book

Erfahre, wie Du mit gezielter Farbwahl die Kaufentscheidungen Deiner Kunden zu Deinem Vorteil beeinflussen kannst.

Sichere Dir jetzt Dein Exemplar

Ein Farbschema entwickeln

Mit all den Ergebnissen aus den Bereichen Corporate Branding, Farbpsychologie sowie Zielgruppen- und Konkurrenzanalyse kannst Du nun ein passendes Farbschema für Deine Zwecke entwickeln. Dazu solltest Du dich auf jeden Fall auf eine Primärfarbe, eine Sekundärfarbe und eine Akzentfarbe festlegen.

Wie die Bezeichnungen schon vermuten lassen, handelt es sich bei der Primärfarbe um die Farbe, die am meisten zu sehen ist. Die Sekundärfarbe nimmt auch einen großen Platz auf der Oberfläche ein, tritt aber hinter der Primärfarbe zurück. Mit der Akzentfarbe werden Akzente gesetzt und wichtige Elemente hervorgehoben.

Wenn Du Dich bereits auf eine Farbe festgelegt hast und weitere Farben suchst, die damit harmonieren, kann ein geeignetes Tool hilfreich für Dich sein. Mit dem Adobe Color Wheel beispielsweise hast Du die Möglichkeit, komplette Farbschemata zu generieren und Deinen Wünschen anzupassen.

farben-fuer-website-1
Ein gut durchdachtes Farbschema ist essentiell für eine Website.

Farben auf Deiner Website richtig einsetzen

Wenn Du das Farbschema für Deine Website entwickelt hast, können die Farben auf Deiner Seite zum Einsatz kommen. Dabei gibt es jedoch einige wichtige Punkte zu beachten.

Die 60-30-10 Regel

Die 60-30-10 Regel gibt Dir einen guten Leitfaden an die Hand, um Deine festgelegten Farben richtig zu platzieren. Sie gibt ein konkretes Verhältnis zwischen der Primär-, Sekundär- und Akzentfarbe an.

Die Primärfarbe sollte ca. 60% der Benutzeroberfläche einnehmen. Dementsprechend ist es ratsam, eine sehr ruhige und neutrale Farbe als Primärfarbe zu wählen. Mit einer grellen Primärfarbe wirkt Deine Website sehr schnell unruhig und unprofessionell.

Ca. 30% Deiner Website sollten Durch die Sekundärfarbe abgedeckt werden. Hier handelt es sich oft um die primäre Markenfarbe, die in der Farbwahl fürs Branding festgelegt wurde.

Die übrigen ca. 10% sollten durch Deine Akzentfarbe abgedeckt werden. Diese sollte besonders bei CTAs zum Einsatz kommen. Stelle sicher, dass sich die Akzentfarbe genug von den anderen Farben abhebt, damit sie wirklich ihren Zweck erfüllen kann.

Nicht nur auf drei Farben beschränken

Zu den wichtigen Farben für eine Website gehören nicht nur die drei Grundfarben, die wir bisher angesprochen haben. Im Designprozess wirst Du feststellen, dass Du deutlich mehr Farben benötigst.

Zum einen solltest Du für jede Farbe, auf die Du dich festlegst, verschiedene Farbabstufungen auswählen. Es wird recht häufig der Fall eintreten, dass Du an einer Stelle ein etwas leichteres Blau oder ein kräftigeres Orange benötigst.

Andererseits solltest Du genügend neutrale Farben zur Hand haben. Diese sind beispielsweise für den Text auf Deiner Website oder für Design-Komponenten wie Tabellen oder Listen wichtig.

Barrierefreiheit bedenken

Bei der Wahl der richtigen Farben für Deine Website darf auch der Aspekt der Barrierefreiheit nicht vernachlässigt werden. Nur so kann garantiert werden, dass wirklich jede Person aus Deiner Zielgruppe Deine Website adäquat nutzen kann.

Bei der Farbwahl solltest Du bezüglich der Barrierefreiheit etwa darauf achten, dass die Kontraste hoch genug sind. Der Text sollte sich sehr deutlich vom Hintergrund abheben und auch Deine Akzentfarbe sollte so gewählt sein, dass sie sich auf verschiedenen Farben klar abzeichnet.

Zudem solltest Du überprüfen, ob Deine Website auch für Menschen, die Farben allgemein nur schwer voneinander unterscheiden können, gut funktioniert. Beispielsweise muss die Navigation unter allen Umständen problemlos möglich sein.

So kannst Du mögliche Barrieren aus dem Weg räumen und wirklich jeden aus Deiner Zielgruppe erreichen.

Die perfekte Website durch klug gewählte Farben

Die richtigen Farben sind wichtig für eine Website, da sie die Unternehmensmarke stärken, die Kundenbindung erhöhen und die Unternehmensmission unterstützen können.

Um die richtigen Farben für Deine Website zu finden, solltest Du Dich an Deinem Corporate Branding orientieren, Dich mit der Farbpsychologie auseinandersetzen und Deine Zielgruppe sowie Deine Konkurrenz kennen.

Damit die Farben effektiv für Deine Website sind, sollte einerseits die 60-30-10 Regel befolgt und andererseits beachtet werden, dass Du mehr Farben brauchst, als anfangs vermutet.

Redakteur & Content-Creator +49 (0) 6371 9172542 Lea ist seit 2023 als Redakteurin und Content-Creator bei Connapptivity. Ihre Expertise liegt vor allem in der Erstellung von Texten, die verschiedene Kommunikationskanäle bedienen, von beeindruckenden Blogartikeln über informative E-Books bis hin zu fundierten Whitepapers.

Von Connapptivity empfohlene Artikel

vergleich-headless-cms-3

Vergleich von Headless CMS-Anbietern: Ein umfassender Leitfaden

Die Verwendung eines Headless CMS bringt viele Vorteile mit sich, weshalb sich immer mehr Unternehmen für diese Art des Content-Managements

Lea Müller
cms-3

Mit einem Headless CMS verschiedene Kanäle bedienen

Ein Headless CMS ist eine spezielle Art von Content-Management-System. Allgemein haben User durch ein Content-Management-System die Möglichkeit,

Lea Müller
Material Design 3

Material Design von Google – das einflussreichste Design System

Bei Googles Material Design handelt es sich um die einflussreichste Designsprache. Seit ihrer Einführung im Jahr 2014 stellt sie die Grundlage für

Lea Müller