Skill Tracer
Skills › Scientific Agent Skills › infographics › color_palettes.md

color_palettes.md

498 lines · skills/infographics/references/color_palettes.md at 5f2bc03

Open on GitHub
1# Infographic Color Palettes Reference
2
3This reference provides comprehensive color palette options for creating accessible, professional infographics.
4
5---
6

Infographic Color Palettes Reference

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


Raw lines 1 to 6
7## Colorblind-Safe Palettes
8
9These palettes are designed to be distinguishable by people with various forms of color vision deficiency.

Colorblind-Safe Palettes

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

Raw lines 7 to 10
11### Okabe-Ito / Wong Palette (7 Chromatic Colors Plus Black)
13The [Okabe-Ito palette](https://jfly.uni-koeln.de/color/), popularized by [Bang Wong](https://doi.org/10.1038/nmeth.1618), provides seven chromatic colors and black. It does not guarantee contrast between every pair.
15| Name | Hex | RGB | Usage |
16|------|-----|-----|-------|
17| Black | `#000000` | 0, 0, 0 | Text, outlines |
18| Orange | `#E69F00` | 230, 159, 0 | Primary accent |
19| Sky Blue | `#56B4E9` | 86, 180, 233 | Primary data |
20| Bluish Green | `#009E73` | 0, 158, 115 | Secondary data |
21| Yellow | `#F0E442` | 240, 228, 66 | Highlight |
22| Blue | `#0072B2` | 0, 114, 178 | Primary category |
23| Vermillion | `#D55E00` | 213, 94, 0 | Alert, emphasis |
24| Reddish Purple | `#CC79A7` | 204, 121, 167 | Tertiary data |
26**Prompt usage:**
27```
28"Use Wong's colorblind-safe palette: orange (#E69F00), sky blue (#56B4E9),
29bluish green (#009E73), and blue (#0072B2) for data categories"
30```
32---

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

NameHexRGBUsage
Black#0000000, 0, 0Text, outlines
Orange#E69F00230, 159, 0Primary accent
Sky Blue#56B4E986, 180, 233Primary data
Bluish Green#009E730, 158, 115Secondary data
Yellow#F0E442240, 228, 66Highlight
Blue#0072B20, 114, 178Primary category
Vermillion#D55E00213, 94, 0Alert, emphasis
Reddish Purple#CC79A7204, 121, 167Tertiary 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
34### Legacy IBM Preset (5 Data Colors Plus Optional Neutrals)
36The `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.
38| Name | Hex | RGB | Usage |
39|------|-----|-----|-------|
40| Ultramarine | `#648FFF` | 100, 143, 255 | Primary blue |
41| Indigo | `#785EF0` | 120, 94, 240 | Secondary |
42| Magenta | `#DC267F` | 220, 38, 127 | Accent/Alert |
43| Orange | `#FE6100` | 254, 97, 0 | Warning/Highlight |
44| Gold | `#FFB000` | 255, 176, 0 | Positive/Success |
45| Black | `#000000` | 0, 0, 0 | Text |
46| White | `#FFFFFF` | 255, 255, 255 | Background |
47| Gray | `#808080` | 128, 128, 128 | Neutral |
49**Prompt usage:**
50```
51"Use IBM colorblind-safe colors: ultramarine (#648FFF), indigo (#785EF0),
52magenta (#DC267F), and gold (#FFB000) for visual elements"
53```
55---

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.

NameHexRGBUsage
Ultramarine#648FFF100, 143, 255Primary blue
Indigo#785EF0120, 94, 240Secondary
Magenta#DC267F220, 38, 127Accent/Alert
Orange#FE6100254, 97, 0Warning/Highlight
Gold#FFB000255, 176, 0Positive/Success
Black#0000000, 0, 0Text
White#FFFFFF255, 255, 255Background
Gray#808080128, 128, 128Neutral

Prompt usage:

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

Raw lines 34 to 56
57### Okabe-Ito Palette (8 Colors)
59Developed by Masataka Okabe and Kei Ito, widely used in scientific publications.
61| Name | Hex | RGB | Usage |
62|------|-----|-----|-------|
63| Black | `#000000` | 0, 0, 0 | Text, primary |
64| Orange | `#E69F00` | 230, 159, 0 | Category 1 |
65| Sky Blue | `#56B4E9` | 86, 180, 233 | Category 2 |
66| Bluish Green | `#009E73` | 0, 158, 115 | Category 3 |
67| Yellow | `#F0E442` | 240, 228, 66 | Category 4 |
68| Blue | `#0072B2` | 0, 114, 178 | Category 5 |
69| Vermillion | `#D55E00` | 213, 94, 0 | Category 6 |
70| Reddish Purple | `#CC79A7` | 204, 121, 167 | Category 7 |
72**Note:** Identical to Wong's palette - both are industry standards.
74---

Okabe-Ito Palette (8 Colors)

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

NameHexRGBUsage
Black#0000000, 0, 0Text, primary
Orange#E69F00230, 159, 0Category 1
Sky Blue#56B4E986, 180, 233Category 2
Bluish Green#009E730, 158, 115Category 3
Yellow#F0E442240, 228, 66Category 4
Blue#0072B20, 114, 178Category 5
Vermillion#D55E00213, 94, 0Category 6
Reddish Purple#CC79A7204, 121, 167Category 7

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


Raw lines 57 to 75
76### Tol's Muted Qualitative Palette (9 Colors)
78[Paul Tol's muted scheme](https://sronpersonalpages.nl/~pault/#fig:scheme_muted) contains nine categorical colors; pale gray is reserved for missing data. Gray and black are not extra categories in this scheme.
80| Name | Hex | RGB |
81|------|-----|-----|
82| Indigo | `#332288` | 51, 34, 136 |
83| Cyan | `#88CCEE` | 136, 204, 238 |
84| Teal | `#44AA99` | 68, 170, 153 |
85| Green | `#117733` | 17, 119, 51 |
86| Olive | `#999933` | 153, 153, 51 |
87| Sand | `#DDCC77` | 221, 204, 119 |
88| Rose | `#CC6677` | 204, 102, 119 |
89| Wine | `#882255` | 136, 34, 85 |
90| Purple | `#AA4499` | 170, 68, 153 |
91| Pale Gray (missing data only) | `#DDDDDD` | 221, 221, 221 |
93---

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.

NameHexRGB
Indigo#33228851, 34, 136
Cyan#88CCEE136, 204, 238
Teal#44AA9968, 170, 153
Green#11773317, 119, 51
Olive#999933153, 153, 51
Sand#DDCC77221, 204, 119
Rose#CC6677204, 102, 119
Wine#882255136, 34, 85
Purple#AA4499170, 68, 153
Pale Gray (missing data only)#DDDDDD221, 221, 221

Raw lines 76 to 94
95## Industry-Specific Palettes

Industry-Specific Palettes

Raw lines 95 to 96
97### Corporate/Business
99Classic, professional appearance suitable for business reports and presentations.
101| Role | Name | Hex | RGB |
102|------|------|-----|-----|
103| Primary | Navy | `#1E3A5F` | 30, 58, 95 |
104| Secondary | Steel Blue | `#4A90A4` | 74, 144, 164 |
105| Tertiary | Light Blue | `#A8D5E2` | 168, 213, 226 |
106| Accent | Gold | `#F5A623` | 245, 166, 35 |
107| Background | Light Gray | `#F5F5F5` | 245, 245, 245 |
108| Text | Charcoal | `#333333` | 51, 51, 51 |
110**Prompt usage:**
111```
112"Corporate business color scheme: navy blue (#1E3A5F) primary,
113steel blue (#4A90A4) secondary, gold (#F5A623) accent,
114light gray background, professional clean design"
115```
117---

Corporate/Business

Classic, professional appearance suitable for business reports and presentations.

RoleNameHexRGB
PrimaryNavy#1E3A5F30, 58, 95
SecondarySteel Blue#4A90A474, 144, 164
TertiaryLight Blue#A8D5E2168, 213, 226
AccentGold#F5A623245, 166, 35
BackgroundLight Gray#F5F5F5245, 245, 245
TextCharcoal#33333351, 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
119### Healthcare/Medical
121Trust-inducing, clinical colors appropriate for health-related content.
123| Role | Name | Hex | RGB |
124|------|------|-----|-----|
125| Primary | Medical Blue | `#0077B6` | 0, 119, 182 |
126| Secondary | Cyan | `#00B4D8` | 0, 180, 216 |
127| Tertiary | Light Cyan | `#90E0EF` | 144, 224, 239 |
128| Accent | Coral | `#FF6B6B` | 255, 107, 107 |
129| Background | White | `#FFFFFF` | 255, 255, 255 |
130| Text | Dark Blue | `#023E8A` | 2, 62, 138 |
132**Prompt usage:**
133```
134"Healthcare medical color scheme: medical blue (#0077B6),
135cyan (#00B4D8) accents, coral (#FF6B6B) for emphasis,
136clean clinical white background, professional medical design"
137```
139---

Healthcare/Medical

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

RoleNameHexRGB
PrimaryMedical Blue#0077B60, 119, 182
SecondaryCyan#00B4D80, 180, 216
TertiaryLight Cyan#90E0EF144, 224, 239
AccentCoral#FF6B6B255, 107, 107
BackgroundWhite#FFFFFF255, 255, 255
TextDark Blue#023E8A2, 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
141### Technology/Data
143Modern, tech-forward appearance, works well with dark mode.
145| Role | Name | Hex | RGB |
146|------|------|-----|-----|
147| Primary Dark | Deep Navy | `#1A1A2E` | 26, 26, 46 |
148| Secondary | Navy | `#16213E` | 22, 33, 62 |
149| Tertiary | Blue | `#0F3460` | 15, 52, 96 |
150| Accent | Electric Blue | `#00D9FF` | 0, 217, 255 |
151| Accent 2 | Neon Purple | `#7B2CBF` | 123, 44, 191 |
152| Text | White | `#FFFFFF` | 255, 255, 255 |
154**Light Mode Alternative:**
156| Role | Name | Hex | RGB |
157|------|------|-----|-----|
158| Primary | Tech Blue | `#2563EB` | 37, 99, 235 |
159| Secondary | Slate | `#475569` | 71, 85, 105 |
160| Accent | Violet | `#7C3AED` | 124, 58, 237 |
161| Background | Light Gray | `#F8FAFC` | 248, 250, 252 |
163**Prompt usage:**
164```
165"Technology data visualization colors: deep navy (#1A1A2E) background,
166electric blue (#00D9FF) and neon purple (#7B2CBF) accents,
167modern tech aesthetic, futuristic design"
168```
170---

Technology/Data

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

RoleNameHexRGB
Primary DarkDeep Navy#1A1A2E26, 26, 46
SecondaryNavy#16213E22, 33, 62
TertiaryBlue#0F346015, 52, 96
AccentElectric Blue#00D9FF0, 217, 255
Accent 2Neon Purple#7B2CBF123, 44, 191
TextWhite#FFFFFF255, 255, 255

Light Mode Alternative:

RoleNameHexRGB
PrimaryTech Blue#2563EB37, 99, 235
SecondarySlate#47556971, 85, 105
AccentViolet#7C3AED124, 58, 237
BackgroundLight Gray#F8FAFC248, 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
172### Nature/Environmental
174Earth tones and greens for sustainability and environmental topics.
176| Role | Name | Hex | RGB |
177|------|------|-----|-----|
178| Primary | Forest | `#2D6A4F` | 45, 106, 79 |
179| Secondary | Green | `#40916C` | 64, 145, 108 |
180| Tertiary | Mint | `#95D5B2` | 149, 213, 178 |
181| Accent | Earth Brown | `#8B4513` | 139, 69, 19 |
182| Background | Cream | `#FAF3E0` | 250, 243, 224 |
183| Text | Dark Green | `#1B4332` | 27, 67, 50 |
185**Prompt usage:**
186```
187"Environmental nature color scheme: forest green (#2D6A4F),
188mint (#95D5B2), earth brown (#8B4513) accents,
189cream background, organic natural design feel"
190```
192---

Nature/Environmental

Earth tones and greens for sustainability and environmental topics.

RoleNameHexRGB
PrimaryForest#2D6A4F45, 106, 79
SecondaryGreen#40916C64, 145, 108
TertiaryMint#95D5B2149, 213, 178
AccentEarth Brown#8B4513139, 69, 19
BackgroundCream#FAF3E0250, 243, 224
TextDark Green#1B433227, 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
194### Education/Academic
196Friendly yet professional colors for learning content.
198| Role | Name | Hex | RGB |
199|------|------|-----|-----|
200| Primary | Academic Blue | `#3D5A80` | 61, 90, 128 |
201| Secondary | Light Blue | `#98C1D9` | 152, 193, 217 |
202| Tertiary | Cream | `#E0FBFC` | 224, 251, 252 |
203| Accent | Coral | `#EE6C4D` | 238, 108, 77 |
204| Background | Warm White | `#FEFEFE` | 254, 254, 254 |
205| Text | Dark Gray | `#293241` | 41, 50, 65 |
207**Prompt usage:**
208```
209"Education academic color scheme: academic blue (#3D5A80),
210light blue (#98C1D9), coral (#EE6C4D) highlights,
211warm white background, friendly educational design"
212```
214---

Education/Academic

Friendly yet professional colors for learning content.

RoleNameHexRGB
PrimaryAcademic Blue#3D5A8061, 90, 128
SecondaryLight Blue#98C1D9152, 193, 217
TertiaryCream#E0FBFC224, 251, 252
AccentCoral#EE6C4D238, 108, 77
BackgroundWarm White#FEFEFE254, 254, 254
TextDark Gray#29324141, 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
216### Marketing/Creative
218Bold, vibrant colors for attention-grabbing content.
220| Role | Name | Hex | RGB |
221|------|------|-----|-----|
222| Primary | Coral | `#FF6B6B` | 255, 107, 107 |
223| Secondary | Teal | `#4ECDC4` | 78, 205, 196 |
224| Tertiary | Yellow | `#FFE66D` | 255, 230, 109 |
225| Accent | Purple | `#9B59B6` | 155, 89, 182 |
226| Background | White | `#FFFFFF` | 255, 255, 255 |
227| Text | Charcoal | `#2C3E50` | 44, 62, 80 |
229**Prompt usage:**
230```
231"Marketing creative colors: vibrant coral (#FF6B6B), teal (#4ECDC4),
232yellow (#FFE66D) accents, bold eye-catching design,
233modern and energetic feel"
234```
236---

Marketing/Creative

Bold, vibrant colors for attention-grabbing content.

RoleNameHexRGB
PrimaryCoral#FF6B6B255, 107, 107
SecondaryTeal#4ECDC478, 205, 196
TertiaryYellow#FFE66D255, 230, 109
AccentPurple#9B59B6155, 89, 182
BackgroundWhite#FFFFFF255, 255, 255
TextCharcoal#2C3E5044, 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
238### Finance/Investment
240Conservative, trustworthy appearance for financial content.
242| Role | Name | Hex | RGB |
243|------|------|-----|-----|
244| Primary | Navy | `#14213D` | 20, 33, 61 |
245| Secondary | Gold | `#FCA311` | 252, 163, 17 |
246| Tertiary | Light Gray | `#E5E5E5` | 229, 229, 229 |
247| Accent | Green | `#2ECC71` | 46, 204, 113 |
248| Accent Negative | Red | `#E74C3C` | 231, 76, 60 |
249| Background | White | `#FFFFFF` | 255, 255, 255 |
250| Text | Black | `#000000` | 0, 0, 0 |
252**Prompt usage:**
253```
254"Finance investment color scheme: navy (#14213D), gold (#FCA311),
255green (#2ECC71) for positive, red (#E74C3C) for negative,
256conservative professional design, trustworthy appearance"
257```
259---

Finance/Investment

Conservative, trustworthy appearance for financial content.

RoleNameHexRGB
PrimaryNavy#14213D20, 33, 61
SecondaryGold#FCA311252, 163, 17
TertiaryLight Gray#E5E5E5229, 229, 229
AccentGreen#2ECC7146, 204, 113
Accent NegativeRed#E74C3C231, 76, 60
BackgroundWhite#FFFFFF255, 255, 255
TextBlack#0000000, 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
261### Creative/Design
263Artistic, gradient-friendly palette for creative content.
265| Role | Name | Hex | RGB |
266|------|------|-----|-----|
267| Primary | Purple | `#7400B8` | 116, 0, 184 |
268| Secondary | Indigo | `#5E60CE` | 94, 96, 206 |
269| Tertiary | Blue | `#4EA8DE` | 78, 168, 222 |
270| Accent | Cyan | `#48BFE3` | 72, 191, 227 |
271| Accent 2 | Pink | `#F72585` | 247, 37, 133 |
272| Background | Dark | `#1A1A2E` | 26, 26, 46 |
274**Prompt usage:**
275```
276"Creative design colors: purple (#7400B8) to cyan (#48BFE3) gradient,
277pink (#F72585) accents, artistic modern style,
278dark background, bold creative aesthetic"
279```
281---

Creative/Design

Artistic, gradient-friendly palette for creative content.

RoleNameHexRGB
PrimaryPurple#7400B8116, 0, 184
SecondaryIndigo#5E60CE94, 96, 206
TertiaryBlue#4EA8DE78, 168, 222
AccentCyan#48BFE372, 191, 227
Accent 2Pink#F72585247, 37, 133
BackgroundDark#1A1A2E26, 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
283### Government/Policy
285Formal, accessible colors for public sector content.
287| Role | Name | Hex | RGB |
288|------|------|-----|-----|
289| Primary | Navy | `#003366` | 0, 51, 102 |
290| Secondary | Red | `#CC0000` | 204, 0, 0 |
291| Tertiary | Light Blue | `#6699CC` | 102, 153, 204 |
292| Neutral | Gray | `#666666` | 102, 102, 102 |
293| Background | White | `#FFFFFF` | 255, 255, 255 |
294| Text | Black | `#000000` | 0, 0, 0 |
296**Prompt usage:**
297```
298"Government policy colors: navy blue (#003366), red (#CC0000) accents,
299light blue (#6699CC) secondary, formal accessible design,
300high contrast for readability"
301```
303---

Government/Policy

Formal, accessible colors for public sector content.

RoleNameHexRGB
PrimaryNavy#0033660, 51, 102
SecondaryRed#CC0000204, 0, 0
TertiaryLight Blue#6699CC102, 153, 204
NeutralGray#666666102, 102, 102
BackgroundWhite#FFFFFF255, 255, 255
TextBlack#0000000, 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
305### Nonprofit/Cause
307Warm, human-centered colors for social impact content.
309| Role | Name | Hex | RGB |
310|------|------|-----|-----|
311| Primary | Warm Orange | `#E07A5F` | 224, 122, 95 |
312| Secondary | Sage | `#81B29A` | 129, 178, 154 |
313| Tertiary | Sand | `#F2CC8F` | 242, 204, 143 |
314| Accent | Deep Blue | `#3D405B` | 61, 64, 91 |
315| Background | Cream | `#F4F1DE` | 244, 241, 222 |
316| Text | Dark | `#333333` | 51, 51, 51 |
318**Prompt usage:**
319```
320"Nonprofit cause colors: warm orange (#E07A5F), sage green (#81B29A),
321sand (#F2CC8F), human-centered warm design,
322cream background, impactful and welcoming"
323```
325---

Nonprofit/Cause

Warm, human-centered colors for social impact content.

RoleNameHexRGB
PrimaryWarm Orange#E07A5F224, 122, 95
SecondarySage#81B29A129, 178, 154
TertiarySand#F2CC8F242, 204, 143
AccentDeep Blue#3D405B61, 64, 91
BackgroundCream#F4F1DE244, 241, 222
TextDark#33333351, 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
327## Gradient Combinations
329Pre-defined gradient combinations for modern infographics.

Gradient Combinations

Pre-defined gradient combinations for modern infographics.

Raw lines 327 to 330
331### Sunset Gradient
332```
333Start: #FF6B6B (Coral)
334Middle: #FFA07A (Light Salmon)
335End: #FFD93D (Yellow)
336Direction: Top to bottom or left to right
337```

Sunset Gradient

Start: #FF6B6B (Coral)
Middle: #FFA07A (Light Salmon)
End: #FFD93D (Yellow)
Direction: Top to bottom or left to right
Raw lines 331 to 338
339### Ocean Gradient
340```
341Start: #0077B6 (Blue)
342Middle: #00B4D8 (Cyan)
343End: #90E0EF (Light Cyan)
344Direction: Top to bottom
345```

Ocean Gradient

Start: #0077B6 (Blue)
Middle: #00B4D8 (Cyan)
End: #90E0EF (Light Cyan)
Direction: Top to bottom
Raw lines 339 to 346
347### Forest Gradient
348```
349Start: #1B4332 (Dark Green)
350Middle: #40916C (Green)
351End: #95D5B2 (Mint)
352Direction: Bottom to top
353```

Forest Gradient

Start: #1B4332 (Dark Green)
Middle: #40916C (Green)
End: #95D5B2 (Mint)
Direction: Bottom to top
Raw lines 347 to 354
355### Purple Dream Gradient
356```
357Start: #7400B8 (Purple)
358Middle: #5E60CE (Indigo)
359End: #48BFE3 (Cyan)
360Direction: Left to right
361```

Purple Dream Gradient

Start: #7400B8 (Purple)
Middle: #5E60CE (Indigo)
End: #48BFE3 (Cyan)
Direction: Left to right
Raw lines 355 to 362
363### Warm Gold Gradient
364```
365Start: #F5A623 (Gold)
366Middle: #FFC857 (Light Gold)
367End: #FFE8A8 (Pale Yellow)
368Direction: Top to bottom
369```

Warm Gold Gradient

Start: #F5A623 (Gold)
Middle: #FFC857 (Light Gold)
End: #FFE8A8 (Pale Yellow)
Direction: Top to bottom
Raw lines 363 to 370
371### Cool Steel Gradient
372```
373Start: #1E3A5F (Navy)
374Middle: #4A90A4 (Steel Blue)
375End: #A8D5E2 (Light Blue)
376Direction: Left to right
377```
379**Prompt usage for gradients:**
380```
381"Use ocean gradient background from blue (#0077B6) to light cyan (#90E0EF),
382flowing top to bottom, modern clean design"
383```
385---

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"

Raw lines 371 to 386
387## Contrast Checking

Contrast Checking

Raw lines 387 to 388
389### WCAG 2.2 Requirements
391See [text contrast](https://www.w3.org/TR/WCAG22/#contrast-minimum) and
392[non-text contrast](https://www.w3.org/TR/WCAG22/#non-text-contrast). Ratios below
393are computed from the stated sRGB hex colors; actual rendered colors must be checked.
395| Contrast Ratio | Requirement |
396|----------------|-------------|
397| 4.5:1 | Normal text (under 18pt) |
398| 3:1 | Large text (18pt+ or 14pt bold) |
399| 3:1 | Essential graphical objects and UI components against adjacent colors, subject to WCAG exceptions |

WCAG 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 RatioRequirement
4.5:1Normal text (under 18pt)
3:1Large text (18pt+ or 14pt bold)
3:1Essential graphical objects and UI components against adjacent colors, subject to WCAG exceptions
Raw lines 389 to 400
401### Common Safe Combinations
403**On White Background (#FFFFFF):**
404| Text Color | Hex | Contrast Ratio |
405|------------|-----|----------------|
406| Black | `#000000` | 21.0:1 ✓ |
407| Dark Gray | `#333333` | 12.6:1 ✓ |
408| Navy | `#1E3A5F` | 11.5:1 ✓ |
409| Dark Green | `#1B4332` | 11.1:1 ✓ |
410| Dark Blue | `#0072B2` | 5.2:1 ✓ |
411| Medium Gray | `#666666` | 5.7:1 ✓ |
412| Red | `#CC0000` | 5.9:1 ✓ |
414**On Dark Background (#1A1A2E):**
415| Text Color | Hex | Contrast Ratio |
416|------------|-----|----------------|
417| White | `#FFFFFF` | 17.1:1 ✓ |
418| Light Gray | `#E5E5E5` | 13.5:1 ✓ |
419| Light Cyan | `#90E0EF` | 11.4:1 ✓ |
420| Yellow | `#F0E442` | 12.9:1 ✓ |
421| Light Blue | `#56B4E9` | 7.4:1 ✓ |

Common Safe Combinations

On White Background (#FFFFFF):

Text ColorHexContrast Ratio
Black#00000021.0:1 ✓
Dark Gray#33333312.6:1 ✓
Navy#1E3A5F11.5:1 ✓
Dark Green#1B433211.1:1 ✓
Dark Blue#0072B25.2:1 ✓
Medium Gray#6666665.7:1 ✓
Red#CC00005.9:1 ✓

On Dark Background (#1A1A2E):

Text ColorHexContrast Ratio
White#FFFFFF17.1:1 ✓
Light Gray#E5E5E513.5:1 ✓
Light Cyan#90E0EF11.4:1 ✓
Yellow#F0E44212.9:1 ✓
Light Blue#56B4E97.4:1 ✓
Raw lines 401 to 422
423### Colors to Avoid Together
425These combinations have poor contrast or are problematic for colorblind users:
427- Red and Green (most common colorblindness)
428- Blue and Purple (hard to distinguish)
429- Light green and Yellow (low contrast)
430- Red and Orange (similar hues)
431- Blue and Gray (can be confused)
432- Pink and Gray (similar values)
434---

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
436## Quick Reference: Color Prompt Phrases
438Copy-paste these phrases into your prompts:

Quick Reference: Color Prompt Phrases

Copy-paste these phrases into your prompts:

Raw lines 436 to 439
440### By Mood
442```
443"Warm and inviting color palette with oranges, yellows, and cream"
444"Cool professional color palette with blues, grays, and navy"
445"Bold and energetic colors with bright accents on white background"
446"Soft and calming pastel color scheme"
447"High contrast black and white with single accent color"
448"Earth tones with greens, browns, and natural colors"
449```

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"
Raw lines 440 to 450
451### By Industry
453```
454"Corporate business colors: navy, gray, gold accents"
455"Healthcare professional colors: blue, teal, white, clean clinical feel"
456"Technology modern colors: dark background with neon blue accents"
457"Environmental green color scheme with natural earth tones"
458"Educational friendly colors: blue, coral, cream, approachable design"
459"Financial conservative colors: navy, gold, high trust appearance"
460```

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"
Raw lines 451 to 461
462### By Accessibility
464```
465"Colorblind-safe palette using Wong's recommended colors"
466"High contrast color scheme meeting WCAG accessibility standards"
467"Distinct colors that work in grayscale"
468"IBM colorblind-safe palette for data visualization"
469"Colors with patterns and labels for accessibility"
470```
472---

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"

Raw lines 462 to 473
474## Testing Your Colors

Testing Your Colors

Raw lines 474 to 475
476### Online Tools
4781. **Contrast Checkers:**
479 - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
480 - Coolors Contrast Checker: https://coolors.co/contrast-checker
4822. **Colorblind Simulators:**
483 - Coblis: https://www.color-blindness.com/coblis-color-blindness-simulator/
484 - Sim Daltonism (Mac app)
485 - Color Oracle (Desktop app)
4873. **Palette Generators:**
488 - Coolors: https://coolors.co/
489 - Adobe Color: https://color.adobe.com/
490 - Paletton: https://paletton.com/

Online Tools

  1. Contrast Checkers:
  2. WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
  3. Coolors Contrast Checker: https://coolors.co/contrast-checker
  1. Colorblind Simulators:
  2. Coblis: https://www.color-blindness.com/coblis-color-blindness-simulator/
  3. Sim Daltonism (Mac app)
  4. Color Oracle (Desktop app)
  1. Palette Generators:
  2. Coolors: https://coolors.co/
  3. Adobe Color: https://color.adobe.com/
  4. Paletton: https://paletton.com/
Raw lines 476 to 491
492### Quick Grayscale Test
494Convert 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.
496---
498Use these palettes as starting points, adjusting as needed for your specific content and brand requirements. Always test for accessibility before finalizing.

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