Farbschema erstellen: Die perfekten Farbwahl für Deine Website

Beim Webdesign und im Branding spielen Farben eine herausragend wichtige Rolle. Doch warum ist das so?

Eine Studie aus der Farbpsychologie von Satyendra Singh von der University of Winnipeg in Canada zeigt folgendes.

Menschen entscheiden sich innerhalb von 90 Sekunden nach ihrer ersten Interaktion mit Menschen oder Produkten. Etwa 62 bis 90 Prozent der Bewertung basieren allein auf Farben.

Daraus folgt, dass Du durch einen gezielten Einsatz von Farben viel erreichen kannst. Du kannst Dich positiv oder negativ von Deinen Wettbewerbern absetzen und die Stimmungen und Gefühle Deiner Website Besucher steuern.

Und Gefühle sind der Schlüssel zur Einstellung gegenüber Deiner Marke, Deinen Produkten und Dir. Bei der Farbwahl für Dein Webdesign steht also einiges auf dem Spiel. In diesem Beitrag erfährst Du in 7 Schritten alles, was Du wissen musst.

1. Farbpsychologie: Mit Farben kommunizieren

Der erste Eindruck zählt. Mit der Wahl Deines Farbschemas, kannst Du die Website unvergesslich, vertrauenswürdig, anziehend, modern, eindrucksvoll und auch rentabel machen.

Zum Glück gibt es hierzu jede Menge wissenschaftliche Studien und Experimente. Es ist seit langem belegt, dass Farben Emotionen hervorrufen. Einige machen uns glücklich oder entspannen uns, andere versetzen uns in Alarmbereitschaft oder verursachen gar Angst oder Traurigkeit.

Gezielt eingesetzt kannst Du mit der Wahl Deiner Farben Deine Botschaft schneller und stärker kommunizieren und Deine Zielgruppe überzeugen. So zeigt auch die Infografik von KISSmetrics, dass 85 % der Einkäufer die Farbe als Hauptursache für einen Kauf angegeben haben.

Achtung: passt Deine Farbwahl nicht zu Dir, Deinen Marken und Deiner Botschaft wird Deine Kommunikation nicht stimmig. Es gibt ein Zitat von dem englischen Schriftsteller Donald Miller „If you confuse them you lose them“. Frei übersetzt mit „Wenn Du sie verwirrst, verlierst Du sie“.

Damit Dir das nicht passiert, steigen wir gleich in die Psychologie der Farben ein und zeigen Dir dann, wie Du ein passendes Farbschema für Deine Website erstellst.

1.a Die Bedeutung von Farben im kulturellen Kontext

Farben haben je nach Kulturraum unterschiedliche Bedeutungen und rufen verschiedene Assoziationen hervor. Bei der Interpretation von Farben muss daher grundsätzlich darauf geachtet werden im welchen Kontext die Farben eingesetzt werden.

Beispielsweise sind die Gewänder von Geistlichen im Buddhismus und Hinduismus häufig Orange. Die Farbe steht dort für Erleuchtung und Spiritualität. In den USA dagegen, sind die Gefängnisuniformen in Orange gehalten.

Achte daher bei Deiner Farbwahl für Dein Farbschema auf den kulturellen Hintergrund Deiner Zielgruppe. Wenn Du kulturell verschiedene Zielgruppen ansprechen willst, kann sinnvoll sein, je Zielgruppe eine Website zu erstellen. Z.B. im Rahmen von Multilingualen Websites, die zugleich die Möglichkeit bieten, je Sprachwahl verschiedene Design Konzepte abzustimmen.

Wenn Du Wenn Du Dir einen schnellen Überblick über die Farbbedeutungen in unterschiedlichen Kulturen verschaffen möchtest, finden hier einen ersten guten Überblick.

Bei der Farbpsychologie der folgenden Farben fokussieren uns auf den Europäischen Raum.

1.b Die Farbe Rot: Bedeutung und Anwendung

Marketingfarben wie Rot können Aufmerksamkeit erregen. Die rote Farbbedeutung ist mit Aufregung, Leidenschaft, Gefahr, Energie und Aktion verbunden. Möglicherweise hast Du bemerkt, dass einige Marken Rot für die Schaltfläche „Jetzt bestellen“ oder für ihre Verpackung verwenden, um sich im Regal abzuheben.

In der Farbpsychologie ist Rot die intensivste Farbe und kann so die stärksten Emotionen provozieren. Rot kann aber auch für Gefahr stehen und Angst auslösen. Als Farbe solltest Du sie daher eher sparsam und vor allem sehr gezielt verwenden. Auf Deiner Website kannst Du die Farbe Rot zum Beispiel am besten für Handlungsaufforderung oder Verkaufssymbole einsetzen.

Voraussetzung hierfür ist allerdings, dass sie sich gut von Deinem Store-Design abhebt. Rot vor Rosa wirkt nicht so stark wie Rot vor Schwarz.

Rot im Marketing

Für Marken wie Coca-Cola, McDonalds, KFC, Pizza Hut, oder bei KitKat ist Rot die ikonische Farbe. Das Coca-Cola Rot wird vielfach mit Leidenschaft, Aufmerksamkeit, Anregung, Mut und Liebe (natürlich zu Coke) verbunden.

Eigentlich kein Wunder. Rot wird auch die Stimulanz von Appetit zugeschrieben. Insgesamt wir Rot gerade bei Lebensmitteln sehr häufig verwendet und ist dort auch eine exzellente Wahl.

Auch im Entertainment ist Rot beliebt. Typisch sind hier die roten Vorhänge, die roten Teppiche aber auch die Wahl zu roten Kleidern und Jacken. Als bekannte Marke im Entertainment-Bereich hat sich YouTube für Rot entschieden. Der Einsatz von Rot zieht sich bei YouTube wie ein Roter Faden über die gesamte Website.

Trotz der verschiedenen Farben in den Videos setzt YouTube so gekonnt Akzente, gibt und lenkt die Orientierung und stärkt die eigene Marke. Wichtige Buttons werden in Rot gehalten und erzeugen gewissermaßen „Handlungsdruck“. Oder anders gesagt: Durch die Farbe Rot wird der Besucher ermutigt zu Klicken.

Weitere Unternehmen aus dem medialen Umfeld, die die Farbe Rot nutzen sind Netflix, CNN oder das Time magazine.

Emotionen, die von Rot hervorgerufen werden:

• Energie
• Dringlichkeit
• Erhöhter Puls
• Aufregung „Die Intensität von Blut und Feuer“
• Leidenschaft und Sexualität
• Dominanz
• Stärke
• Aggressivität

1.c Die Farbe Orange: Bedeutung, Anwendung und Emotionen

Orange wird im Allgemeinen als eine sehr energiereiche Farbe wahrgenommen. Sie entsteht aus der Farbkombination von Rot und Gelb.

In der Farbpsychologie lassen sich Assoziationen mit Farben häufig auch durch das Aufkommen der Farben in der Natur erklären. Orange finden wir bei sehr hellen Sonnenuntergängen und Früchten. Entsprechend wird Orange mit der Schönheit einer untergehenden Sonne oder dem erfrischenden Geschmack von Orangen oder Mandarinen verbunden.

Die erdigen Orangetöne werden dagegen eher mit den Farben des Herbstes verbunden. Mit herbstlichen Blättern, Kürbissen aber auch mit Ton und Erde im Allgemeinen.

Orange als Markenfarbe

Amazon, Harley-Davidson, Fanta, Soundcloud und Timberland. Es gibt eigentlich keinen besseren Beleg dafür, dass Orange als Call-To-Action Farbe funktioniert, als dass Amazon die Farbe extrem häufig verwendet. Es gibt kaum ein Unternehmen, was mehr auf Website-Optimierung und Testung mit statistischen Mitteln investiert als Amazon.

Emotionen, die von Orange hervorgerufen werden:

• Aufregung
• Anregung
• Begeisterung
• Enthusiasmus
• Wärme
• Selbstbewusstsein
• Angemessenheit

1.d Die Bedeutung von Gelb für Dein Farbschema

Gelb ist die hellste Farbe im Spektrum. In der Farbpsychologie gilt Gelb als die auffälligste Farbe für das menschliche Auge.

Es ist tatsächlich so, dass das menschliche Auge Gelb am schnellsten verarbeitet. Unser Gehirn Gelb zuerst wahrnimmt. Entsprechend ist Gelb die Farbe, die Aufmerksamkeit in besonderem Maße auf sich zieht.

Im positiven Sinne dreht sich in der Farbpsychologie von Gelb alles um Sonnenschein. Entsprechend ruft es Glücksgefühle, Optimismus und die gewisse Bestimmtheit des Sommers hervor. Nun hat das Gelb in der Farbpsychologie aber leider auch eine Schattenseite. Es wird auch mit Betrug und Warnung assoziiert. Nicht zuletzt heißt es auch „Gelb vor Neid“.

Hier spielt vor allem auch die Farbkombination und die Helligkeit von Gelb eine Rolle. Ist der Gelbton eher warm oder grell?

Gelb als Markenfarbe

Im Marketing setzen Hertz, Ferrari, Shell und DHL auf Gelb. Es wird nicht nur als Logo Farbe, sondern häufig als Hintergrundfarbe eingesetzt.

Nehmen wir die Luxusmarke Ferrari. Sie wird mit dem italienischen Sommer, Glück und einem sehr unbeschwerten Lebensstil verbunden. Natürlich soll bei der Zielgruppe der Besitz eines Ferraris ein gewisses Glücksgefühl erzeugen.

Darüber hinaus erzeugt gelb in bestimmten Kombinationen weitere Assoziationen: So dürfte bei der Wahl des IKEA-Logo Gelb sicherlich nicht nur eine Signalwirkung eine Rolle gespielt haben, sondern auch die schwedischen Nationalflagge.

Assoziationen, die mit der Farbe Gelb hervorgerufen werden:

• Wärme
• Intelligenz
• Appetit
• Bestimmtheit
• Glück und Fröhlichkeit
• Optimismus
• Gefahr und Neid
• Energie
• Aufmerksamkeit

1.e Die Farbpsychologie von Pink, Magenta und Rosa

Während Pink zum einen die englische Übersetzung von Rosa ist, wird in der deutschen Sprache auch ein eher ins Blaue gehender Rosaton hierunter verstanden. Im Rahmen der Farbpsychologie gehen wir hier daher auf die Bandbreite der Rosatöne – inklusive Pink und Magenta – ein.

Rosa ist im Wesentlichen ein hellroter Farbton und wird typischerweise mit Liebe und Romantik assoziiert. Viele Menschen bringen Rosa direkt mit allen möglichen weiblichen und mädchenhaften Dingen in Verbindung. Als heller Rosaton wird ihm zudem auch eine entspannende Wirkung zugeschrieben.

Das kräftige Pendant zum Rosa ist Pink. Die lebendige Pink Töne wirken belebend oder stimulierend. Auch sie werden eher mit Weiblichkeit in Verbindung gebracht.

Rosa und Pink im Marketing

Im Marketing wird Pink häufig bei Spielzeugmarken für Mädchen wie Barby eingesetzt. Aber der Einsatz ist längst nicht darauf beschränkt.

Auch die Telecom nutzt das bekannte Magenta (farblich sehr nah am sogenannten hot pink) und versucht bereits seit Jahren sich den Farbton gerichtlich schützen zu lassen. Wir finden Rosa und Pink auch in verstärkt im kreativen Bereich, wie zum Beispiel im Markenbranding von Adobe. Nicht zuletzt nutzt auch die Kosmetikbranche sehr oft genau diese Farben. Sehr extrem zum Beispiel die Kosmetikmarke benefit.

Viele der Marken richten sich an ein weibliches Publikum. Häufig werden mit Pink preiswertere, vor allem aber auch trendigere Produkte für Frauen oder Mädchen empfohlen.

Wie Du merkst bietet Pink ein sehr breites Spektrum für Ausdrucksmöglichkeiten. Achte bei der Wahl daher immer darauf, dass unterschiedliche Rosatöne sehr unterschiedliche Bedeutungen haben. Das ist eigentlich bei allen Farben so.

Insbesondere weiche Pink Töne (Hot-Pink) vermitteln Energie, Jugendlichkeit oder auch Spaß und Abenteuer. Die Bedeutungen schwanken auch hinsichtlich der Dämpfung, und zwar diametral entgegengesetzt. Während gedämpfte Töne eher für Unschuldigkeit und Jugend stehen, kannst Du mit eher kräftigen Tönen Sexyness oder Kühnheit ausdrücken.

Rosa und Pink – Farbliche Assoziationen und Emotionen

• Fröhlichkeit
• Verspieltheit
• Trendig
• Erfrischend
• Euphorisch
• Kindlichkeit & Niedlichkeit
• Kreativität
• Weiblichkeit
• Schwingende Dynamik

1.f Die Farbe Grün und Ihre Bedeutung für Dein Farbschema

Grün steht häufig für Natur, Kraft, Ruhe und Gesundheit. Wir finden es häufig in Ladeneinrichtungen, die versuchen, die Kunden und Besucher zu entspannen. Andererseits nutzen Marken es, um auf Umweltprobleme, die sie lösen, aufmerksam zu machen.

Es wird darüber hinaus in der Farbpsychologie mit Fruchtbarkeit, Wachstum und Geld verbunden. Großzügigkeit ist eine weitere positive Bedeutung der Farbe. Aber Vorsicht, grün kann auch negative Assoziationen wie Neid wecken. Im Design können sehr interessante Effekte mit grünen Hintergründen bei Logos oder Bannerbildern erzielt werden. Vollbildhintergründe in Grün sind eines der schwierigsten Bereiche.

Aber Grün hat auch einen großen Vorteil im Design. Wenn Du in Deiner Werbung viel Natur zeigst, deine Produkte und die Models häufig Outdoor präsentierst, passt ein grünes Logo sehr gut zu den Naturbildern. Dann ist grün geradezu ideal um Naturfreunde, Abenteurer als Zielgruppe anzusprechen. Die Marken Land Rover, Fendt und John Deere machen es vor.

Grün im Marketing

Im Marketing versuchen Unternehmen häufig die Liebe zur Natur und die Natürlichkeit Ihrer Produkte zu kommunizieren, in dem Sie Grün als Brand-Farbe verwenden. Beispiele für die Verwendung von Grün sind die Marken Garnier, Starbucks oder auch bp British Petroleum. Auch Bio-Marken verwenden sehr gerne grün.

Nicht zuletzt wird Grün recht schnell vom Auge aufgenommen und vom Gehirn verarbeitet. Es erzeugt im Gehirn insbesondere den Eindruck von Harmonie und ist daher als Markenfarbe sehr beliebt.

Grün steht in der Farbpsychologie für

• Entspannung
• Natur
• Organische Materialien
• Nachhaltigkeit
• Balance & Harmonie
• Entschlossenheit
• Fruchtbarkeit
• Wachstum
• Geld

1.g Die Farbe Blau: Bedeutung und Anwendung im Design

Bei verschiedenen Forschungen zeigt sich immer wieder, dass Blau die beliebteste Farbe der Welt ist. Gerade auch bei Männern. Menschen verbinden oft Wasser und Meer sowie Himmel und Weltall mit dieser Farbe. Typische Assoziationen mit Blau sind immer wieder Zuverlässigkeit, Ruhe, Frieden und Treue.

Aber auch Blau hat in der Farbpsychologie seine Schattenseiten. Es kann unterkühlt oder gefühlskalt wirken, im Extremfall sogar unfreundlich. Ein Stück weit kommt das daher, wie wir Distanz wahrnehmen. So erscheinen uns blaue Objekte weiter entfernt als beispielsweise Rote.

Im Allgemeinen wirkt blau aber eher beruhigend, schafft Vertrauen und spricht den Verstand mehr an, als die Emotionen. Auch bei Blau musst Du natürlich auf die Tonalität achten. Kräftige Blautöne regen klare Gedanken und die Ratio an, während weichere Töne die Konzentration fördern und beruhigen.

Während die Produktivität auf beide Weisen gefördert werden kann, gilt blau eher als Appetit hemmend.

Blau im Marketing

Nicht nur konservative Parteien, sondern auch konservative Unternehmen verwenden blau, um Vertrauen in Produkte und Personen zu fördern.

Im Marketing wird blau gerne für Garantiesiegel, Trust Zertifikate wie beim TÜV oder kostenlose Versand Banner etc. eingesetzt. Letztere sollen oft die Hürde für einen Erstkontakt nehmen. Rein nach dem Motto „Es kann ja nichts passieren…“.

Eigentlich findet sich Blau als Markenfarbe in fast allen Branchen und Bereichen wieder.

Angefangen von helleren „Babyblau“-Tönen, bis hin zu Technologie-Giganten wie Facebook, Twitter, Uber oder Skype. Weitere Beispiele finden wir bei Autohersteller wie VW, Volvo und Ford. Im Finanzbereich setzen beispielsweise Allianz, PayPal  oder KPMG auf Blau. Bei der Luftfahrt finden wir das Blau unter anderem bei Airbus, Lufthansa, United Airlines und Boeing.

Blau wird im Design assoziiert mit

• Stabilität
• Intelligenz
• Harmonie
• Verantwortungsbewusstsein
• Ruhe
• Frieden
• Vertrauen
• Zuversicht

1.h Die Farbe Lila im Webdesign und in der Markenpsychologie

Lila ist die Farbe der Königshäuser und wird mit Weisheit und Respekt in Verbindung gebracht. Psychologisch versetzt es Menschen in einen Problemlösungsmodus und kann die Kreativität anregen. Im Marketing und Design finden wir die Farbe Lila häufig bei Schönheits- und Anti-Aging Produkten. Auch weil die Farbe eher Frauen anspricht, die im Vergleich zur „pinken Zielgruppe“ schon etwas älter ist.

Der übermäßige Gebrauch der Farbe Lila hat Risiken und Nebenwirkungen. Lila kann Frustrationsgefühle auslösen sowie Arroganz vermitteln. Daher verwenden professionelle Designer Lila häufig in Maßen und seltener großflächig. Dafür kommt es aber gerne in relevanten, aber kleineren Elementen zum Einsatz und zur Akzentuierung in Informationsgrafiken.

Marken, die im Branding stark auf Lila setzen sind natürlich Milka, Yahoo, Hallmark oder Apollo. Diese Marken setzen sich durch die Farbe auch gezielt von der Konkurrenz ab und schaffen so eine erhöhte Markenbekanntheit und Wiedererkennungswert.

Mit Lila verbinden viele Menschen

• Spirituelles Bewusstsein
• Eindämmung
• Wahrheit und Weisheit
• Vision
• Macht
• Luxus
• Qualität
• Authentizität

1.i Die Bedeutung von Weiß im Farbschema

Auch wenn Weiß im technischen Sinne keine Spektralfarbe ist, spielt es bei der Gestaltung, im Design und Marketing eine sehr wichtige Rolle und löst farbpsychologisch Emotionen aus.

Weiß verbinden wir mit Reinheit und Sauberkeit aber auch mit Güte, Unschuld, Bescheidenheit und Demut. Durch die Abwesenheit von Farbe kann auch ein Eindruck von Neutralität vermittelt werden.

Die üppige Verwendung von Weißräumen (auch als Leerräume bezeichnet) fördert die Kreativität. Im Design wird vor allem beim Minimalismus gerne mit viel Leerräumen gearbeitet. Auch wenn diese im engeren Sinne nicht weiß sein müssen, wird es sehr häufig eingesetzt.

Und wenn ich wir sage, meine ich damit den europäischen und nordamerikanischen Raum. Auch bei der Farbe Weiß darfst Du interkulturelle Differenzen nicht außer Acht lassen, da es Regionen in der Welt gibt, in denen Weiß eigentlich genau für das Gegenteil der oben beschriebenen Assoziationen steht. Beispielsweise ist in Japan Weiß die Farbe der Trauer. In China und im Hinduismus, wird mit Weiß ebenso Trauer und Tod verbunden, wie auch Reinheit und Wahrheit.

Weiß im Design

Aus rein pragmatischen Gründen ist Weiß die auf Websites und in Online-Shops am häufigsten verwendete Farbe. Das liegt vermutlich daran, dass die Lesbarkeit in Verbindung mit schwarzen Buchstaben am höchsten ist, da keine andere Farbkombination einen höheren Kontrast bietet.

Weiß eignet sich zusammenfassend immer dann hervorragend, wenn Du bei Deiner Marke einen minimalistischen Ansatz fahren möchtest. Vielfach findet man sehr viel weiß daher auch bei Architekten oder Innenarchitekten.

Aber auch über den rein minimalistischen Ansatz hinaus gibt Weiß viele Möglichkeiten. Nicht selten wird es vor farbigen Hintergründen als Schriftfarbe verwendet. Nicht nur bei der Markierung von Coca-Cola, wie bereits oben erwähnt. Sondern auch Lego nutzt das Konzept auf spannende Weise.

Gewissermaßen bietet Weiß dem Geist Luft, sich die Welt in allen erdenklichen Farben auszumalen. Alles in allem ein sehr anregender Ansatz, den wir recht häufig finden. Beispiele sind Tesla, The North Face, Mini oder auch bei unser Webdesign Agentur selbst.

Im Umkehrschluss bietet weiß als Hintergrund den nötigen Raum und Kontrast für farbenfrohe Fotografien, Illustrationen und Videos.

Wenn wir uns die Navigationsleisten von Adidas, Uber und Apple vergegenwärtigen, wird hier (derzeit) mit weißer Schrift auf schwarzem Hintergrund gearbeitet. Der Ansatz sorgt für den Notwendigen Kontrast und vermittelt Klarheit und Einfachheit bei der Navigation.

Assoziationen mit der Farbe Weiß

• Unschuld
• Güte
• Sauberkeit
• Demut
• Macht
• Hygiene
• Sterilität
• Klarheit
• Reinheit
• Sauberkeit
• Einfachheit
• Raffinesse
• Effizienz

1.j Schwarz: Bedeutung und Anwendung im Farbschema

Auch bei Schwarz handelt es sich im technischen Sinne nicht um eine Spektralfarbe, sondern um die Abwesenheit oder die komplette Absorption von Licht. Aber das nur der Vollständigkeit halber.

Die emotionalen und psychologischen Wirkungen von Schwarz sind erheblich. Schwarz kann Schutzbarrieren erschaffen, da es sämtliche Energie in sich aufnimmt. Bei Kleidung wird gewissermaßen die gesamte Energie umhüllt und oft empfohlen, um schlanker zu wirken.

Auch im Webdesign wird „schwarz“ inzwischen als Feature zur Reduzierung von Energie eingesetzt – und das messbar. So führt der Webdesign Trend „Dark Mode“ dazu, dass die Geräte weniger Energie für die Darstellung einer Website verbrauchen und die Besucher so auch Ressourcen sparen können.

Schwarz bedeutet absolute Dunkelheit. Richtig eingesetzt vermittelt Schwarz aber auch eine absolute Klarheit, da es keine Nuancen zulässt. Und in Verbindung mit weiß vermittelt es die absolute Exzellenz und wirkt gleichermaßen gewichtig und ernsthaft.

Schwarz als Farbkombination

Die Wirkung von Schwarz ist stark von der Farbkombination abhängig. So kann Schwarz durch den Verzicht durch „Powerfarben“ bzw. die reine Kombination mit Weiß und Grau im Design für minimalistische, stilvollen Ansätze eingesetzt werden, aber auch für Trauer. In Kombination mit Gold kann es sehr edel wirken, während Schwarz auch hervorragend die Stärken von knalligen Farben, sie es Rot, Blau, Orange, Gelb oder Grün hervorhebt und so Kraft gibt und poppig wird.

Neben den oben beschriebenen Ansätzen von Apple, Nike und Uber, verwendet auch Nike im Logo eine Kombination aus Schwarz und Weiß.

Derzeit sind Dark Theme Websites schwer im Trend. Auch deshalb geht unser Webdesign Showcase Edeldark aus September 2021 den Weg schwarzer, bzw. dunkelgrauer Hintergründe mit hellen Schriften. Im Vordergrund steht ein luxuriöses Websiteerlebnis, was durch die Farbwahl unterstrichen wird.

Assoziationen mit Schwarz

• Raffinesse
• Glamour
• Sicherheit
• emotionale Sicherheit
• Effizienz
• Substanz
• Luxus
• Eleganz
• Zeitlosigkeit
• Traurigkeit & Einsamkeit
• Modernität

2. Farbschema: Bestimme Deine Primärfarbe

Mit dem Bewusstsein um die Bedeutung der einzelnen Farben kannst Du jetzt die bewusste Auswahl Deiner Farben angehen. Zuallererst ist es Zeit Deine Primärfarbe für Dein CI, Dein Design System und Deinem Webdesign zu bestimmen. Die Primärfarbe ist die dominierende Farbe Deiner Marke.

Denk an das Lila von Milka oder das Rot von Coca-Cola. Deine Markenfarbe hat eine wichtige Aufgabe. Wenn Besucher auf Deine Website kommen, muss sie Emotionen transportieren und für eine positive Einstellung der Besucher sorgen. Und sie sollte Deine Marke stärken und bekannter machen.

Die Chancen stehen nicht schlecht, dass Du Deine Primärfarbe bereits festgelegt hast. Beispielsweise wenn Deine Marke bereits ein Logo hat oder ein bestimmtes Verpackungsdesign. In dem Fall wird vermutlich eine Farbe bereits jetzt die Designs und Deine Werbematerialien dominieren. Genau das ist Deine Primärfarbe.

Sofern Du aktuell noch keine Primärfarbe hast, kannst Du Sie wie folgt festlegen:

• auf Basis der farbpsychologischen Informationen der einzelnen Farben
• mittels zusätzlicher Anregungen bei Dribble
• inspiriert von den Lieblingsmarken von Dir und Deiner Zielgruppe. Für viele der bedeutenden Marken hat brandcolors.net eine perfekte Übersicht im Web publiziert.
• sowie durch die Nutzung von Browsererweiterungen. Hierbei kannst Du jede Farbe, die Du im Web siehst, festhalten und bequem als Hexadezimalwert in Deine Zwischenablage ablegen. Ideal als Vorlage für Dein Webdesign. Für Chrome und Firefox gibt es zum Beispiel ColorZilla, einen kostenlosen Color Picker, Eye Dropper und Gradient Generator

Tipp Entscheidung Primärfarbe:

Erstelle Dir eine Liste mit allen von Dir favorisierten Farben, experimentiere ein wenig damit im Graphikprogramm Deiner Wahl und treffe dann eine fundierte Entscheidung.

Wenn Du die Möglichkeit hast, frag zudem Deine Zielgruppe, welche der Farben, die Du in die engere Auswahl genommen hast, ihr gefällt und sie für Dich am besten findet. So kannst Du recht sicher sein, dass Du und Deine Marke auch neue, potenzielle Kunden Deiner Zielgruppe ansprichst.

3. Farbschema und Farbanzahl für Deine Website

Großartig, Du hast es geschafft. Jetzt wo Du Deine Primärfarbe festgehalten hast, solltest Du zunächst festlegen, wie viele Farben Du Deinen Farbschema hinzufügen möchtest.

Moderne Farbschemata bestehen meistens aus 3, häufig sogar nur aus 2 Farben, wobei die zweite Farbe in unterschiedlichen Tonalitäten angewandt wird.

Es gibt jede Menge unterschiedlicher Arten von Farbschemata und entsprechende Farbpaletten. Aber keine Sorge. Du musst nicht die gesamte Lehre der Farbharmonien verstehen, um zu einem professionellen Farbschema zu gelangen.

Für den Fall, dass Du tiefer in die Materie einsteigen willst, findest Du in unserem Artikel „Farbharmonie“ Antworten auf Fragen wie „Was ist eine Farbharmonie?“, „Welche Farbharmonien gibt es und wie kannst Du Sie für Dein Design nutzen“.

Die Farbharmonien bilden die Grundlage für besondere Farbschemata. Hierzu zählen z.B. monochrome, komplementäre, triadische, teilkomplementäre, tetradische und polychrome Farbschemata.

 

Triadisches Farbschema

In der Literatur werden häufig triadische Farbschemata empfohlen, daher will ich auf diese kurz eingehen. Ein Triadisches Farbschema ergibt sich durch ein gleichseitiges Dreieck innerhalb des Farbkreises.

Der große Vorteil von triadischen Farbschematas ist, dass es durch visuellen Kontrast und Vielfalt lebendig wirkt, dabei aber gleichzeitig ausgewogen und noch harmonisch ist. Häufig entsteht durch drei lebendige Farben aber auch etwas zu viel Dramatik. Eine Möglichkeit ist dann die Farben zu dämpfen und mit weniger Sättigung einzusetzen.

60-30-20 Regel im Design

An diesen Stellen hilft die sogenannte 60-30-20 Regel. Das ist eine klassische und einfache Regel aus dem Dekorationsbereich, die aber auch im Webdesign ihre Wirkung erzielt. Für Räume wird empfohlen, dass 60 % des Raumes in der dominanten Farbe gehalten werden sollen, 30 % in der Sekundärfarbe, während die verbleibenden 10% die Akzentfarbe halten sollten. Etwas spannender wird die Regel, wenn man die Sekundärfarbe nochmal zu gleichen aufteilt.

Insgesamt wird meistens empfohlen, sich auf höchstens 3 Farben zu beschränken. Gesetzt den Fall, Du entscheidest Dich dieser Regel zu folgen, musst Du jetzt noch eine oder zwei Sekundärfarben festlegen. Zum Glück ist das heute nicht mehr Zwangsläufig eine Wissenschaft.

4. Sekundärfarben für Deine Website bestimmen

Die Sekundärfarben zu bestimmen kann recht herausfordernd sein. Zum Glück gibt es wirklich jede Menge großartige Tools, die zumindest sehr gute und mathematisch, farbtheoretisch korrekte Vorschläge liefern können. Vor allem klappt das super, da Deine Primärfarbe ja bereits feststeht.

Um Dir die Auswahl zu erleichtern und mal eine Pause von der ganzen Theorie zu machen hier also die Liste der aus meiner Sicht besten kostenlosen Online Farbhelfer Tools.

mycolor.space

Ich finde das mycolor.space als Tool ziemlich ausgereift. Auch wenn es in letzter Zeit etwas ruhiger um die Entwicklung geworden ist. Alles was Du brauchst ist der Hex-Code Deiner Primärfarbe. Du erhältst nach der Eingabe Deiner Farbe mehrere Vorschläge für sehr gut abgestimmte Gradienten und eine wirklich große Auswahl von passenden Farbpaletten.

Obwohl sich das Tool offiziell immer noch in einem Beta Zustand befindet, ist es äußerst benutzerfreundlich. Und als Webentwickler kann ich nur sagen: Respekt! Auf jeden Fall ist das Tool einen Blick wert.

coolors.co

Gerade für Anfänger ist auch das Tool von Coolors.co sehr zu empfehlen. Eigentlich braucht man überhaupt keine Vorkenntnisse, um mit dem Tool Farbschemata für sein Corporate Design, gezielte Marketing Aktionen oder eben auch Websites zu generieren. Die Website bekommt durch eine iOS- und eine Google Play-App Unterstützung.

Color Hunt

Color Hunt ist eigentlich weniger ein wirklicher Farbpaletten Generator, als eine Austauschplattform. Das Beste daran ist, dass du ohne jede Vorkenntnis von einer riesigen Auswahl wunderschöner Farbpaletten profitieren kannst. Eigentlich war die Plattform mal ein Siteprojekt von Gal Shir, der die Plattform ins Leben gerufen hat, um die Farbpaletten in Projekten mit seinen Designerkollegen zu tauschen und zu teilen.

Mittlerweile wird die Plattform von sehr vielen Designern weltweit genutzt. Deshalb geben auch die Bewertungen der Farbschemata gerade im internationalen Kontext sehr wichtige Anhaltspunkte.

Adobe Color

Ist quasi das Urgestein der Farbschema Generatoren. Früher hieß das Tool Adobe Kuler. Warum auch immer. Für Adobe untypisch ist, dass die App kostenlos zur Verfügung steht. Aber keine Sorge, es hat einige Updates hinter sich.

Mit dem Adobe Color kannst Du eigene Farbpaletten erstellen, diese speichern und auch mit einer Community teilen. Hinsichtlich der Benutzerfreundlichkeit ist es etwas anspruchsvoller als die anderen beiden Tools. Dafür bietet es aber auch diverse fortgeschrittene Funktionen und Einstellungsmöglichkeiten.

Falls Du Adobe Nutzer bist, gibt es auch eine Integration zu den kostenpflichtigen Programmen wie Photoshop oder Illustrator.

Colormind

Colormind ist ein spannendes Projekt. Bei diesem Farbschema-Generator kommt künstliche Intelligenz zum Einsatz. Du kannst Deine Primärfarbe angeben und los geht es. Dank Deep Learning  lernt Colormind Farbstile aus Fotografien, Filmen und populärer Kunst und macht Dir auf dieser Basis Vorschläge.

Material Palette

Wenn es Dir schwer fällt dich für einen Ansatz zu entscheiden, gibt es eine weitere einfache Möglichkeit zu einem Farbschema zu kommen. Du kannst Dir Anregungen von Google Design holen. Unter Google Design arbeiten verschiedene Autoren, Designer und Entwickler von Google zusammen. Das Ziel ist innovatives Design zu fördern.

Ein wesentliches Ergebnis ist das sogenannte Material Design. Die Tools von Google bieten eine Menge hilfreicher Funktionen fürs Design und verfügen auch über ein Farbschema-Tool. Hier kannst Du in einigen Schritten ein Material-Farbschema erstellen. Das Tool gibt auch Hinweise zur Barrierefreiheit Deiner Farbkombination.

5. Die Gestaltung von Weißräumen (Leerräumen)

Damit keine Begriffsverwirrung entsteht, müssen wir kurz erklären, was Weißräume sind.

Bei Leerraum handelt es sich um den Bereich zwischen Designelementen. Dazu zählt auch der Platz innerhalb einzelner Gestaltungselemente und der Raum zwischen Typografie-Glyphen.

Häufig gibt es lebhafte Diskussionen zwischen Designern und Auftraggebern bezüglich der Nutzung von Weißräumen. Während Designer den Platz nutzen möchten, um Eleganz zu vermitteln und eine gute Benutzererfahrung zu erstellen, werden Weißräume kundenseitig nicht selten als Platzverschwendung empfunden.

Dein Farbschema & Weißräume

Was hat das nun mit Farben zu tun? Lass Dich vom Namen nicht in die Irre führen. Der Weißraum muss nicht weiß sein. Du kannst diese Räume mit einer beliebigen Farbe, Textur, einem Muster oder sogar einem Hintergrundbild füllen. Deshalb ist der Begriff Leerraum eigentlich treffender.

Dieser Raum ist sehr prägende für Dein Webdesign und sollte zu alle anderen Farben Deines Farbschema passen.

Im modernen Webdesign werden meistens neutrale Farben also Schwarz, Weiß oder Grau verwendet, um diese Leerräume zu füllen. Häufig wird auch eine Abstufung der dominanten Farbe verwendet oder diese mit einem dezenten Hintergrund-Grau verschmolzen.

6. Wähle Deine Schriftfarbe

Als Schriftfarbe eignen sich eine Farben, die sich besonders stark vom Hintergrund abhebt. Wenn Du z.B. weiß als Hintergrundfarbe verwendest, sind schwarz, dunkelgrau oder dunkelblaue Schriftfarben sehr gut geeignet. Das Ziel hierbei ist immer eine gute Lesbarkeit herzustellen.

Falls Du Farbig schreiben möchtest und zudem einen farbigen Hintergrund wählst, achte zudem darauf, dass der Kontrast auch für Farbenblinde vorhanden ist. Rot und Grün sind zwar sehr kontrastreich, jedoch bei Rot-Grün-Schwäche schlecht bis gar nicht zu unterscheiden.

7. Teste und iteriere durch den Prozess

Herzlichen Glückwunsch! Du hast Dein erstes Farbschema erstellt. Das ist großartig und wenn Du willst, kannst Du es jetzt sofort für Dein Webdesign wie auch Grafikdesign verwenden.

Sei Dir aber bewusst, dass großartige Designs in der Regel nicht über Nacht entstehen. Das gleiche gilt auch für ein geeignetes Farbschema.

Eigentlich wissen alle, die sich professionell oder zumindest intensiv mit Design beschäftigen, dass ein Versuch selten ausreicht, um ein Design so gut wie möglich zu machen und exakt auf die Zielgruppe abzustimmen.

UX-Designer, Webdesigner und in der Tat alle anderen Arten von Designern unternehmen in der Regel viele Iterationen, um ein Produkt so gut wie möglich zu machen.

Deshalb ist es normal und sinnvoll, wenn Du den Prozess mehrfach wiederholst. Präsentiere dabei Dein Farbschema  zunächst einer kleinen Zielgruppe und teste, wie gut es funktioniert.

Mit den neu gewonnen Erkenntnissen kannst Du Dein Farbschema immer stärker optimieren, bis Du Deine Zielgruppe mit Deinen neuen Farben überzeugst.

Fazit zum Farbschema

Durch Auswahl der Farben, entsteht Abneigung oder Zuneigung gegenüber Deiner Marke, Deinen Produkten und Deiner Website. Aufgrund der herausragenden Rolle der Farben im Marketing ist es wichtig, die Bedeutung der Farben zu verstehen und diese zielgerichtet einzusetzen.

Mittels Farbpsychologie kannst Du steuern, wie Deine Marke wahrgenommen wird. Sie hilft Dir bei der Entscheidung, welche Farbe Du Deinem Farbschema hinzufügen solltest und vor allem auch warum. Die verschiedenen Farben senden unterschiedliche Botschaften an Deine Besucher.

Das ist auch dann so, wenn Du eigentlich gar keine spezielle Wirkung beabsichtigt. Daher ist es wichtig zu verstehen, welche Emotionen mit welchen Farben erzeugt oder verbunden werden.

Ein professionelles, zielgerichtetes Farbschema zu erstellen ist kein Hexenwerk und keine eindeutige Wissenschaft. Wenn Du die oben geschilderten Schritte (mehrfach) durchläufst, stehen die Chancen sehr gut, dass Du mit Deinem Farbschema einen echten Volltreffer landest.

Zu Inspiration können wir Dir die Farbpaletten für moderne Anwälte empfehlen, sowie vor allem die Top 12 besten Websites zu orientieren. Ihre Designs setzen neue Maßstäbe und sind farblich sehr gut abgestimmt.