🎨
👁️
Backed by 100+ Studien
Farbpsychologie & Design
Wie Farben Emotionen, Kaufentscheidungen und Markenwahrnehmung steuern - wissenschaftlich erklärt.
Farbpsychologie: Die Wissenschaft der Wirkung
Fakt: 90% der Spontanentscheidungen über Produkte basieren auf Farbe (University of Winnipeg). Farben werden 60.000× schneller verarbeitet als Text!
Rot
#E63946
🧠 Emotionen:
LeidenschaftDringlichkeitEnergieGefahr
⚡ Physiologie:
Erhöht Pulsfrequenz um ~90%, Blutdruck +5-10 mmHg
📊 Marketing:
Sale-Banner, Fast-Food (McDonald's, KFC), Sport-Brands
🏷️ Brands:
Coca-Cola, YouTube, Netflix, CNN
⚠️ Zu viel Rot = Stress, Aggression. Sparsam einsetzen!
Blau
#457B9D
🧠 Emotionen:
VertrauenRuheSicherheitProfessionalität
⚡ Physiologie:
Senkt Herzfrequenz, steigert Produktivität +15%
📊 Marketing:
Banken, Tech, Versicherungen, Healthcare
🏷️ Brands:
Facebook, PayPal, IBM, Ford, HP
💡 54% der Top-Brands nutzen Blau → Differenzierung schwierig
Grün
#2A9D8F
🧠 Emotionen:
NaturGesundheitWachstumHarmonie
⚡ Physiologie:
Beruhigend (wie Blau), fördert Konzentration
📊 Marketing:
Bio-Produkte, Umwelt, Finanzen (Wachstum), Apotheken
🏷️ Brands:
Spotify, Whole Foods, Starbucks, Android
✓ Universell positiv in fast allen Kulturen
Gelb
#F4A261
🧠 Emotionen:
OptimismusAufmerksamkeitWärmeKreativität
⚡ Physiologie:
Stimuliert mental, kann Angst erhöhen (bei Übernutzung)
📊 Marketing:
Warnschilder, Highlights, Kinder-Produkte
🏷️ Brands:
IKEA, McDonald's (mit Rot), Snapchat
⚠️ Schwer lesbar (low contrast), nicht für große Flächen
Orange
#E76F51
🧠 Emotionen:
EnergieBegeisterungFreundlichAktion
⚡ Physiologie:
Kombiniert Rot (Energie) + Gelb (Optimismus)
📊 Marketing:
CTA-Buttons, Sale-Tags, Sport, Food
🏷️ Brands:
Fanta, Nickelodeon, Harley-Davidson
🎯 Beste Farbe für Call-to-Action (+21% Conversions)
Lila
#9D4EDD
🧠 Emotionen:
LuxusKreativitätSpiritualitätMystery
⚡ Physiologie:
Seltenste Farbe in Natur → Assoziiert mit Exklusivität
📊 Marketing:
Beauty, Luxus-Produkte, Kreativ-Branchen
🏷️ Brands:
Cadbury, Twitch, Yahoo, Hallmark
👑 Historisch Royal (teuerster Farbstoff)
Schwarz
#000000
🧠 Emotionen:
LuxusEleganzMachtModernität
⚡ Physiologie:
Neutral, aber kulturell stark aufgeladen
📊 Marketing:
High-End Fashion, Tech, Premium-Produkte
🏷️ Brands:
Apple, Chanel, Nike, Adidas
🖤 Minimalistisch, aber kann düster wirken
Farbtheorie: Von RGB bis Komplementär
🎨 Farbmodelle im Vergleich
RGB (Bildschirme)
Red-Green-Blue, Additive Mischung (Licht)
R: 255
G: 87
B: 51
= #FF5733
HSL (Designer)
Hue-Saturation-Lightness, Intuitiv
H: 9° (Rot)
S: 100%
L: 60%
hsl(9,100%,60%)
CMYK (Druck)
Cyan-Magenta-Yellow-Key, Subtraktiv
C: 0%
M: 66%
Y: 80%
K: 0%
🔄 Farbharmonien (Farbkreis-Regeln)
Komplementär
Gegenüber im Farbkreis (Rot↔Grün, Blau↔Orange)
↔
⚡ Maximaler Kontrast, sehr vibrant
Analog
Nachbarn im Farbkreis (Blau→Cyan→Grün)
✓ Harmonisch, beruhigend
Triadisch
Gleichmäßig verteilt (Primärfarben: Rot-Gelb-Blau)
🎨 Lebendig, balanced
Monochromatisch
Eine Farbe, verschiedene Helligkeiten
🎭 Elegant, minimalistisch
📐 Die 60-30-10 Regel
60% Hauptfarbe (Neutral)
30% Sekundär
10%
← Accent/CTA
Beispiel: 60% Weiß/Grau (Background), 30% Dunkelblau (Brand), 10% Orange (Buttons)
Accessibility: WCAG & Farbenblindheit
♿ WCAG 2.1 Kontrastverhältnisse
Level AA (Standard)
- • Normaler Text: 4.5:1
- • Großer Text (18pt+): 3:1
- • UI-Components: 3:1
Level AAA (Enhanced)
- • Normaler Text: 7:1
- • Großer Text: 4.5:1
- • Bessere Lesbarkeit
Beispiele
Schwarz/Weiß: 21:1 ✓
Grau/Weiß: 5.7:1 ✓
Hellgrau/Weiß: 1.6:1 ✗
🔧 Tools zum Testen:
- • WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
- • Chrome DevTools: Lighthouse Accessibility Audit
- • Contrast Ratio (contrast-ratio.com) - by Lea Verou
👁️ Farbenblindheit (Color Vision Deficiency)
📊 Statistik:
8% der Männer (1 von 12)
0.5% der Frauen (1 von 200)
≈ 300 Millionen Menschen weltweit!
Haupttypen:
- • Deuteranomalie (5%): Rot-Grün-Schwäche (häufigste)
- • Protanomalie (1%): Rot-Schwäche
- • Tritanomalie (0.01%): Blau-Gelb-Schwäche (selten)
- • Achromatopsie: Totale Farbenblindheit (sehr selten)
✅ Design-Regeln:
- • NIEMALS nur Farbe für Info (Rot/Grün für Error/Success)
- • Icons/Symbole/Text zusätzlich
- • Muster/Texturen in Diagrammen
- • Hoher Kontrast (Helligkeit unterschiedlich)
🔬 Simulation-Tools:
• Coblis Color Blindness Simulator (coblis.com) - Upload Bild
• Chrome Extension: Colorblindly
• Figma Plugin: Stark (Accessibility Checker)
• Chrome Extension: Colorblindly
• Figma Plugin: Stark (Accessibility Checker)
Kulturelle Unterschiede: Farben weltweit
⚪ Weiß
🌍 Westen:
Reinheit, Hochzeit, Unschuld
🌏 Osten/Andere:
Tod, Trauer, Beerdigung (China, Japan, Indien)
🔴 Rot
🌍 Westen:
Gefahr, Liebe, Leidenschaft
🌏 Osten/Andere:
Glück, Wohlstand, Feiern (China: Hochzeit, Neujahr)
🟡 Gelb
🌍 Westen:
Optimismus, Vorsicht
🌏 Osten/Andere:
Heilig (Buddhismus), Trauer (Ägypten), Imperial (China)
🔵 Blau
🌍 Westen:
Vertrauen, Stabilität
🌏 Osten/Andere:
Unsterblichkeit (China), Trauer (Iran), Schutz (Türkei)
🟢 Grün
🌍 Westen:
Natur, Frische, Geld (USA)
🌏 Osten/Andere:
Heilig (Islam), Untreue (China), Glück (Irland)
🟣 Lila
🌍 Westen:
Luxus, Kreativität, Royal
🌏 Osten/Andere:
Witwen (Thailand), Trauer (Brasilien), Reichtum (Japan)
⚫ Schwarz
🌍 Westen:
Eleganz, Trauer, Formalität
🌏 Osten/Andere:
Gesundheit/Erfolg (China), Böse (Indien), Modernität (Japan)
💡 Praxis-Tipps:
- • Zielgruppe analysieren: B2B global? Lokale Consumer?
- • A/B-Testing in verschiedenen Märkten
- • Lokale Designer/Marketing-Teams konsultieren
- • Universell positive Farben: Blau, Grün (meist sicher)
Conversion-Optimierung: Farben die verkaufen
🎯 Call-to-Action Button: Was funktioniert?
🥇 Top-Performer:
(vs. grün, HubSpot-Studie)
📊 Kontext matters:
• Blau-dominante Seite → Orange Button (Kontrast!)
• Rot-dominante Seite → Grün/Blau Button
• Wichtiger als Farbe selbst: Kontrast zum Umfeld
⚠️ No-Gos:
✗ Grau: -18% (inaktiv wirkend)
✗ Zu hell: Low contrast
✗ Schwarz: Zu schwer (außer Luxus)
🏢 Branchen-spezifische Farben
Finanzen
Blau, Grün (Vertrauen)
Gesundheit
Grün, Weiß, Blau
Food
Rot, Gelb, Orange
Luxus
Schwarz, Gold, Lila
✅ Best Practices: Checkliste
WCAG AA Kontrast minimum (4.5:1)
60-30-10 Regel anwenden
Max. 3-4 Farben (inkl. Neutrals)
Farbenblindheit-Test (Coblis)
CTA-Buttons: Hoher Kontrast
A/B-Testing (keine Annahmen!)
Konsistenz über alle Pages
Kulturelle Zielgruppe beachten
Inspiration gesucht? Zufällige Farben generieren!
Unser Farb-Generator erstellt harmonische Farbpaletten mit HEX/RGB/HSL-Codes.
Zum Farb-Generator →