In diesem Beitrag erfährst du alles über die Wirkung von Farben, wie du deine Website Farben findest, dein Farbschema erstellst und welche Tools du nutzen kannst. Außerdem bekommst du einen Überblick über die Unterschiede von RGB, CMYK, Hex Code (falls da gerade nur Fragezeichen deinem Kopf sind - die Auflösung kommt im Blogbeitrag). Jetzt wird’s also richtig bunt! Lass uns loslegen mit deinen Website Farben.
Der erste Eindruck zählt, auch auf einer Website. Innerhalb von 50 Millisekunden (ja, das ist sehr kurz) wird unterbewusst schon ein Urteil gebildet, ob es sich lohnt, deine Website weiter anzuschauen. Neben Technik, Schriften, Bildern und Inhalten spielen auch die Website Farben eine große Rolle. Wofür steht deine Brand (= Marke), wofür stehst du? Welches Gefühl soll deinen Kund:innen vermittelt werden?
Du hast bestimmt schon einmal davon gehört, dass jeder Farbe eine bestimmte Wirkung und Bedeutung zugesprochen wird. Sie beeinflussen unterbewusst unsere Gefühle und unser Handeln.
Nicht nur im Alltag, beispielsweise beim Einkaufen, haben Farben auf uns eine unterbewusste Wirkung, sondern auch in der Online-Welt. Im Bruchteil von einer Sekunde wird entschieden, wie die Website auf uns wirkt. 90% dieser Entscheidung basieren auf der Farbgebung.
Wie genau du diese Wirkung für deine Websitegestaltung nutzen kannst und welche Farben deine Brand widerspiegeln, wirst du im Verlauf erfahren.
Farben und Markenidentität
Wie du bereits gemerkt hast, spielen Website Farben eine essentielle Rolle und sollten deshalb mit Bedacht gewählt werden. Bevor du mit der Erstellung deines Farbschemas loslegst solltest du dir deshalb zunächst folgende wichtige Fragen stellen.
- Welche Dienstleistung bietest du an?
- Wer ist deine Zielgruppe?
- Welche Emotionen und Gefühle sollen beim Betrachten deiner Website ausgelöst werden?
- Was macht die Konkurrenz?
- Welche Farben gefallen dir und passen sie zu deiner Marke und deiner Zielgruppe?
Besonders wenn du noch ganz am Anfang stehst und noch keine Corporate Identity hast, solltest du dich intensiv mit den oben genannten Fragen beschäftigen. Die Auswahl deiner Farben bestimmt deinen zukünftigen Markenauftritt, nicht nur offline sondern auch online. Mache dir deshalb Gedanken darüber, welche Farben die Werte und Emotionen deiner Brand bestmöglich unterstützen.
Die Bedeutung von Farben
Beginnen wir mit dem Farbkreis, um ein Verständnis für Farben zu bekommen. Dieser kreis dient als eine Art Ordnungssystem, in dem die Farben kreisförmig als Primär- Sekundär- und Tertiärfarben angeordnet sind.
Insgesamt werden hier 12 dargestellt, wobei es drei Primärfarben gibt, aus denen sich die restlichen Farben bilden: Blau, Rot und Gelb. Ihnen gegenüber liegen sogenannte Komplementärfarben, welche den größten Kontrast darstellen.
Farbe Rot
| Positive Assoziation | kraftvoll, warm, erregend, energiegeladen, stark |
| Negative Assoziation | gefährlich, aggressiv, dominant, arrogant |
Rot ist eine absolute Signalfarbe und eine der intensivsten Farben überhaupt. Sie wird oft als Akzentfarbe genutzt, um die Aufmerksamkeit der Kund:innen zu erlangen, aber gleichzeitig keine negativen Assoziationen auszulösen.Wird deine Website mit dieser Farbe überladen, dann hat haben deine Kund:innen förmlich das Gefühl, dass du sie anschreist (und das möchtest natürlich nicht). Die Farbe Rot kannst du verwenden, wenn dein Business dem Thema Abenteuer, Sport oder auch Gesundheit zugeordnet ist. Du solltest Rot definitiv vermeiden, wenn Luxus oder Nachhaltigkeit Kernthemen deines Business sind. Dies könnte zu aggressiv wirken.
Je reiner die Farbe ist, desto schwieriger wird die Umsetzung, ohne, dass negative Assoziationen entstehen. Wir empfehlen dir deshalb bei der Verwendung von Rot auf Rot-Nuancen zu setzen wie beispielsweise Weinrot, Pink oder Rosarot und natürlich alle anderen Facetten.
Farbe Gelb
| Positive Assoziation | freundlich, stark, warm, glücklich, leicht, verspielt, optimistisch |
| Negative Assoziation | egoistisch, gierig, aufdringlich |
Die Farbe Gelb ist die wohl strahlendste Farbe von allen. Sie eignet sich sehr gut im Bereich des Reisens, da sie Glücksgefühle auslöst. Sie strahlt Freude aus Gelb und kann deinem Unternehmen eine jugendliche Stimmung verleihen. Da die Farbe aber auch sehr schnell überfordern kann und die Augen ermüdet, eignet sie sich nicht als Hauptfarbe, sondern nur als Akzentfarbe.
Wählst du sie als Hauptfarbe, kann es schnell unprofessionell und kitschig wirken. Wählst du z.B. auch Nuancen aus, wie beispielsweise goldgelb, wirkt dies wiederum sehr edel und luxuriös.
Farbe Blau
| Positive Assoziation | ruhig, loyal, vertrauensvoll, zuverlässig |
| Negative Assoziation | traurig, kalt, unpersönlich, konservativ |
Die Farbe Blau ist der König unter den Farben und die Beliebteste noch dazu, da sie für absolute Klarheit und Beständigkeit steht.
Sie wird z.B. auch ganz häufig in Bereichen verwendet, die mit sensiblen Daten oder auch Zahlungsabwicklungen in Verbindung stehen (z.B. PayPal, American Express, Visa), da die Farbe Vertrauen vermittelt, gerade auch in Bezug auf den Datenschutz. Blau strahlt Glaubwürdigkeit aus, es wirkt reif, bodenständig und dein Business kann durch den richtigen Einsatz ernst genommen werden.
Farbe Grün
| Positive Assoziation | natürlich, heilend, erholsam, entspannend, positiv, erfrischend |
| Negative Assoziation | unerfahren, unreif, eifersüchtig |
Die Farbe Grün sprüht vor Vitalität und Natürlichkeit. Sie wird gerne für Reisethemen wie Nachhaltigkeit, Outdoor und Natur verwendet. Sie ist eine der wenigen Farben, die sich sowohl als Akzentfarbe als auch als flächendeckende Farbe eignet, da sie sehr viel Harmonie ausstrahlt und die Konzentration stärkt. Auch kulturell wirkt sie ausgeglichen und steht für Wachstum. Du bist im Bereich Garten, Gesundheit oder Finanzen tätig? Dann kann Grün deine Farbe sein.
Farbe Orange
| Positive Assoziation | energiegeladen, warm, begeisternd, ehrgeizig |
| Negative Assoziation | unruhig, aufdringlich, kindlich |
Die Farbe Orange ist eine Mischfarbe aus Rot und Gelb und besitzt somit die Eigenschaften beider Farben. Sie wirk sehr lebendig und fröhlich, kann aber auch, wie Rot, eine aggressive Wirkung aufweisen. Orange ist eine sehr hippe Farbe und spricht vor allem die jüngere Generation an. Orange eignet sich perfekt als Akzentfarbe, da sie so die Seite belebt, dennoch nicht aufdringlich wirkt. Du bist in einem kreativen Bereich und tüftelst gerne an Innovationen? Dann darfst du zur Website Farbe Orange greifen.
Farbe Violett
| Positive Assoziation | magisch, fantasievoll, kreativ, modern, spirituell |
| Negative Assoziation | unsachlich, mysteriös, eitel, unnatürlich |
Die Farbe Violett ist eine sehr magische Farbe, weshalb sie sich oft im Bereich der Spiritualität und Esoterik wiederfindet. Doch auch für einen Reiseblog kannst du die Farbe einsetzen. Gerade im Bereich Luxus eignet sich Violett besonders gut, da sie modern und hochwertig wirkt. Violett ist auch eine gute Wahl, wenn du hauptsächlich weibliche Kundinnen ansprechen möchtest.
Farbe Braun
| Positive Assoziation | warm, erdig, zuverlässig, naturverbunden |
| Negative Assoziation | altmodisch, schwer, langweilig, dreckig |
Braun ist eine sehr erdige Farbe und wird oft mit natürlichen Materialen, wie beispielsweise Holz, in Verbindung gebracht. Gerade im Bereich Outdoor, Abenteuer, Natur und auch Nachhaltigkeit eignet sie sich sehr gut, da sie zum einen die Verbindung zur Erde darstellt und gleichzeitig auch Zuverlässigkeit und Schutz vermittelt. Trotz dieser doch sehr positiven Eigenschaften ist sie die am wenigsten genutzte Farbe und stößt auch sehr häufig auf Ablehnung. Allerdings kann sie auch dazu führen, dass du aus der Masse hervorstichst, eben ganz aus jenem Grund, dass sie kaum Verwendung findet.
Grau ist eine typische Businessfarbe, da sie sehr professionell und elegant wirkt. Grau ist eine sehr gute Akzentfarbe, da sie sich mit fast allen Farbtönen perfekt kombinieren lässt.
Schwarz wird sehr gerne als Akzentfarbe verwendet, da sie in Kombination mit anderen Farben sehr kontrastreich wirkt und Bereiche besonders hervorheben kann.
Weiß vermittelt sehr viel Klarheit und wird deshalb auch überwiegend als Hintergrundfarbe auf Webseiten genutzt.
Die 60-30-10 Regel
Ist die Wirkung von Farben nicht spannend? Lass’ all das erst einmal auf dich wirken. Mit diesem Wissen kannst du nun dein ganz eigenes Farbschema erstellen, welches zu dir und deinem Business passt. Bevor du aber mit der Erstellung deines individuellen Farbschemas beginnst, möchte ich dir noch ein paar Tipps und eine wichtige Regel mit auf deinen Weg geben, bevor du kreativ wirst und dein Website Farben auswählst.
Diese Regel besagt, dass deine Webseite im besten Fall aus drei verschiedenen Farben bestehen soll. Dein gewähltes Farbschema sollte in der Ratio von 60:30:10 auf deiner Webseite vertreten sein. 60% Primärfarbe, 30% Sekundärfarbe und 10% Akzentfarbe. Bei der Auswahl deiner Farben ist es essentiell, dass du die richtige Kombination von Farben wählst.
Kostenlose Tools für die Erstellung deines Farbschemas
Zur Auswahl deines Farbschemas oder auch, um zunächst einmal die Vielfalt der Farben zu erkennen, empfehle ich dir folgende Tools, welche du kostenlos nutzen kannst:
Adobe Color Wheel
Adobe Color Wheel ist eines der beliebtesten Tools, wenn es um die Erstellung von passenden Farbpaletten und Kombinationen geht. Es können entweder benutzerdefinierte Farben angelegt werden oder anhand einer Hauptfarbe die verschiedenen Farbschemata wie beispielsweise komplementär oder monochromatisch ausgewählt werden.
Coolors
Dieses Tool ermöglicht es dir ziemlich schnell dein eigenes, passendes Farbschema mit dem Farbgenerator zu erstellen. Coolors ist auch perfekt für erste Inspirationen, da es dir eine riesige Auswahl an vorgefertigten Farbpaletten bietet. Lass dich direkt inspirieren: https://coolors.co/palettes/trending
Farb-Tabelle
Die Seite von Farb-Tabelle eignet sich hervorragend um für deine Hauptfarben passende Abstufungen und Schattierungen zu finden. Hier findest du zu jeder Farbe die passenden Nuancen.
Color Hexa
Color Hexa funktioniert ähnlich wie das Tool "Farb-Tabelle". Hier kannst du ausgehend von deiner Basisfarbe verschiedene Farbkombinationen und Helligkeitsabstufungen anzeigen lassen. Außerdem erhältst du detaillierte Infos zu deiner gewählten Basisfarbe.
0 to 255
Ein weiteres Tool für Farbnuancen und Abstufung einer Basisfarbe ist 0-255.
Canva Color Palette Generator
Mit dem Canva Color Palette Generator kannst du aus deinen Lieblingsbildern, die du auch für deinen Webauftritt verwenden möchtest, die passenden Farben herausfiltern lassen. Lade hierzu einfach ein Bild hoch und der Generator erstellt für dich eine passende Farbpalette auf Basis deines Bildes.
Hex Code, RGB & CMYK - Bedeutung und Unterschiede
Steigen wir nun etwas tiefer in die Materie der Farben ein. Bestimmt hast du schon mal von den oben genannten Begriffen gehört, dich womöglich aber immer gefragt, was sie tatsächlich bedeuten und worin der Unterschied liegt.
Grundsätzlich unterscheidet man zwischen dem additiven und dem subtraktiven Farbmodell. Die additive (kombinierende) Farbmischung basiert auf Licht, die subtraktive (herausfilternde) Farbmischung auf Pigmenten.
RGB Farbmodell
Die drei Grundfarben des additiven Farbmodells sind Rot, Grün und Blau, kurz RGB. Sie werden auch als Lichtfarben bezeichnet. Allein durch die Mischung dieser drei Grundfarben ergeben sich mehr als 16 Millionen Farbkombinationen, Wahnsinn oder? Je mehr Farben gemischt werden, desto heller wird der Farbton, bis hin zum reinen Weiß. Das additive Farbmodell, bzw. die RGB Farben werden aufgrund der Beschaffenheit für digitale Medien verwendet. Suchst du deine Website Farben aus, solltest du unbedingt mit dem RGB-Modell arbeiten.
CMYK Farbmodell
CMYK steht für Cyan (Türkis), Magenta (Purpur), Yellow (Gelb) und Key Color (Schwarz) und repräsentiert das subtraktive Farbmodell. Mischt man diese Farben werden diese im Gegensatz zu den RGB Farben nicht heller sondern dunkler. Dieses Farbmodell wird für alle Printmedien verwendet. Möchtest du also Flyer oder Visitenkarten mit deinen Brand Farben erstellen, solltest du deine Website Farben von RGB in CMYK umwandeln. Dies kannst du beispielsweise mit Grafikprogrammen wie Adobe Photoshop erstellen. Das CMYK Farbmodell wird immer in Prozent angegeben.
Hexadezimalcode
Der Hexadezimalcode basiert auf dem RGB Farbmodell und wird immer mit einem Hashtag dargestellt. Der Hex Code wird hauptsächlich in der HTML Programmierung eingesetzt und ist für dich relevant, wenn du deine Website Farben einpflegen möchtest. Du kannst online ganz einfach deine RGB Farben in Hex Codes umwandeln lassen. Hier kannst du das Tool Farb-Tabelle, welches bereits oben vorgestellt wurde, verwenden.
Machen wir zum Abschluss noch ein kurzes Praxisbeispiel anhand unserer Akzentfarbe:
RGB Farbe: 167,170,148
Hex Code: #a7aa94
CMYK: C=38 M=24 Y=42 K=7Was ist für deine Website Farben nun relevant?
Fazit
Wie du herausfindest, welches Farbschema zu dir und deinem Business optimal passt? Am besten in der ganzheitlichen Betrachtung deiner Brand.
Du erinnerst dich noch an den Blogbeitrag zum Thema Copywriting? Nicht nur Texte, sondern auch Farben, Schriften und Co. sind Teil deiner Unternehmenskommunikation. Genau deshalb sollte dein Branding holistisch, also ganzheitlich, aufgebaut werden.
Wofür stehst du? Welche Werte vertrittst du? Wen möchtest du ansprechen? Wie möchtest du wahrgenommen werden? Dies sind nur einige Fragen, welche du dir auf dem Weg zu deinen Website Farben und deiner gesamten Brand stellen darfst.
Suchst du Unterstützung, um dein Branding ganzheitlichen anzugehen? Dann schreib’ uns sehr gerne eine Nachricht und wir besprechen gemeinsam deine Business-Vision und lassen Großes entstehen.
