@synsci/cli-darwin-x64-baseline 1.1.77 → 1.1.78

package/bin/skills/infographics/references/color_palettes.md

@@ -0,0 +1,496 @@
+# 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.