Color Palette Generator
When to Use This Skill
Use this skill when you need to:
- Create a brand color palette from scratch
- Expand an existing palette with complementary colors
- Ensure color accessibility compliance (WCAG standards)
- Document color usage guidelines for consistent application
DO NOT use this skill for full brand identity guides, logo design, or UI component design. This is specifically for color palette creation and documentation.
Core Principle
A COLOR PALETTE MUST WORK IN EVERY CONTEXT — SCREEN, PRINT, LARGE BACKGROUNDS, SMALL TEXT — AND PASS ACCESSIBILITY STANDARDS FOR ALL USERS.
Phase 1: Brief
Required Inputs
| Input |
What to Ask |
Default |
| Brand personality |
"Describe your brand in 3 adjectives." |
Must be provided |
| Industry |
"What industry are you in?" |
Must be provided |
| Existing colors |
"Do you have any colors already? (hex codes, brand materials)" |
Starting fresh |
| Preferences |
"Any colors you love or hate?" |
None |
| Primary use |
"Where will colors be used most? (website, print, social, packaging)" |
Website and social |
| Competitors |
"What colors do your competitors use? (to differentiate)" |
Will research |
GATE: Confirm brief before generating palettes.
Phase 2: Generate
Palette Structure
Every brand palette needs these roles:
| Role |
Purpose |
Count |
| Primary |
Main brand color, CTAs, key elements |
1 |
| Secondary |
Supporting color, section backgrounds, accents |
1-2 |
| Neutral dark |
Text, dark backgrounds, headers |
1 |
| Neutral light |
Light backgrounds, cards, spacing |
1 |
| Accent |
Highlights, alerts, special elements |
1 |
| Success/Error |
Functional colors for UI feedback |
2 (green/red) |
Generation Method
- Start with the primary color based on brand personality and industry
- Use color theory to build harmonious relationships (complementary, analogous, triadic)
- Generate 2-3 complete palette options
- Test each for accessibility before presenting
GATE: Present 2-3 palette options and wait for selection.
Phase 3: Document
Deliverables
1. Complete Color Specification
For each color in the palette:
- Color name (brand-specific, e.g., "Ocean Blue" not just "Blue")
- Hex code (#1A73E8)
- RGB values (26, 115, 232)
- HSL values
- CMYK values (for print)
- Pantone match (closest)
2. Accessibility Report
- Contrast ratio for each color pair used for text
- WCAG AA compliance (4.5:1 for normal text, 3:1 for large text)
- WCAG AAA compliance where achievable
- Recommended text colors on each background color
3. Usage Guidelines
- Which color for which use case (backgrounds, buttons, text, links, hover states)
- Maximum percentage of each color in a typical layout (e.g., primary: 10%, neutrals: 70%)
- Color combinations to use and combinations to avoid
- Dark mode variations if applicable
4. Application Examples
- Sample website section using the palette
- Social media post example
- Business card or print layout example
- Email template color usage
Phase 4: Polish
Digital Asset Package
- Swatch file descriptions for design tools (Figma, Canva, Adobe)
- CSS custom properties for web implementation
- Tailwind config values (if applicable)
Print Preparation Notes
- CMYK values verified for accurate print reproduction
- Paper stock considerations that affect color appearance
- Recommend print proof before large runs
Example 1: Bold Tech Startup
Primary: Electric Blue (#2563EB) — confidence, trust, innovation
Secondary: Slate Gray (#475569) — professionalism, balance
Accent: Amber (#F59E0B) — energy, CTAs
Neutrals: Near-black (#0F172A), Off-white (#F8FAFC)
Example 2: Wellness Brand
Primary: Sage Green (#6B8F71) — calm, natural, growth
Secondary: Warm Sand (#D4B896) — approachable, earthy
Accent: Terracotta (#C2725A) — warmth, CTAs
Neutrals: Charcoal (#2D3436), Cream (#FFF9F0)
Anti-Patterns
- Too many colors — more than 6-8 colors creates visual chaos. Constrain the palette.
- Ignoring accessibility — beautiful colors that fail contrast requirements exclude users and risk legal issues.
- Matching competitor colors — if every competitor is blue, differentiate. Standing out matters more than fitting in.
- Screen-only thinking — colors that look great on screen may print poorly. Always provide CMYK values.
- No neutral colors — a palette of all vibrant colors has nowhere for the eye to rest. Include dark and light neutrals.
Recovery
- User cannot describe brand personality: Show them 5 color palettes and ask which feels closest. Reverse-engineer the personality from their preference.
- Existing color fails accessibility: Suggest slight adjustments (darken or lighten by 10-15%) that maintain the feel while passing WCAG.
- Too attached to a specific color: Build the rest of the palette around it. One non-negotiable color can anchor a great palette.
- Palette looks different on different screens: Provide the hex codes and note that screen calibration varies. Print proofs are the only reliable standard.
1---2name: color-palette-generator3description: Generates brand color palettes with hex codes, accessibility ratings, application guidelines, and print/digital specifications. Use when establishing or refreshing brand colors.4---56# Color Palette Generator78## When to Use This Skill910Use this skill when you need to:11- Create a brand color palette from scratch12- Expand an existing palette with complementary colors13- Ensure color accessibility compliance (WCAG standards)14- Document color usage guidelines for consistent application1516**DO NOT** use this skill for full brand identity guides, logo design, or UI component design. This is specifically for color palette creation and documentation.1718---1920## Core Principle2122A COLOR PALETTE MUST WORK IN EVERY CONTEXT — SCREEN, PRINT, LARGE BACKGROUNDS, SMALL TEXT — AND PASS ACCESSIBILITY STANDARDS FOR ALL USERS.2324---2526## Phase 1: Brief2728### Required Inputs2930| Input | What to Ask | Default |31|-------|------------|---------|32| **Brand personality** | "Describe your brand in 3 adjectives." | Must be provided |33| **Industry** | "What industry are you in?" | Must be provided |34| **Existing colors** | "Do you have any colors already? (hex codes, brand materials)" | Starting fresh |35| **Preferences** | "Any colors you love or hate?" | None |36| **Primary use** | "Where will colors be used most? (website, print, social, packaging)" | Website and social |37| **Competitors** | "What colors do your competitors use? (to differentiate)" | Will research |3839**GATE: Confirm brief before generating palettes.**4041---4243## Phase 2: Generate4445### Palette Structure4647Every brand palette needs these roles:4849| Role | Purpose | Count |50|------|---------|-------|51| **Primary** | Main brand color, CTAs, key elements | 1 |52| **Secondary** | Supporting color, section backgrounds, accents | 1-2 |53| **Neutral dark** | Text, dark backgrounds, headers | 1 |54| **Neutral light** | Light backgrounds, cards, spacing | 1 |55| **Accent** | Highlights, alerts, special elements | 1 |56| **Success/Error** | Functional colors for UI feedback | 2 (green/red) |5758### Generation Method59601. Start with the primary color based on brand personality and industry612. Use color theory to build harmonious relationships (complementary, analogous, triadic)623. Generate 2-3 complete palette options634. Test each for accessibility before presenting6465**GATE: Present 2-3 palette options and wait for selection.**6667---6869## Phase 3: Document7071### Deliverables7273**1. Complete Color Specification**7475For each color in the palette:76- Color name (brand-specific, e.g., "Ocean Blue" not just "Blue")77- Hex code (#1A73E8)78- RGB values (26, 115, 232)79- HSL values80- CMYK values (for print)81- Pantone match (closest)8283**2. Accessibility Report**84- Contrast ratio for each color pair used for text85- WCAG AA compliance (4.5:1 for normal text, 3:1 for large text)86- WCAG AAA compliance where achievable87- Recommended text colors on each background color8889**3. Usage Guidelines**90- Which color for which use case (backgrounds, buttons, text, links, hover states)91- Maximum percentage of each color in a typical layout (e.g., primary: 10%, neutrals: 70%)92- Color combinations to use and combinations to avoid93- Dark mode variations if applicable9495**4. Application Examples**96- Sample website section using the palette97- Social media post example98- Business card or print layout example99- Email template color usage100101---102103## Phase 4: Polish104105### Digital Asset Package106107- Swatch file descriptions for design tools (Figma, Canva, Adobe)108- CSS custom properties for web implementation109- Tailwind config values (if applicable)110111### Print Preparation Notes112113- CMYK values verified for accurate print reproduction114- Paper stock considerations that affect color appearance115- Recommend print proof before large runs116117---118119## Example 1: Bold Tech Startup120121**Primary:** Electric Blue (#2563EB) — confidence, trust, innovation122**Secondary:** Slate Gray (#475569) — professionalism, balance123**Accent:** Amber (#F59E0B) — energy, CTAs124**Neutrals:** Near-black (#0F172A), Off-white (#F8FAFC)125126## Example 2: Wellness Brand127128**Primary:** Sage Green (#6B8F71) — calm, natural, growth129**Secondary:** Warm Sand (#D4B896) — approachable, earthy130**Accent:** Terracotta (#C2725A) — warmth, CTAs131**Neutrals:** Charcoal (#2D3436), Cream (#FFF9F0)132133---134135## Anti-Patterns136137- **Too many colors** — more than 6-8 colors creates visual chaos. Constrain the palette.138- **Ignoring accessibility** — beautiful colors that fail contrast requirements exclude users and risk legal issues.139- **Matching competitor colors** — if every competitor is blue, differentiate. Standing out matters more than fitting in.140- **Screen-only thinking** — colors that look great on screen may print poorly. Always provide CMYK values.141- **No neutral colors** — a palette of all vibrant colors has nowhere for the eye to rest. Include dark and light neutrals.142143---144145## Recovery146147- **User cannot describe brand personality:** Show them 5 color palettes and ask which feels closest. Reverse-engineer the personality from their preference.148- **Existing color fails accessibility:** Suggest slight adjustments (darken or lighten by 10-15%) that maintain the feel while passing WCAG.149- **Too attached to a specific color:** Build the rest of the palette around it. One non-negotiable color can anchor a great palette.150- **Palette looks different on different screens:** Provide the hex codes and note that screen calibration varies. Print proofs are the only reliable standard.
reaperinvest