Color theory

# Color Theory & Curated Palettes

Color theory fundamentals and pre-curated palettes for when browser access is unavailable.

---

## Color Psychology

### Color Meanings

| Color | Associations | Best For |
|-------|--------------|----------|
| **Black** | Luxury, power, sophistication | Premium brands, tech, fashion |
| **White** | Clean, minimal, pure | Healthcare, minimal brands |
| **Red** | Energy, urgency, passion | Food, entertainment, sales |
| **Orange** | Friendly, energetic, creative | Startups, creative, food |
| **Yellow** | Optimism, warmth, caution | Children's, food, warnings |
| **Green** | Nature, growth, money | Finance, eco, health |
| **Blue** | Trust, calm, professional | Corporate, tech, finance |
| **Purple** | Luxury, creativity, wisdom | Beauty, spiritual, creative |
| **Pink** | Playful, feminine, modern | Fashion, beauty, youth |
| **Brown** | Earthy, reliable, warm | Food, outdoor, organic |

### Warm vs Cool

**Warm colors** (red, orange, yellow):
- Feel energetic and inviting
- Come forward visually
- Best for CTAs and accents

**Cool colors** (blue, green, purple):
- Feel calm and professional
- Recede visually
- Best for backgrounds and large areas

---

## Curated Fallback Palettes

### Dark & Premium

**Obsidian Gold**
```
Primary:    #c9a227  (Gold)
Background: #0a0a0a  (Near black)
Surface:    #1a1a1a  (Dark gray)
Text:       #fafafa  (Off-white)
Muted:      #737373  (Gray)
```

**Midnight Coral**
```
Primary:    #ff6b6b  (Coral)
Background: #0f0f0f  (Black)
Surface:    #1e1e1e  (Charcoal)
Text:       #ffffff  (White)
Muted:      #888888  (Gray)
```

**Deep Ocean**
```
Primary:    #00d4ff  (Cyan)
Background: #0a0a0a  (Black)
Surface:    #141414  (Dark)
Text:       #f0f0f0  (Light gray)
Muted:      #666666  (Gray)
```

---

### Clean & Minimal

**Pure Contrast**
```
Primary:    #000000  (Black)
Background: #ffffff  (White)
Surface:    #f5f5f5  (Light gray)
Text:       #171717  (Near black)
Muted:      #737373  (Gray)
```

**Warm Minimal**
```
Primary:    #1a1a1a  (Black)
Background: #faf8f5  (Cream)
Surface:    #f0ede8  (Warm gray)
Text:       #1a1a1a  (Black)
Muted:      #8a8a8a  (Warm gray)
```

**Cool Slate**
```
Primary:    #3b82f6  (Blue)
Background: #f8fafc  (Blue-white)
Surface:    #f1f5f9  (Light slate)
Text:       #0f172a  (Dark slate)
Muted:      #64748b  (Slate)
```

---

### Bold & Energetic

**Electric Orange**
```
Primary:    #ff6b35  (Orange)
Background: #0a0a0a  (Black)
Surface:    #171717  (Charcoal)
Text:       #ffffff  (White)
Accent:     #ffd23f  (Yellow)
```

**Neon Punch**
```
Primary:    #ff00ff  (Magenta)
Background: #000000  (Black)
Surface:    #1a1a1a  (Dark)
Text:       #ffffff  (White)
Accent:     #00ffff  (Cyan)
```

**Brutalist Yellow**
```
Primary:    #000000  (Black)
Background: #ffe951  (Yellow)
Surface:    #ffffff  (White)
Text:       #000000  (Black)
Border:     #000000  (Black)
```

---

### Warm & Inviting

**Scandinavian**
```
Primary:    #c17f59  (Terracotta)
Background: #faf8f5  (Cream)
Surface:    #f0ede8  (Warm white)
Text:       #2c2c2c  (Charcoal)
Muted:      #8a8178  (Warm gray)
```

**Forest Cabin**
```
Primary:    #2d5a27  (Forest green)
Background: #f5f2eb  (Parchment)
Surface:    #ebe7dc  (Tan)
Text:       #1c1c1c  (Near black)
Muted:      #6b6b5e  (Olive gray)
```

**Desert Sunset**
```
Primary:    #d4764e  (Terracotta)
Background: #fdf6e3  (Sand)
Surface:    #f4ece0  (Light tan)
Text:       #3b3024  (Brown)
Accent:     #b55b3a  (Rust)
```

---

### Cool & Professional

**Corporate Blue**
```
Primary:    #2563eb  (Blue)
Background: #ffffff  (White)
Surface:    #f8fafc  (Light blue)
Text:       #1e293b  (Dark slate)
Muted:      #64748b  (Slate)
```

**Tech Slate**
```
Primary:    #6366f1  (Indigo)
Background: #f9fafb  (Gray-white)
Surface:    #f3f4f6  (Light gray)
Text:       #111827  (Near black)
Muted:      #6b7280  (Gray)
```

**Finance Green**
```
Primary:    #059669  (Emerald)
Background: #ffffff  (White)
Surface:    #f0fdf4  (Light green)
Text:       #064e3b  (Dark green)
Muted:      #6b7280  (Gray)
```

---

### Creative & Playful

**Candy**
```
Primary:    #ec4899  (Pink)
Background: #ffffff  (White)
Surface:    #fdf4ff  (Light pink)
Text:       #1f1f1f  (Black)
Accent:     #8b5cf6  (Purple)
```

**Retro Pop**
```
Primary:    #f472b6  (Pink)
Background: #fef3c7  (Yellow)
Surface:    #ffffff  (White)
Text:       #1c1917  (Brown-black)
Accent:     #38bdf8  (Cyan)
```

**Memphis**
```
Primary:    #ff6b6b  (Coral)
Background: #ffffff  (White)
Surface:    #e0f2fe  (Light blue)
Text:       #000000  (Black)
Accent:     #fbbf24  (Yellow)
```

---

## Creating Custom Palettes

### From a Single Color

1. Start with primary brand color
2. Generate shades (lighter/darker)
3. Choose complementary accent
4. Define text colors with proper contrast

### Color Harmony Rules

**Monochromatic**: Single hue, varied lightness
- Safe, cohesive, can lack energy

**Complementary**: Opposite on color wheel
- High contrast, vibrant, use sparingly

**Analogous**: Adjacent on color wheel
- Harmonious, natural, low contrast

**Triadic**: Three evenly spaced colors
- Balanced, vibrant, complex to execute

### Shade Generation

From a base color, create a scale:

```
50:  Very light (background tint)
100: Light
200: Light medium
300: Medium light
400: Medium
500: Base color
600: Medium dark
700: Dark medium
800: Dark
900: Very dark (text)
950: Near black
```

---

## Accessibility Reference

### Minimum Contrast Ratios

| Content Type | Minimum Ratio | Level |
|--------------|---------------|-------|
| Normal text | 4.5:1 | AA |
| Large text (18px+) | 3:1 | AA |
| UI components | 3:1 | AA |
| Enhanced text | 7:1 | AAA |

### Safe Text Colors

**On white backgrounds:**
- `#171717` (contrast: 16:1)
- `#404040` (contrast: 10:1)
- `#525252` (contrast: 7:1)
- `#737373` (contrast: 4.5:1) - minimum

**On black backgrounds:**
- `#ffffff` (contrast: 21:1)
- `#e5e5e5` (contrast: 16:1)
- `#a3a3a3` (contrast: 7:1)
- `#8a8a8a` (contrast: 4.5:1) - minimum

---

## Quick Selection Guide

| Aesthetic | Recommended Palette |
|-----------|---------------------|
| Dark & Premium | Obsidian Gold, Midnight Coral |
| SaaS / Tech | Tech Slate, Corporate Blue |
| Minimal | Pure Contrast, Warm Minimal |
| Neobrutalism | Brutalist Yellow, Electric Orange |
| Scandinavian | Scandinavian, Forest Cabin |
| Creative | Candy, Retro Pop |
| Finance | Finance Green, Corporate Blue |
| Luxury | Obsidian Gold, Deep Ocean |