Skillintermediate

Infographic Color Palettes Reference

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

Claude Code Knowledge Pack7/10/2026

Overview

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

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 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.