# Infographic Color Palettes Reference

This reference provides comprehensive color palette options for creating accessible, professional infographics.

---

## Colorblind-Safe Palettes

These palettes are designed to be distinguishable by people with various forms of color vision deficiency.

### Wong's Palette (7 Colors)

The most widely recommended colorblind-safe palette, developed by Bang Wong for scientific visualization.

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| Black | `#000000` | 0, 0, 0 | Text, outlines |
| Orange | `#E69F00` | 230, 159, 0 | Primary accent |
| Sky Blue | `#56B4E9` | 86, 180, 233 | Primary data |
| Bluish Green | `#009E73` | 0, 158, 115 | Secondary data |
| Yellow | `#F0E442` | 240, 228, 66 | Highlight |
| Blue | `#0072B2` | 0, 114, 178 | Primary category |
| Vermillion | `#D55E00` | 213, 94, 0 | Alert, emphasis |
| Reddish Purple | `#CC79A7` | 204, 121, 167 | Tertiary data |

**Prompt usage:**
```
"Use Wong's colorblind-safe palette: orange (#E69F00), sky blue (#56B4E9), 
bluish green (#009E73), and blue (#0072B2) for data categories"
```

---

### IBM Colorblind-Safe Palette (8 Colors)

IBM's accessible color palette designed for data visualization.

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| Ultramarine | `#648FFF` | 100, 143, 255 | Primary blue |
| Indigo | `#785EF0` | 120, 94, 240 | Secondary |
| Magenta | `#DC267F` | 220, 38, 127 | Accent/Alert |
| Orange | `#FE6100` | 254, 97, 0 | Warning/Highlight |
| Gold | `#FFB000` | 255, 176, 0 | Positive/Success |
| Black | `#000000` | 0, 0, 0 | Text |
| White | `#FFFFFF` | 255, 255, 255 | Background |
| Gray | `#808080` | 128, 128, 128 | Neutral |

**Prompt usage:**
```
"Use IBM colorblind-safe colors: ultramarine (#648FFF), indigo (#785EF0),
magenta (#DC267F), and gold (#FFB000) for visual elements"
```

---

### Okabe-Ito Palette (8 Colors)

Developed by Masataka Okabe and Kei Ito, widely used in scientific publications.

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| Black | `#000000` | 0, 0, 0 | Text, primary |
| Orange | `#E69F00` | 230, 159, 0 | Category 1 |
| Sky Blue | `#56B4E9` | 86, 180, 233 | Category 2 |
| Bluish Green | `#009E73` | 0, 158, 115 | Category 3 |
| Yellow | `#F0E442` | 240, 228, 66 | Category 4 |
| Blue | `#0072B2` | 0, 114, 178 | Category 5 |
| Vermillion | `#D55E00` | 213, 94, 0 | Category 6 |
| Reddish Purple | `#CC79A7` | 204, 121, 167 | Category 7 |

**Note:** Identical to Wong's palette - both are industry standards.

---

### Tol's Qualitative Palette (12 Colors)

Paul Tol's extended colorblind-safe palette for more categories.

| Name | Hex | RGB |
|------|-----|-----|
| Indigo | `#332288` | 51, 34, 136 |
| Cyan | `#88CCEE` | 136, 204, 238 |
| Teal | `#44AA99` | 68, 170, 153 |
| Green | `#117733` | 17, 119, 51 |
| Olive | `#999933` | 153, 153, 51 |
| Sand | `#DDCC77` | 221, 204, 119 |
| Rose | `#CC6677` | 204, 102, 119 |
| Wine | `#882255` | 136, 34, 85 |
| Purple | `#AA4499` | 170, 68, 153 |
| Light Gray | `#DDDDDD` | 221, 221, 221 |
| Gray | `#888888` | 136, 136, 136 |
| Black | `#000000` | 0, 0, 0 |

---

## Industry-Specific Palettes

### Corporate/Business

Classic, professional appearance suitable for business reports and presentations.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Navy | `#1E3A5F` | 30, 58, 95 |
| Secondary | Steel Blue | `#4A90A4` | 74, 144, 164 |
| Tertiary | Light Blue | `#A8D5E2` | 168, 213, 226 |
| Accent | Gold | `#F5A623` | 245, 166, 35 |
| Background | Light Gray | `#F5F5F5` | 245, 245, 245 |
| Text | Charcoal | `#333333` | 51, 51, 51 |

**Prompt usage:**
```
"Corporate business color scheme: navy blue (#1E3A5F) primary, 
steel blue (#4A90A4) secondary, gold (#F5A623) accent, 
light gray background, professional clean design"
```

---

### Healthcare/Medical

Trust-inducing, clinical colors appropriate for health-related content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Medical Blue | `#0077B6` | 0, 119, 182 |
| Secondary | Cyan | `#00B4D8` | 0, 180, 216 |
| Tertiary | Light Cyan | `#90E0EF` | 144, 224, 239 |
| Accent | Coral | `#FF6B6B` | 255, 107, 107 |
| Background | White | `#FFFFFF` | 255, 255, 255 |
| Text | Dark Blue | `#023E8A` | 2, 62, 138 |

**Prompt usage:**
```
"Healthcare medical color scheme: medical blue (#0077B6), 
cyan (#00B4D8) accents, coral (#FF6B6B) for emphasis, 
clean clinical white background, professional medical design"
```

---

### Technology/Data

Modern, tech-forward appearance, works well with dark mode.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary Dark | Deep Navy | `#1A1A2E` | 26, 26, 46 |
| Secondary | Navy | `#16213E` | 22, 33, 62 |
| Tertiary | Blue | `#0F3460` | 15, 52, 96 |
| Accent | Electric Blue | `#00D9FF` | 0, 217, 255 |
| Accent 2 | Neon Purple | `#7B2CBF` | 123, 44, 191 |
| Text | White | `#FFFFFF` | 255, 255, 255 |

**Light Mode Alternative:**

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Tech Blue | `#2563EB` | 37, 99, 235 |
| Secondary | Slate | `#475569` | 71, 85, 105 |
| Accent | Violet | `#7C3AED` | 124, 58, 237 |
| Background | Light Gray | `#F8FAFC` | 248, 250, 252 |

**Prompt usage:**
```
"Technology data visualization colors: deep navy (#1A1A2E) background,
electric blue (#00D9FF) and neon purple (#7B2CBF) accents,
modern tech aesthetic, futuristic design"
```

---

### Nature/Environmental

Earth tones and greens for sustainability and environmental topics.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Forest | `#2D6A4F` | 45, 106, 79 |
| Secondary | Green | `#40916C` | 64, 145, 108 |
| Tertiary | Mint | `#95D5B2` | 149, 213, 178 |
| Accent | Earth Brown | `#8B4513` | 139, 69, 19 |
| Background | Cream | `#FAF3E0` | 250, 243, 224 |
| Text | Dark Green | `#1B4332` | 27, 67, 50 |

**Prompt usage:**
```
"Environmental nature color scheme: forest green (#2D6A4F),
mint (#95D5B2), earth brown (#8B4513) accents,
cream background, organic natural design feel"
```

---

### Education/Academic

Friendly yet professional colors for learning content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Academic Blue | `#3D5A80` | 61, 90, 128 |
| Secondary | Light Blue | `#98C1D9` | 152, 193, 217 |
| Tertiary | Cream | `#E0FBFC` | 224, 251, 252 |
| Accent | Coral | `#EE6C4D` | 238, 108, 77 |
| Background | Warm White | `#FEFEFE` | 254, 254, 254 |
| Text | Dark Gray | `#293241` | 41, 50, 65 |

**Prompt usage:**
```
"Education academic color scheme: academic blue (#3D5A80),
light blue (#98C1D9), coral (#EE6C4D) highlights,
warm white background, friendly educational design"
```

---

### Marketing/Creative

Bold, vibrant colors for attention-grabbing content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Coral | `#FF6B6B` | 255, 107, 107 |
| Secondary | Teal | `#4ECDC4` | 78, 205, 196 |
| Tertiary | Yellow | `#FFE66D` | 255, 230, 109 |
| Accent | Purple | `#9B59B6` | 155, 89, 182 |
| Background | White | `#FFFFFF` | 255, 255, 255 |
| Text | Charcoal | `#2C3E50` | 44, 62, 80 |

**Prompt usage:**
```
"Marketing creative colors: vibrant coral (#FF6B6B), teal (#4ECDC4),
yellow (#FFE66D) accents, bold eye-catching design,
modern and energetic feel"
```

---

### Finance/Investment

Conservative, trustworthy appearance for financial content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Navy | `#14213D` | 20, 33, 61 |
| Secondary | Gold | `#FCA311` | 252, 163, 17 |
| Tertiary | Light Gray | `#E5E5E5` | 229, 229, 229 |
| Accent | Green | `#2ECC71` | 46, 204, 113 |
| Accent Negative | Red | `#E74C3C` | 231, 76, 60 |
| Background | White | `#FFFFFF` | 255, 255, 255 |
| Text | Black | `#000000` | 0, 0, 0 |

**Prompt usage:**
```
"Finance investment color scheme: navy (#14213D), gold (#FCA311),
green (#2ECC71) for positive, red (#E74C3C) for negative,
conservative professional design, trustworthy appearance"
```

---

### Creative/Design

Artistic, gradient-friendly palette for creative content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Purple | `#7400B8` | 116, 0, 184 |
| Secondary | Indigo | `#5E60CE` | 94, 96, 206 |
| Tertiary | Blue | `#4EA8DE` | 78, 168, 222 |
| Accent | Cyan | `#48BFE3` | 72, 191, 227 |
| Accent 2 | Pink | `#F72585` | 247, 37, 133 |
| Background | Dark | `#1A1A2E` | 26, 26, 46 |

**Prompt usage:**
```
"Creative design colors: purple (#7400B8) to cyan (#48BFE3) gradient,
pink (#F72585) accents, artistic modern style,
dark background, bold creative aesthetic"
```

---

### Government/Policy

Formal, accessible colors for public sector content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Navy | `#003366` | 0, 51, 102 |
| Secondary | Red | `#CC0000` | 204, 0, 0 |
| Tertiary | Light Blue | `#6699CC` | 102, 153, 204 |
| Neutral | Gray | `#666666` | 102, 102, 102 |
| Background | White | `#FFFFFF` | 255, 255, 255 |
| Text | Black | `#000000` | 0, 0, 0 |

**Prompt usage:**
```
"Government policy colors: navy blue (#003366), red (#CC0000) accents,
light blue (#6699CC) secondary, formal accessible design,
high contrast for readability"
```

---

### Nonprofit/Cause

Warm, human-centered colors for social impact content.

| Role | Name | Hex | RGB |
|------|------|-----|-----|
| Primary | Warm Orange | `#E07A5F` | 224, 122, 95 |
| Secondary | Sage | `#81B29A` | 129, 178, 154 |
| Tertiary | Sand | `#F2CC8F` | 242, 204, 143 |
| Accent | Deep Blue | `#3D405B` | 61, 64, 91 |
| Background | Cream | `#F4F1DE` | 244, 241, 222 |
| Text | Dark | `#333333` | 51, 51, 51 |

**Prompt usage:**
```
"Nonprofit cause colors: warm orange (#E07A5F), sage green (#81B29A),
sand (#F2CC8F), human-centered warm design,
cream background, impactful and welcoming"
```

---

## Gradient Combinations

Pre-defined gradient combinations for modern infographics.

### Sunset Gradient
```
Start: #FF6B6B (Coral)
Middle: #FFA07A (Light Salmon)
End: #FFD93D (Yellow)
Direction: Top to bottom or left to right
```

### Ocean Gradient
```
Start: #0077B6 (Blue)
Middle: #00B4D8 (Cyan)
End: #90E0EF (Light Cyan)
Direction: Top to bottom
```

### Forest Gradient
```
Start: #1B4332 (Dark Green)
Middle: #40916C (Green)
End: #95D5B2 (Mint)
Direction: Bottom to top
```

### Purple Dream Gradient
```
Start: #7400B8 (Purple)
Middle: #5E60CE (Indigo)
End: #48BFE3 (Cyan)
Direction: Left to right
```

### Warm Gold Gradient
```
Start: #F5A623 (Gold)
Middle: #FFC857 (Light Gold)
End: #FFE8A8 (Pale Yellow)
Direction: Top to bottom
```

### Cool Steel Gradient
```
Start: #1E3A5F (Navy)
Middle: #4A90A4 (Steel Blue)
End: #A8D5E2 (Light Blue)
Direction: Left to right
```

**Prompt usage for gradients:**
```
"Use ocean gradient background from blue (#0077B6) to light cyan (#90E0EF),
flowing top to bottom, modern clean design"
```

---

## Contrast Checking

### WCAG 2.1 Requirements

| Contrast Ratio | Requirement |
|----------------|-------------|
| 4.5:1 | Normal text (under 18pt) |
| 3:1 | Large text (18pt+ or 14pt bold) |
| 3:1 | Graphics and UI components |

### Common Safe Combinations

**On White Background (#FFFFFF):**
| Text Color | Hex | Contrast Ratio |
|------------|-----|----------------|
| Black | `#000000` | 21:1 ✓ |
| Dark Gray | `#333333` | 12.6:1 ✓ |
| Navy | `#1E3A5F` | 11.2:1 ✓ |
| Dark Green | `#1B4332` | 10.9:1 ✓ |
| Dark Blue | `#0072B2` | 5.7:1 ✓ |
| Medium Gray | `#666666` | 5.7:1 ✓ |
| Red | `#CC0000` | 5.5:1 ✓ |

**On Dark Background (#1A1A2E):**
| Text Color | Hex | Contrast Ratio |
|------------|-----|----------------|
| White | `#FFFFFF` | 17.1:1 ✓ |
| Light Gray | `#E5E5E5` | 13.8:1 ✓ |
| Light Cyan | `#90E0EF` | 10.2:1 ✓ |
| Yellow | `#F0E442` | 12.5:1 ✓ |
| Light Blue | `#56B4E9` | 7.8:1 ✓ |

### Colors to Avoid Together

These combinations have poor contrast or are problematic for colorblind users:

- Red and Green (most common colorblindness)
- Blue and Purple (hard to distinguish)
- Light green and Yellow (low contrast)
- Red and Orange (similar hues)
- Blue and Gray (can be confused)
- Pink and Gray (similar values)

---

## Quick Reference: Color Prompt Phrases

Copy-paste these phrases into your prompts:

### By Mood

```
"Warm and inviting color palette with oranges, yellows, and cream"
"Cool professional color palette with blues, grays, and navy"
"Bold and energetic colors with bright accents on white background"
"Soft and calming pastel color scheme"
"High contrast black and white with single accent color"
"Earth tones with greens, browns, and natural colors"
```

### By Industry

```
"Corporate business colors: navy, gray, gold accents"
"Healthcare professional colors: blue, teal, white, clean clinical feel"
"Technology modern colors: dark background with neon blue accents"
"Environmental green color scheme with natural earth tones"
"Educational friendly colors: blue, coral, cream, approachable design"
"Financial conservative colors: navy, gold, high trust appearance"
```

### By Accessibility

```
"Colorblind-safe palette using Wong's recommended colors"
"High contrast color scheme meeting WCAG accessibility standards"
"Distinct colors that work in grayscale"
"IBM colorblind-safe palette for data visualization"
"Colors with patterns and labels for accessibility"
```

---

## Testing Your Colors

### Online Tools

1. **Contrast Checkers:**
   - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
   - Coolors Contrast Checker: https://coolors.co/contrast-checker

2. **Colorblind Simulators:**
   - Coblis: https://www.color-blindness.com/coblis-color-blindness-simulator/
   - Sim Daltonism (Mac app)
   - Color Oracle (Desktop app)

3. **Palette Generators:**
   - Coolors: https://coolors.co/
   - Adobe Color: https://color.adobe.com/
   - Paletton: https://paletton.com/

### Quick Grayscale Test

Convert your infographic to grayscale. If all elements are still distinguishable, your color choices are accessible.

---

Use these palettes as starting points, adjusting as needed for your specific content and brand requirements. Always test for accessibility before finalizing.
