Color Psychology in Branding: A Complete Guide

Color perception happens in three stages:
1. Visual - We see the color
2. Emotional - We feel something
3. Behavioral - We act on that feeling

Example:
- Seeing red → Feeling excited → Buying impulse

Western cultures:
- White: Purity, weddings
- Red: Danger, passion
- Black: Luxury, death (in some)

Eastern cultures:
- White: Death, mourning
- Red: Luck, prosperity
- Black: Evil, bad luck

/* Emotional Effects */
.red {
  /* Increases heart rate */
  /* Creates urgency */
  /* Sparks excitement */
  /* Draws attention */
}

/* Brand Examples */
.red-brands {
  - Coca-Cola: Passion, happiness
  - Netflix: Excitement, entertainment
  - YouTube: Energy, creativity
  - Target: Accessibility
}

Positive: Energy, passion, excitement, courage
Negative: Aggression, danger, warning

Best for: Food, entertainment, sales, sports
Avoid when: Trust, calm needed

/* Emotional Effects */
.blue {
  /* Creates trust */
  /* Calms the mind */
  /* Signals reliability */
  /* Professional feel */
}

/* Brand Examples */
.blue-brands {
  - Facebook: Trust, communication
  - Twitter: Communication, openness
  - Samsung: Technology, reliability
  - PayPal: Security, trust
  - IBM: Enterprise, professionalism
}

Positive: Trust, stability, security, calm
Negative: Cold, distant, sad

Best for: Finance, healthcare, tech, corporate
Avoid when: Energy, excitement needed

/* Emotional Effects */
.yellow {
  /* Optimistic */
  /* Creates warmth */
  /* Attracts attention */
  /* Sparks creativity */
}

/* Brand Examples */
.yellow-brands {
  - McDonald's: Happiness, warmth
  - IKEA: Affordability, friendliness
  - Snapchat: Playfulness, youth
  - Ferrari: Performance, luxury
}

Positive: Optimism, warmth, creativity, energy
Negative: Anxiety, caution, cheapness

Best for: Construction, food, youth brands, warnings
Avoid when: Luxury, professionalism needed

/* Emotional Effects */
.green {
  /* Nature associations */
  /* Growth */
  /* Health */
  /* Money */
}

/* Brand Examples */
.green-brands {
  - Spotify: Fresh, modern
  - Whole Foods: Natural, healthy
  - Android: Innovation, openness
  - Starbucks: Relaxation, growth
}

Positive: Growth, health, nature, money, harmony
Negative: Envy, stagnation

Best for: Finance, environmental, health, organic
Avoid when: Luxury, excitement needed

/* Emotional Effects */
.orange {
  /* Friendly */
  /* Creative */
  /* Affordable */
  /* Energetic */
}

/* Brand Examples */
.orange-brands {
  - Fanta: Fun, youthful
  - Nickelodeon: Entertainment
  - Amazon: Friendly, accessible
  - HBO: Premium, entertainment
}

Positive: Creativity, friendliness, energy, affordability
Negative: Cheapness, immaturity

Best for: Tech startups, food, kids products, fitness
Avoid when: Luxury, corporate needed

/* Emotional Effects */
.purple {
  /* Luxury */
  /* Creativity */
  /* Wisdom */
  /* Spiritual */
}

/* Brand Examples */
.purple-brands {
  - Cadbury: Luxury
  - Twitch: Gaming, community
  - Netflix: Entertainment
  - Hallmark: Premium, greeting
}

Positive: Luxury, creativity, wisdom, royalty
Negative: Moodiness, mystery

Best for: Premium brands, creative industries, spiritual
Avoid when: Trust, simplicity needed

/* Emotional Effects */
.black {
  /* Sophistication */
  /* Authority */
  /* Luxury */
  /* Elegance */
}

/* Brand Examples */
.black-brands {
  - Apple: Premium, innovation
  - Chanel: Luxury, elegance
  - Nike: Bold, premium
  - Mercedes: Luxury, quality
}

Positive: Luxury, sophistication, authority, elegance
Negative: Death, mourning, negativity

Best for: Luxury, tech, fashion, premium brands
Avoid when: Approachability needed

/* Emotional Effects */
.white {
  /* Purity */
  /* Cleanliness */
  /* Simplicity */
  /* Peace */
}

/* Brand Examples */
.white-brands {
  - Apple: Simplicity, premium
  - Tesla: Clean, modern
  - Tesla: Minimalism
}

Positive: Purity, simplicity, cleanliness, peace
Negative: Emptiness, clinical

Best for: Medical, tech, minimal brands

:root {
  /* Choose one primary color */
  /* This is your main brand color */
  
  /* Blue examples */
  --primary-blue: #2563eb;
  
  /* Or another primary */
  --primary: #2563eb;
}

:root {
  /* Secondary supports primary */
  /* Use for variety */
  
  /* Complementary */
  --secondary: #f59e0b;  /* Orange */
  
  /* Analogous */
  --secondary: #10b981;  /* Green */
  
  /* Split-complementary */
  --secondary: #8b5cf6;  /* Purple */
}

:root {
  /* Neutrals for text and backgrounds */
  
  --neutral-900: #0f172a;  /* Dark text */
  --neutral-700: #334155;  /* Body text */
  --neutral-500: #64748b;  /* Secondary text */
  --neutral-300: #cbd5e1;  /* Borders */
  --neutral-100: #f1f5f9; /* Light backgrounds */
  --neutral-50: #f8fafc;  /* Page background */
}

:root {
  /* For highlights and calls-to-action */
  
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  --accent-info: #3b82f6;
}

.monochromatic {
  /* Single hue, multiple shades */
  background: #2563eb;
  color: #1d4ed8;
  background: #93c5fd;
}

.analogous {
  /* Adjacent colors on wheel */
  background: #2563eb;  /* Blue */
  accent: #10b981;      /* Green */
  background: #3b82f6;  /* Light blue */
}

.complementary {
  /* Opposite on color wheel */
  background: #2563eb;  /* Blue */
  accent: #f59e0b;     /* Orange */
}

.triadic {
  /* Three colors evenly spaced */
  background: #2563eb;  /* Blue */
  accent: #10b981;     /* Green */
  highlight: #f59e0b; /* Orange */
}

/* WCAG AA - Minimum */
.contrast-aa {
  /* Normal text: 4.5:1 */
  color: #1a1a1a;
  background: white;
  
  /* Large text (18px+): 3:1 */
  color: #333333;
  background: white;
}

/* WCAG AAA - Enhanced */
.contrast-aaa {
  /* Normal text: 7:1 */
  color: #000000;
  background: white;
}

/* Add icons for status */
.status-success {
  color: #10b981;
}

/* Add icon, not just color */
.status-success::before {
  content: "✓";
  color: #10b981;
}

.status-error {
  color: #ef4444;
}

.status-error::before {
  content: "✕";
  color: #ef4444;
}

Common: Blue, Green, Black
Why: Trust, stability, security
Examples: Banks, insurance, investments

Common: Blue, Green, Black, Purple
Why: Innovation, trust, modernity
Examples: Software, hardware, apps

Common: Red, Yellow, Orange, Green
Why: Appetite, energy, freshness
Examples: Restaurants, food products

Common: Blue, Green, White, Teal
Why: Health, cleanliness, trust
Examples: Hospitals, pharma, wellness

Common: Black, White, Gray, Accent colors
Why: Sophistication, versatility
Examples: Luxury brands, retailers

Common: Green, Brown, Blue, Yellow
Why: Nature, sustainability
Examples: Eco brands, outdoor

/* Test on different backgrounds */
.test-light {
  background: white;
  color: var(--brand-primary);
}

.test-dark {
  background: #1a1a1a;
  color: var(--brand-primary);
}

.test-image {
  background: url('bg.jpg');
  color: white;
}

Tools for testing:
- WebAIM Contrast Checker
- Colour Contrast Analyser
- Figma plugins
- Browser DevTools