# Color Palettes for SVG Graphics

Standardized color palettes for consistent, professional SVG graphics.

## Primary Palettes

### Professional Blue (Default)
Best for: Corporate, tech, finance
```
Primary:    #2563eb (blue-600)
Secondary:  #64748b (slate-500)
Success:    #10b981 (emerald-500)
Warning:    #f59e0b (amber-500)
Error:      #ef4444 (red-500)
Neutral:    #e2e8f0 (slate-200)
Text:       #1e293b (slate-800)
Background: #f8fafc (slate-50)
```

### Warm Orange (Data Viz)
Best for: Charts, marketing, creative
```
Primary:    #f97316 (orange-500)
Secondary:  #6b7280 (gray-500)
Accent:     #fbbf24 (amber-400)
Neutral:    #f5f5f4 (stone-100)
Text:       #374151 (gray-700)
Background: #faf9f6 (warm white)
```

### Corporate Green
Best for: Finance, sustainability, health
```
Primary:    #10b981 (emerald-500)
Secondary:  #475569 (slate-600)
Accent:     #14b8a6 (teal-500)
Neutral:    #f0fdf4 (green-50)
Text:       #1e293b (slate-800)
Background: #fafaf9
```

### Indigo/Purple (Tech/Modern)
Best for: SaaS, AI, creative tools
```
Primary:    #6366f1 (indigo-500)
Secondary:  #8b5cf6 (violet-500)
Accent:     #ec4899 (pink-500)
Neutral:    #e0e7ff (indigo-100)
Text:       #0f172a (slate-900)
Background: #faf5ff (purple-50)
```

## Illustration Palettes

### Skin Tones
```
Light 1:    #fde7d6
Light 2:    #fcd5b8
Medium 1:   #e8c89a
Medium 2:   #d4a574
Medium 3:   #c68c5c
Dark 1:     #a67c52
Dark 2:     #8b5a3c
Dark 3:     #6b4226
```

### Hair Colors
```
Black:      #1e293b
Dark Brown: #4a3728
Brown:      #6b4c3a
Light Brown:#8b6c52
Blonde:     #d4a574
Light Blonde:#e8c89a
Gray:       #9ca3af
White:      #e5e7eb
Red:        #b45309
```

### Clothing (Soft Pastels)
```
Lavender:   #c4b5fd / #a78bfa
Soft Blue:  #93c5fd / #60a5fa
Soft Pink:  #f9a8d4 / #f472b6
Mint:       #86efac / #4ade80
Peach:      #fed7aa / #fdba74
Soft Yellow:#fef08a / #facc15
Navy:       #1e3a5f / #334155
Charcoal:   #374151 / #1f2937
```

### Tech/Robot Elements
```
Teal 1:     #14b8a6
Teal 2:     #2dd4bf
Teal 3:     #5eead4
Steel:      #94a3b8
Chrome:     #d1d5db
Accent:     #f97316 (orange)
```

## Chart Colors

### Sequential (Single Hue)
For ordered data, use varying lightness:
```
Blue:       #1e40af → #3b82f6 → #93c5fd → #dbeafe
Orange:     #9a3412 → #f97316 → #fdba74 → #ffedd5
Green:      #166534 → #22c55e → #86efac → #dcfce7
```

### Categorical (Multi Hue)
For unrelated categories:
```
Set 1:      #2563eb, #f97316, #10b981, #8b5cf6, #f43f5e
Set 2:      #0ea5e9, #eab308, #14b8a6, #f472b6, #84cc16
Set 3:      #6366f1, #ec4899, #f59e0b, #22c55e, #06b6d4
```

### Diverging (Two Endpoints)
For data with meaningful center:
```
Blue-Orange: #1e40af → #60a5fa → #f5f5f4 → #fdba74 → #c2410c
Green-Red:   #166534 → #4ade80 → #f5f5f4 → #f87171 → #b91c1c
```

## UI Component Colors

### Cards and Surfaces
```
Background:     #f8fafc
Card:           #ffffff
Card Hover:     #f1f5f9
Border:         #e2e8f0
Border Subtle:  #f1f5f9
```

### Text Hierarchy
```
Primary:        #0f172a (slate-900)
Secondary:      #374151 (gray-700)
Tertiary:       #64748b (slate-500)
Muted:          #94a3b8 (slate-400)
Disabled:       #cbd5e1 (slate-300)
```

### Interactive States
```
Default:        #3b82f6 (blue-500)
Hover:          #2563eb (blue-600)
Active:         #1d4ed8 (blue-700)
Disabled:       #cbd5e1 (slate-300)
Focus Ring:     #93c5fd (blue-300)
```

### Status Colors
```
Success BG:     #dcfce7
Success Text:   #16a34a
Warning BG:     #fef3c7
Warning Text:   #d97706
Error BG:       #fee2e2
Error Text:     #dc2626
Info BG:        #dbeafe
Info Text:      #2563eb
```

## Gradients

### Warm Gradient
```svg
<linearGradient id="warmGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#f472b6"/>
  <stop offset="50%" stop-color="#fb923c"/>
  <stop offset="100%" stop-color="#facc15"/>
</linearGradient>
```

### Cool Gradient
```svg
<linearGradient id="coolGradient" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#06b6d4"/>
  <stop offset="50%" stop-color="#3b82f6"/>
  <stop offset="100%" stop-color="#8b5cf6"/>
</linearGradient>
```

### Soft Background Gradient
```svg
<linearGradient id="softBg" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#e0e7ff"/>
  <stop offset="50%" stop-color="#fae8ff"/>
  <stop offset="100%" stop-color="#e0f2fe"/>
</linearGradient>
```

### Area Chart Fill
```svg
<linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0%" stop-color="#6366f1" stop-opacity="0.3"/>
  <stop offset="100%" stop-color="#6366f1" stop-opacity="0"/>
</linearGradient>
```

## Shadow Definitions

### Card Shadow (Subtle)
```svg
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%">
  <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.08"/>
</filter>
```

### Elevated Shadow (Medium)
```svg
<filter id="elevatedShadow" x="-20%" y="-20%" width="140%" height="140%">
  <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.12"/>
</filter>
```

### Floating Shadow (Pronounced)
```svg
<filter id="floatingShadow" x="-30%" y="-30%" width="160%" height="160%">
  <feDropShadow dx="0" dy="8" stdDeviation="16" flood-opacity="0.15"/>
</filter>
```

## Usage Guidelines

1. **Limit palette**: Use 2-3 colors per graphic, max 5 for complex infographics
2. **Ensure contrast**: Text should have 4.5:1 contrast ratio minimum
3. **Use semantic colors**: Success=green, error=red, warning=amber
4. **Consistent application**: Same color should mean same thing throughout
5. **Consider colorblind users**: Don't rely on color alone for meaning
6. **Test backgrounds**: Ensure colors work on both light and dark backgrounds
