Ich spreche hier von Website-Farben. Aber im Grunde geht es um deine Markenfarben oder Brandfarben. Wenn die bereits stehen, dann verwende sie unbedingt auch auf deiner Website.
Wenn du noch keine Farben hast oder nur eine einzelne Farbe für dein Logo, dann zeige ich dir hier eine einfache, schnelle Methode, wie du deine Website-Farben festlegen kannst. Und damit dann auch die Farben für deine restliche Kommunikation mit der Welt.
Farbpsychologie
Ein typischer Anfängerfehler ist, sich seine Markenfarbe nach der aktuellen Lieblingsfarbe auszusuchen. Es kann zwar sein, dass man damit richtig liegt, aber in 9 von 10 Fällen passiert dann Folgendes: Das Thema Farbe bekommt Priorität in deinem Kopf. Plötzlich siehst du überall tolle Farben und Farbkombinationen. Du schwenkst weg von deiner ursprünglichen Farbe. Aber was jetzt? Die Entscheidung ist unendlich schwer. Dann siehst du eine Farb-Kombi und denkst dir: Die ist es. Die will ich auch! Aber oh Wunder: Nachdem du schon sehr viel Arbeit in das Erscheinungsbild deiner Marke und deiner Website gesteckt hast, wirst du unsicher. War das wirklich die richtige Wahl? Du fühlst es irgendwie nicht mehr.
Damit das nicht passiert, ist es für dein Seelenheil am besten, wenn du die Farbpsychologie zu Rate ziehst. Du gehst weg von der Frage: Welche Farbe finde ich am schönsten? Stattdessen fragst du dich: Welches Gefühl will ich mit meiner Marke bei meinen Kunden auslösen? Für welche Werte stehe ich?
Rot
Achtung, Gefahr, Leidenschaft, Liebe, Sexualität, Genuss, Stärke, Macht (Primärfarbe von Netflix)
Orange
Frische, Jugend, Kreativität, Gesundheit, Lebensfreude, Selbstbewusstsein (Primärfarbe von ING Diba)
Gelb
Optimismus, Freude, Spiel, Fröhlichkeit, billig (Schnäppchen), Warnung (z. B. Wespe), Wärme (Primärfarbe von IKEA)
Grün
Frische, Natur, Umwelt, Bio, Nachhaltigkeit, Gesundheit, Wachstum, Qualität, Ruhe (dunklere Töne) (Primärfarbe von Heineken)
Blau
Verlässlichkeit, Vertrauen, Autorität, Kompetenz, Ruhe, Frieden, Kälte, Depression (dunkle Töne) (Primärfarbe von LinkedIn)
Violett
Majestätisch, edel, spirituell, mysteriös, Luxus, Reichtum (dunkle Töne), Ambition, Transformation (Primärfarbe von Twitch)
Rosa & Pink
Romantik, Unschuld, Weiblichkeit, Aufrichtigkeit, Selbstbewusstsein, Nostalgie (Altrosa), (Primärfarbe Telekom)
Braun
Erde, Natur, Vertrauen, Ehrlichkeit, Bodenständigkeit, Ganzheitlichkeit, Wärme, (Primärfarbe von UPS)
Schwarz
Kultur, Eleganz, Luxus, Seriosität, Drama, Trauer, Nacht, Sicherheit, (Primärfarbe von Chanel, Gucci, Prada...)
Weiss
Reinheit, Einfachheit, Unschuld, Ehrlichkeit, Minimalismus, Perfektion (Primärfarbe von Apple)
Bunt
Vielfalt, Abwechslung, Aufgeschlossenheit, Toleranz, Lebensfreude, Kindlichkeit (meine Primärfarbe und Google's)
Box-Out Methode: Primär-, Sekundär- und Akzentfarbe
- Wähle deine Primärfarbe auf dem Farbrad (orientiere dich unbedingt an der Farbpsychologie).
- Wähle deine Sekundärfarbe: 3 Felder nach links oder rechts oder eine Schattierung der Primärfarbe (hoch oder runter)
- Wähle deine Akzentfarbe: Gegenüber von Primärfarbe, dann 3 nach rechts oder links.
Farbe 4 + 5: Neutraltöne
Zur Verwendung auf der Website benötigst du auch noch 1–2 neutrale Farben, die du als Hintergrundfarbe neben Weiß verwenden kannst.
Ein heller Grau- oder Sandton funktioniert fast immer. Oder du wählst noch eine blasse Variante deiner Primär- oder Sekundärfarbe.
Ein kleiner Pro-Tipp: Achte bei der Kombination deiner Primärfarbe und der neutralen Töne immer auf den Kontrastwert, damit die Lesbarkeit (Barrierefreiheit) nicht leidet.
Regeln zur Verwendung der Markenfarben
Wenn du deine 5 Farben ausgewählt hast, ist es noch wichtig, wo und wie, in welchem Verhältnis du sie am besten verwendest.
Das Logo sollte sich in den meisten Fällen auf die Primär- und Sekundärfarbe beschränken.
Wenn es um die Website geht, verwendest du die Farben nach diesem Schema (Best Practice):
| Farbtyp | Anteil | Haupteinsatzort |
|---|---|---|
| Neutrale Töne (1-2) | ~60% | Hintergründe, Weißraum, Textkörper |
| Primärfarbe | ~30% | Brand-Elemente, Überschriften |
| Sekundärfarbe | ~7% | Grafiken, sekundäre UI-Elemente |
| Akzentfarbe | ~3% | CTA-Buttons „Jetzt kaufen“, „Termin sichern“, „Angebot anfrodern“, Key-Highlights |
Anwendungsbeispiel: Wofür du welche Farbe einsetzen kannst
Sagen wir, deine Marke nutzt Nachtblau (Primär), Ozeanblau (Sekundär), Koralle (Akzent) und Hellgrau/Off-White (Neutral):
- Die Seite ist größtenteils Off-White (Neutral 1).
- Überschriften, Header und große Info-Boxen sind in Nachtblau (Primär).
- Sub-Headings, Hover-Effekte, kleine Icons oder dezente Linien sind in Ozeanblau (Sekundär).
- Der „Termin buchen“-Button leuchtet in Koralle (Akzent).
Beispiele für Farbkombinationen oder Farbpaletten
Wenn du wissen willst, was andere Marken für Farbsets verwenden, findest du hier eine umfangreiche Liste bekannter Marken: brandcolors.net
Hier sammle ich Farbpaletten, die mir gefallen, zur Verwendung in meinen Projekten:
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
Primärfarbe
Sekundärfarbe
Akzentfarbe
Neutral 1
Neutral 2
