Der Online Marketing Blog für Powerfrauen

Gratis Website Videotraining

In meinem Videotraining zeige ich dir alles, was du brauchst, um dir selbst als Anfängerin eine unwiderstehliche Website zu erstellen.

Melde dich hier an und sichere dir den Zugang zum kostenlosen Videotraining:

So findest du die perfekten Farben für dein Webdesign

Webdesign Farben
Inhaltsverzeichnis

Wusstest du, dass es einen extrem wirkungsvollen Weg gibt, deinem Website Besucher ein „Hier bin ich richtig – Gefühl“ zu vermitteln – und zwar noch bevor er die ersten Worte gelesen hat?

Alles, was du dazu brauchst, sind die richtigen Farben! 🌈

Was für deine Website richtig oder falsch ist, hängt selbstverständlich von vielen verschiedenen Faktoren ab. Und besonders als Anfänger ist es manchmal gar nicht so leicht, die richtige Farbwahl zu treffen.

Damit es dir ein wenig leichter fällt, eine wirkungsvolle Farbpalette für deine Website festzulegen, habe ich dir heute mein Farbsystem mitgebracht.

Dieses System ist leicht umzusetzen und somit perfekt für alle Nicht-Designer, die das Erstellen der Farbpalette möglichst anfängerfreundlich angehen möchten.

Warum Farben so wichtig sind

Farben haben die unglaubliche Superpower, völlig unterschiedliche Emotionen und Assoziationen in uns auslösen.

Im Bereich Marken- und Webdesign spreche ich gern von einem „Bauchgefühl“, das der Betrachter unserer Website erhalten soll, wenn er bei dir „vorbeiklickt“.

Noch bevor dein Website Besucher die ersten Worte gelesen hat, kannst du ihm durch die Wahl deiner Farben schon ein ganz bestimmtes Gefühl vermitteln.

Vielleicht kennst du den Spruch „Man kann nicht nicht kommunizieren“ von Paul Watzlawik.

Diese Regel gilt nicht nur für die Kommunikation zwischen Menschen, sondern auch für deine Website Farben.

Wichtig: Webdesign Farben = Marken bzw. Logo Farben

Die Farbpalette, die du auf deiner Website verwendest, sollte sich unbedingt auch in deinem Logo Design und allen anderen Markendesigns widerspiegeln.

Ganz egal, ob es nun deine Visitenkarte, dein Freebie Design oder dein Logo ist.

Sofern du bereits ein etabliertes Logo- oder Markendesign verwendest, solltest du auch deine Website Farbpalette daran ausrichten und nicht von 0 beginnen.

Die einzige Ausnahme bildet hier das sogenannte Rebranding. Wenn du deine Marke (und somit auch deinen Markenlook) komplett überarbeiten möchtest, kannst du einfach die folgenden Schritte durchführen.

Schritt 1 – Definiere deinen idealen Kunden

Beginnen wir (wieder einmal) bei den absoluten Grundlagen. Ohne die Definition deines idealen Kunden, läuft einfach gar nichts.

Denn wenn du nicht weißt, wen du mit deiner Website (und deinen Farben) ansprechen möchtest, irrst du im Dunkeln.

Solltest du deinen idealen Kunden noch nicht definiert haben, findest du hier einen kompletten Artikel darüber. Einen Fragebogen zur Definition des idealen Kunden findest du außerdem in meinem kostenlosen Website Workbook.

Schritt 2 – Definiere deine Markenwerte

Farben lösen ein ganz bestimmtes Bauchgefühl aus. Das hatten wir ja bereits besprochen.

Bei deiner Marke ist es ganz genauso!

Moment Mal… Marke?

Ja, Marke! Denn auch, wenn du beim Begriff „Marke“ vielleicht eher an große Business Riesen wie Apple, Nike oder Starbucks denkst, bist auch du eine Marke!

Wenn du keine Agentur oder Ähnliches leitest, bist du in der Regel eine Personenmarke. Das bedeutet: DU – als Person – stehst für deine Marke.

Und egal, an welcher Stelle du gerade sichtbar wirst, schickst du auch immer ein ganz bestimmtes Bauchgefühl in die Welt.

Wann immer du eine Instagram Story veröffentlichst, löst du ein ganz bestimmtes Gefühl bei deinen Betrachtern aus.

Wann immer ein Kunde mit dir zusammen arbeitet, löst das ein ganz bestimmtes Gefühl in ihm aus.

Wann immer ein Interessent deine Website besucht, löst das ein ganz bestimmtes Gefühl in ihm aus.

Auch hier gilt wieder einmal der Spruch: Du kannst nicht nicht kommunizieren.

Egal was du tust – ALLES löst ein bestimmtes Bauchgefühl beim Empfänger (also deinen Interessenten und Kunden) aus.

Damit deine Marke authentisch wirkt, solltest du dir einmal Gedanken darum machen, was deine Markenwerte eigentlich sind – denn nur so kannst du es schaffen, diese Werte auf allen möglichen Wegen nach außen zu kommunizieren. Zum Beispiel durch deine Farbpalette.

Besonders bei Personenmarken ergeben sich die eigenen Werte oft schon aus der eigenen Persönlichkeit.

Überlege dir also einmal, welche Werte deine idealen Kunden mit dir und deiner Marke in Verbindung bringen sollen.

Für meine Personenmarke habe ich beispielsweise folgende Werte festgelegt:

Vertrauen, Freude, Strahlen, Feminin

Was sind deine Werte? Welche Bauchgefühl möchtest du ausstrahlen?

Schritt 3 – Definiere deine Farbpalette

Sobald du deinen idealen Kunden und auch deine Markenwerte definiert hast, geht es an die Bestimmung deiner Farben – endlich! 😉

Wie schon zuvor einmal gesagt, gibt es extrem viele Möglichkeiten, eine Farbpalette für die Website festzulegen. Sofern du ein gutes Händchen für das Kombinieren von Farben hast, ist es auch überhaupt kein Problem, wenn du von diesem System abweichst.

Solltest du dir bei Farben allerdings oft etwas unsicher sein, ist dieses System perfekt für dich!

Der Aufbau der Farbpalette in diesem System sieht 4 Farbtöne vor:

  • Eine Hauptfarbe
  • Eine Abstufung der Hauptfarbe
  • Eine Akzentfarbe
  • Eine Textfarbe
Webdesign Farbpalette Beispiel
Beispielfarbpalette aus meinem Onlinekurs

Beginne mit der Hauptfarbe (+ Abstufung)

Deine Hauptfarbe bildet das Zentrum deiner Farbpalette.

Wähle sie anhand deiner festgelegten Markenwerte aus. In meinem kostenlosen Website Workbook findest du eine Übersicht mit den verschiedenen Farbwirkungen. Wenn du möchtest, kannst du dir das Workbook hier sichern.

Sobald du deine Hauptfarbe festgelegt hast, empfehle ich dir, zudem noch eine sehr helle Abstufung deiner Hauptfarbe zu definieren. Diese Abstufung hilft dir dabei, im selben Farbschema zu bleiben und dennoch etwas Spiel in deine Websitegestaltung zu bringen.

Auf diesem Beispiel Screenshot aus meinen Online Kurs siehst du, wie sich die Haupt- und Abstufungsfarbe einsetzen lassen:

Beispielprojekte aus meinem Onlinekurs. Deine Hauptfarbe ist in der Regel nicht nur ein wichtiger Bestandteil deines Logos, sondern auch deiner Website. Hier kannst du die Farbe besonders für die Färbung und Überlagerung bestimmter Abschnitte verwenden.

Hier siehst du die Haupt-Abstufungsfarbe im oberen Abschnitt und die Hauptfarbe als Überlagerung im unteren Abschnitt.

Akzentfarbe

Sobald du dich für eine Hauptfarbe entschieden und auch die Abstufungsfarbe definiert hast, hast du das Meiste bereits geschafft.

Zeit für die Akzentfarbe!

Die Akzentfarbe hilft dir dabei – wie der Name schon sagt – Akzente zu setzen und deine Website Gestaltung sowohl harmonischer als auch benutzerfreundlicher wirken zu lassen.

Denn deine Akzentfarbe ist perfekt für alle Elemente geeignet, die sich anklicken lassen. Also zum Beispiel Buttons und Links.

Dadurch, dass du diesen Aktionselementen immer die gleiche Farbe verleihst, tritt bei deinen Besuchern schnell ein Gewöhnungseffekt ein: „Aha, da kann ich klicken!“.

Natürlich ist es kein Muss, deine Akzentfarbe auf Aktionselemente allein zu beschränken – ich persönlich handhabe es auch ein wenig anders.

Deine Akzentfarbe eignet sich darüber hinaus für Trennlinien, Rahmen und andere dekorative Elemente.

Doch genug zum Thema Verwendung – kommen wir zur Auswahl deiner Akzentfarbe!

Hierzu möchte ich dir gern zwei Wege vorstellen:

Weg 1: Ein intensiverer Ton deiner Hauptfarbe

Diesen Weg bin ich bei meiner oben vorgestellten Beispiel-Farbpalette gegangen. Die Akzentfarbe liegt, genau wie die Hauptfarbe, in einem eher bräunlichen Bereich. Ich habe den Ton allerdings wesentlich intensiver ( und rötlicher ) gewählt, um einen guten Kontrast zur Hauptfarbe zu schaffen.

Dieser Weg ist empfehlenswert, wenn du deine Farbpalette eher einheitlich halten möchtest.

Weg 2: Nutze die Macht der Komplementärfarbe!

Wenn du es gern ein wenig bunter hast, schau dir unbedingt einmal die Komplementärfarbe deiner Hauptfarbe an.

Sicherlich hast du schon einmal einen Farbkreis gesehen.

Wenn wir davon ausgehen, dass wir den auf der Grafik markierten Lila Ton als Hauptfarbe definiert haben, bildet die im Farbkreis genau gegenüberliegende Farbe die sogenannte Komplementärfarbe:

Webdesign Farben Komplementär

Der Vorteil von komplementären Farben ist, dass sie sich gegenseitig betonen und optisch intensivieren. Diesen Effekt kannst du dir in deiner Farbpalette perfekt zu Nutze machen, in dem du deine Akzentfarbe komplementär zu deiner Hauptfarbe wählst.

Solltest du gerade keinen Farbwähler in einem Grafikprogramm oder Ähnlichem zur Verfügung haben, kannst du auch eine Website wie diese nutzen, um die Komplementärfarbe deiner Hauptfarbe zu finden (einfach auf den „add complementary“ Button klicken).

Textfarbe

Kommen wir abschließend zur Textfarbe! Diese setzt du für alle Texte deiner Website ein – egal ob Fließtext oder Überschrift.

Anstatt hier auf ein Tiefschwarz zu setzen, empfehle ich dir, ein neutrales, kühles oder warmes Dunkelgrau auszuwählen.

Tiefschwarz fügt sich nicht nur äußerst schlecht in die meisten Farbpaletten ein, sondern erzeugt auch einen zu starken Kontrast auf den meisten Bildschirmen.

Schau dir deine Farbpalette also noch einmal an und frage dich:

Sind diese Farben eher warm, kühl oder vielleicht sogar neutral?

Wähle anschließend einen entsprechenden dunkelgrauen Ton aus.

Schritt 4 – Hexadezimalcodes notieren

Sobald deine Farbpalette steht, empfehle ich dir, die Hexadezimal Farbcodes abzuspeichern, sodass du bei deiner Website Gestaltung immer wieder darauf zurück greifen kannst.

Hierzu kannst du zum Beispiel ein Tool wie dieses verwenden.

Wer die Regeln versteht, darf sie auch brechen 🙂

Ich hoffe, ich konnte dir mit dieser Anleitung dabei helfen, deine Website Farbpalette festzulegen. Wie in so vielen Bereichen gilt auch für die Definition deiner Farbpalette: Wenn du die Regeln verstehst und anwenden kannst, dann darfst du sie auch brechen!

Nutze diese Anleitung als Leitfaden, der dir dabei hilft, die ersten Schritte zu gehen. Höre beim Gestalten deiner Website auf dein Bauchgefühl und hole dir hin und wieder auch einmal eine Meinung von jemandem ein, auf dessen Geschmack du vertraust.

Ich wünsche dir jetzt viel Spaß beim Definieren deiner Farbpalette!

PS. Solltest du dich von deiner Website Erstellung überfordert fühlen, schau dir auch gern einmal meinen WordPress Online Kurs an. Als Teilnehmerin erhältst du nicht nur über 80 vorgefertigte Farbpaletten sondern auch gern mein Feedback zu deiner selbst kreierten Farbpalette 🙂

KOSTENLOSES VIDEOTRAINING

Wie du eine STRATEGISCHE WEBSITE erstellst, die BESUCHER IN KUNDEN verwandelt

… und zwar ohne vorher noch Marketing oder Informatik studieren zu müssen 😜

Teile diesen Blogartikel

Diese Artikel könnten dir auch gefallen:

* Bei diesem Link handelt es sich um einen Affiliate-Link. Das bedeutet, dass ich eine Provision erhalte, wenn du auf der verlinkten Website etwas kaufst. Ich empfehle nur Produkte, von denen ich 100%ig überzeugt bin. Für dich entstehen selbstverständlich keine zusätzlichen Kosten!
Website-Heldinnen-WordPress-Kurs
Hey, ich bin Annika!
Auf meinem Blog findest du spannende Tipps und Tricks rund um die Themen Webdesign, Online Kurs Erstellung und Online Marketing.
Menü schließen