Farben für die Website zusammenstellen
Farben wecken Gefühle. Und das, ob du willst oder nicht. Wenn du also Farben für deine Website zusammenstellst - wie kannst du erreichen, dass dein Kunde sich bei dir abgeholt fühlt?
Website Farben: Zeigt Blau Stärke oder doch eher Entspannung?
Die meisten werden dir jetzt sagen, du musst die Farben für deine Website so auswählen, dass sie genau deine Zielgruppe ansprechen. Sicher ein guter Ansatz. Die Frage ist nur, welche Farben sind das? Die Assoziationen und Empfindungen sind von Mensch zu Mensch unterschiedlich. Sie werden zum Beispiel von persönlichen Erfahrungen, kulturellen Hintergründen, aber auch durch die Mode beeinflusst.
Bestimmt ist etwas dran, wenn es heißt: Nimm Blau, wenn du als Unternehmen Stärke demonstrieren willst. Oder Schwarz, wenn du Macht und Eleganz zeigen willst, aber bedeutet das gleichzeitig, wenn du Blau als Farbkonzept deiner Website hast, dass du Stärke zeigen willst? Denn vielleicht ist es eher Entspannung?
Die Farbpalette deiner Website zeigt deine Persönlichkeit
Deshalb ist mein Ansatz, Farben für die Website zusammenzustellen, ein anderer. Ich will erst einmal wissen, was du fühlen möchtest. Was willst du ausdrücken? Was ist das Gefühl, das deine Kunden und Kundinnen haben sollen, wenn sie bei dir waren oder dein Angebot genutzt haben? Überlege dir welche Eigenschaften dich und deine Werte, aber auch das Gefühl deiner Kund:innen beschreiben, die dein Angebot genutzt haben.
- Schreibe dir 7 Eigenschaften auf: Zum Beispiel Entspannung, Motivation, Selbstbewusstsein...
- Nimm dir daraus die zwei für dich treffendsten Begriffe. Überlege dir welche Farben diese Eigenschaft für dich ausstrahlen könnten. - Hör in dich hinein, bestimmt hast du ein Bild, eine Assoziation oder eine Vision, die deine Farben deutlich machen.
Perfekt: Du hast die Basis für dein Farbschema.
Dein Farbschema
Ein Farbschema umfasst zwei oder auch mehr Farben bzw. Farbtöne.
Primärfarbe: Die Hauptfarbe(n) deiner Marke oder deines Designs, die am häufigsten verwendet wird.
Sekundärfarben: Zusätzliche Farben, die verwendet werden, um die Primärfarbe zu ergänzen und Kontrast zu schaffen.
Akzentfarbe: Farbe, die eingesetzt werden, um Aufmerksamkeit auf wichtige Elemente wie Call-to-Action-Buttons oder Links zu lenken oder auch Details hervorzuheben.
Barrierefreiheit und Farben: Wichtige Aspekte für deine Website
Achte unbedingt darauf, dass deine Farben einen ausreichenden Kontrast bieten. Das gilt vor allem, wenn du Text auf einer Farbfläche platzierst. Dein Text sollte gut lesbar ist. Das ist eigentlich klar, wird aber in Zukunft immer wichtiger.
Es geht um die Barrierefreiheit, die in den kommenden Jahren zum Teil durch gesetzliche Anforderungen verschärft wird. (Barrierefreiheitsstärkungsgesetz Juni 2025) Das Gesetz beinhaltet, dass alle Menschen, auch wer eine Beeinträchtigung hat, die Inhalte einer Website problemlos erfassen können.
Es gibt unterschiedliche Anforderungen, die in Zukunft erfüllt werden sollen, wenn es jetzt aber um Farben geht, sind nicht nur blinde Menschen, sondern auch Menschen mit einer Farbsehschwäche oder einfach Menschen, die nicht mehr so gut sehen gemeint. Achte also auf:
-
Kontrast und Schriftgröße: Der Kontrast der Farben in Kombination mit der Schriftgröße ist entscheidend.
-
Farben testen: Nutze Tools, um sicherzustellen, dass deine Farben den Anforderungen entsprechen. Die aktuelle Forderung ist AA, aber ich glaube es wird in Zukunft auf AAA hinauslaufen.
-
Lesbarkeit vor Design: Entscheide dich im Zweifelsfall für die bessere Lesbarkeit, auch wenn es manchmal schwer fällt.
Tools für Kontraste:
Wie gehst du vor, um dein Farbschema zu entwickeln?
Gib deine ausgewählten Farben, vielleicht Rot und Blau, in die Google Bildersuche oder bei Pinterest ein. Hier bekommst du schon einmal viele Inspirationen, wie deine Farben in verschiedenen Farbabstufungen und Kombinationen wirken. Was passt am besten zu dem was du aussagen willst? Mach einen Screenshot und es geht zum nächsten Schritt.
Welches Tools beim Farben zusammenstellen?
Was du brauchst um die Farben für deine Website anzulegen, ist der sogenannte Hex-Code deines Farbtones. Das ist eine Kombination aus sechs Buchstaben oder Zahlen, die mit einer Raute (#) beginnt. Dieser Code sagt deinem Browser, wie die Farben, zum Beispiel eines Hintergrunds oder des Textes dargestellt werden sollen.
Ich habe eine Weile experimentiert, wie du dir ohne eigene Software kostenlos Farben für deine Website zusammenstellen kannst. Meine Lösung ist www.coolors.co. Es gibt eine Anleitung auf Englisch. Aber ich erkläre dir hier wie du vorgehen kannst.
Bild hochladen: Du kannst jetzt entweder deinen Screenshot der Farbpalette, aber auch ein Foto hochladen aus dem du Farben generieren lassen möchtest.
Farben anpassen: Die Farben, die dir angezeigt werden, kannst du noch erweitern oder verändern. Bewege deine Maus über das Bild und verschiebe die ausgewählte Farbe, um Varianten zu finden.
Farben anzeigen lassen: Im nächsten Schritt sagst du, dass du die Bildauswahl im Generator öffnen willst und zack, hast du deine Hex-Codes.
Feinabstimmung: Wenn du willst, kannst du die Farben noch einmal anpassen. Klick auf ein Farbfeld, dort werden die verschiedene Symbole angezeigt. Wähle das Rastericon (view shades/Farbtöne anzeigen) hier kannst du dir einen abgestuften Farbton auswählen. Wenn du mit deiner Farbe zufrieden bist, speicherst du sie mit dem Schloss.
Du kannst direkt im Tool den Kontrast prüfen. Das ist wichtig für die Lesbarkeit. Nicht nur für deine Leser:innen, sondern auch unter dem Aspekt der Barrierefreiheit!
Entscheide dich für deine Primär-, Sekundär- und Akzentfarbe.
Achtung: Falls dir die Hex-Codes nicht angezeigt werden, klick in ein Farbfeld. Es gibt auch eine Export-Funktion, aber hier wird der Hex-Code nicht korrekt angezeigt, da zwei 'ff' angehängt werden! Nimm deshalb entweder den HSL Wert oder schreib dir die Hex-Codes auf der Farbtafel direkt ab. So gehst du sicher, dass du die exakten Farbwerte erhältst.
Tools um Farben auszusuchen:
https://color.adobe.com/de/create/color-wheel
https://coolors.co/ habe ich schon genannt, aber zu Vollständigkeit
Das Farbkonzept der Website hilft dir, dich abzuheben
Als Solo-Selbstständige ist es besonders wichtig, sich in der Masse von Mitbewerbern abzuheben. Und das kann dir gelingen, indem du deinen potenziellen Kunden emotional ansprichst. Das funktioniert über deine Texte, deine Bilder und auch über das Farbkonzept deiner Website. Denn in oft ist es so, dass der Entschluss, dich als Berater:in zu beauftragen - und dabei ist es egal, ob es jetzt um Ernährung, Marketing oder Yoga geht – nicht vom Preis abhängt.
Sondern was zählt ist vielmehr das Vertrauen, das du ausstrahlst. Du dich authentisch und glaubwürdig zeigst und mit dieser Wirkung das Gefühl vermittelst, dass du helfen kannst und die passende Lösung für deine Kund:innen anbietest.
Die Farben für deine Website - dein Branding
Die Farben für dein Webdesign solltest du als Branding nutzen. Das heißt du baust auf diese Farben deine Marke auf. Nutze die Farbpalette für Social Media, deine Flyer, einfach für alles was dich in der Öffentlichkeit zeigt. Gerade hier zeigt es sich, dass eine Einschränkung auf nur 2 Farben schnell nerven.
Es gibt zwar die These, dass mehr als 2 Farben auf der Website unruhig seien, aber ich empfinde das nicht. Im Gegenteil, wenn wir jetzt an unsere Beispielfarben denken, kann ich mir alle Farben in Kombination super vorstellen. Je nachdem was du ausdrücken willst, setzt du die helleren Farben als Akzent oder als Hauptfarben ein. In deinen Posts kannst du alle Farben durchwechseln und vielleicht deine Kategorien damit betonen und damit einen Wiedererkennungswert schaffen.
Fazit
Die Farben deiner Website sollten zu dir und deinen Werten passen. Mein Ansatz ist die üblichen Regeln und Trends nicht zu beachten, sondern lieber eine eigene Farbwahl zu treffen. Denn es geht darum mit deiner Website - also deinen Inhalten und deinem Webdesign - Menschen mit deiner Expertise, aber auch emotional abzuholen. Zeige dich authentisch, sei mutig und bring deine Persönlichkeit zum Ausdruck, um dich von Mitbewerbern abzuheben.
Bau dir deine Marke mit deinen Farben und deinem Branding auf. Sei dabei konsequent: auf deiner Website, in Social Media und in deinen Printprodukten.
Christina Martens
Meer, Wind, meinen Job, den ich seit fast 30 Jahren mache. Alles Dinge, die ich liebe und mit Leidenschaft lebe.
go hooray gibt es damit du, auch wenn du noch nie etwas mit Webseiten zu tun hattest, eine Website bekommst, die du selbst anpassen kannst, dich zeigt und dich richtig stolz macht. Mehr zu mir...