color_palettes.md
498 lines · skills/infographics/references/color_palettes.md at 5f2bc03
Infographic Color Palettes Reference
This reference provides comprehensive color palette options for creating accessible, professional infographics.
Raw lines 1 to 6
Colorblind-Safe Palettes
These palettes are designed to be distinguishable by people with various forms of color vision deficiency.
Raw lines 7 to 10Okabe-Ito / Wong Palette (7 Chromatic Colors Plus Black)
The Okabe-Ito palette, popularized by Bang Wong, provides seven chromatic colors and black. It does not guarantee contrast between every pair.
| 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"Raw lines 11 to 33
Legacy IBM Preset (5 Data Colors Plus Optional Neutrals)
The ibm CLI preset retains the five historical data colors below. Black, white, and gray are supporting neutrals, not additional categorical colors. Treat this as a legacy preset rather than a current IBM design-system specification.
| 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"Raw lines 34 to 56
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.
Raw lines 57 to 75
Tol's Muted Qualitative Palette (9 Colors)
Paul Tol's muted scheme contains nine categorical colors; pale gray is reserved for missing data. Gray and black are not extra categories in this scheme.
| 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 |
| Pale Gray (missing data only) | #DDDDDD | 221, 221, 221 |
Raw lines 76 to 94
Industry-Specific Palettes
Raw lines 95 to 96Corporate/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"Raw lines 97 to 118
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"Raw lines 119 to 140
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"Raw lines 141 to 171
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"Raw lines 172 to 193
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"Raw lines 194 to 215
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"Raw lines 216 to 237
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"Raw lines 238 to 260
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"Raw lines 261 to 282
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"Raw lines 283 to 304
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"Raw lines 305 to 326
Sunset Gradient
Start: #FF6B6B (Coral)
Middle: #FFA07A (Light Salmon)
End: #FFD93D (Yellow)
Direction: Top to bottom or left to rightRaw lines 331 to 338Ocean Gradient
Start: #0077B6 (Blue)
Middle: #00B4D8 (Cyan)
End: #90E0EF (Light Cyan)
Direction: Top to bottomRaw lines 339 to 346Forest Gradient
Start: #1B4332 (Dark Green)
Middle: #40916C (Green)
End: #95D5B2 (Mint)
Direction: Bottom to topRaw lines 347 to 354Purple Dream Gradient
Start: #7400B8 (Purple)
Middle: #5E60CE (Indigo)
End: #48BFE3 (Cyan)
Direction: Left to rightRaw lines 355 to 362Warm Gold Gradient
Start: #F5A623 (Gold)
Middle: #FFC857 (Light Gold)
End: #FFE8A8 (Pale Yellow)
Direction: Top to bottomRaw lines 363 to 370Cool Steel Gradient
Start: #1E3A5F (Navy)
Middle: #4A90A4 (Steel Blue)
End: #A8D5E2 (Light Blue)
Direction: Left to rightPrompt usage for gradients:
"Use ocean gradient background from blue (#0077B6) to light cyan (#90E0EF),
flowing top to bottom, modern clean design"Raw lines 371 to 386
Contrast Checking
Raw lines 387 to 388WCAG 2.2 Requirements
See text contrast and non-text contrast. Ratios below are computed from the stated sRGB hex colors; actual rendered colors must be checked.
| Contrast Ratio | Requirement |
|---|---|
| 4.5:1 | Normal text (under 18pt) |
| 3:1 | Large text (18pt+ or 14pt bold) |
| 3:1 | Essential graphical objects and UI components against adjacent colors, subject to WCAG exceptions |
Common Safe Combinations
On White Background (#FFFFFF):
| Text Color | Hex | Contrast Ratio |
|---|---|---|
| Black | #000000 | 21.0:1 ✓ |
| Dark Gray | #333333 | 12.6:1 ✓ |
| Navy | #1E3A5F | 11.5:1 ✓ |
| Dark Green | #1B4332 | 11.1:1 ✓ |
| Dark Blue | #0072B2 | 5.2:1 ✓ |
| Medium Gray | #666666 | 5.7:1 ✓ |
| Red | #CC0000 | 5.9:1 ✓ |
On Dark Background (#1A1A2E):
| Text Color | Hex | Contrast Ratio |
|---|---|---|
| White | #FFFFFF | 17.1:1 ✓ |
| Light Gray | #E5E5E5 | 13.5:1 ✓ |
| Light Cyan | #90E0EF | 11.4:1 ✓ |
| Yellow | #F0E442 | 12.9:1 ✓ |
| Light Blue | #56B4E9 | 7.4: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)
Raw lines 423 to 435
Quick Reference: Color Prompt Phrases
Copy-paste these phrases into your prompts:
Raw lines 436 to 439By 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"Raw lines 440 to 450By 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"Raw lines 451 to 461By 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"Raw lines 462 to 473
Testing Your Colors
Raw lines 474 to 475Online Tools
- Contrast Checkers:
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Coolors Contrast Checker: https://coolors.co/contrast-checker
- Colorblind Simulators:
- Coblis: https://www.color-blindness.com/coblis-color-blindness-simulator/
- Sim Daltonism (Mac app)
- Color Oracle (Desktop app)
- Palette Generators:
- Coolors: https://coolors.co/
- Adobe Color: https://color.adobe.com/
- Paletton: https://paletton.com/
Quick Grayscale Test
Convert the infographic to grayscale as one diagnostic. Distinguishability alone does not establish accessibility: check color-vision simulations, actual contrast, direct labels, and a complete text alternative. An image model may not reproduce the requested hex colors exactly.
Use these palettes as starting points, adjusting as needed for your specific content and brand requirements. Always test for accessibility before finalizing.
Raw lines 492 to 498