brand-color-psychology — Claude Code skill: setup and guide
A reference framework for choosing brand palettes using behavioral context, archetype theory, and contrast requirements. It guides color role distribution and market differentiation.
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-codeWhat brand-color-psychology does
This skill provides prompt guidelines for strategic color selection. It relies on the premise that hue perception changes across settings, meaning no single shade fits every product. Context dictates the emotional response. The assistant references archetype profiles, harmony systems like triadic or complementary schemes, and visual hierarchy rules.
For implementation, the skill requires defining codes across digital and print formats. Because the CMYK print spectrum is narrower than RGB displays, physical materials will deviate without separate calibration. The instructions also explain how to run a competitor color audit to claim unoccupied visual territory.
What it helps with
- choose accessible interface shades that meet legibility criteria
- establish a visual palette aligned with product archetype profiles
- spot unowned color territory during competitive product analysis
- define matching values across digital and print specifications
Example prompts for the agent
- Suggest an accessible color scheme for a security dashboard using neutral and accent tones
- Audit our competitor shades and recommend an unowned accent color for our product
- Map these interface colors across RGB, CMYK, and digital formats
How to install brand-color-psychology
1Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-code2Manually: put the files in place
~/.claude/skills/brand-color-psychology/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/brand-color-psychology/
1Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a codex2Manually: put the files in place
.agents/skills/brand-color-psychology/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a cursor2Manually: put the files in place
.cursor/skills/brand-color-psychology/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install mike-coulbourn/claude-vibes brand-color-psychology2Manually: put the files in place
.github/skills/brand-color-psychology/SKILL.md1Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a gemini-cli2Platform CLI
gemini skills install https://github.com/mike-coulbourn/claude-vibes --path plugins/vibes/skills/brand-color-psychologyManually: put the files in place
.devin/skills/brand-color-psychology/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about brand-color-psychology
How do I install brand-color-psychology in Claude Code?
Run npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-code in your terminal.
What does brand-color-psychology do?
It supplies structured rules for building branded palettes, evaluating accessibility, and choosing tones based on industry context.
Why does the skill separate digital and print specs?
Print gamuts reproduce fewer shades than computer displays. Specifying separate values prevents colors from looking dull on physical paper.
Source text
SKILL.md · MIT
--- name: brand-color-psychology description: Use when selecting or evaluating brand colors, building a palette with primary, secondary, neutral, and accent roles, differentiating from competitor colors, or checking color contrast and accessibility. Keywords - color psychology, color palette, 60-30-10 rule, color harmony, archetype colors, cultural color meaning, WCAG contrast, hex and CMYK specifications. --- # Brand color psychology & strategic palette development Quick reference for developing strategic brand color palettes grounded in psychology, differentiation, and practical application. > "62-90% of snap judgments about products are based on color alone." — Satyendra Singh, Management Decision (2006) > "Consistent color use can increase brand recognition by up to 80%." — Reboot Online Study > "Color appropriateness to the brand context may be the single most important factor." — Help Scout Research --- ## Key statistics | Metric | Value | Implication | |--------|-------|-------------| | **First impressions based on color** | 90% | Color creates instant perception | | **Brand recognition from consistent color** | 80% | Consistency compounds over time | | **Snap judgments color-based** | 62-90% | Color forms the first impression | | **Time to form judgment** | 90 seconds | Color dominates in the 90-Second Rule | --- ## Core frameworks ### 1. Color-in-Context Theory (Elliot & Maier) **The foundational principle:** Color effects are neither universal nor arbitrary. They are context-dependent. **Key principles:** 1. Color meaning varies based on psychological context 2. Some responses are biological; others are learned through repeated pairings 3. Hue, lightness, and chroma all matter, not just hue 4. Same color triggers different responses in different contexts **Example:** Red on a sale banner = urgency. Red on a health app = danger/warning. Red on Valentine's = love/passion. Context determines meaning. **When to use:** When making strategic decisions about color meaning for your specific brand context, audience, and industry. --- ### 2. The Appropriateness Principle **The key insight:** Color effectiveness depends on perceived fit with the brand, product, and context. An "appropriate" color outperforms a theoretically "better" color that feels wrong. - Blue works for finance because people expect trust signals there - Blue may not work for a children's candy brand - Fit > Theory **Implication:** Ask "Does this color fit THIS brand in THIS context?" not "Is this a good color?" --- ### 3. The 60-30-10 Rule A color distribution framework that creates visual balance and hierarchy: | Proportion | Role | Usage | |------------|------|-------| | **60%** | Dominant/Base | Neutrals; backgrounds, large areas | | **30%** | Secondary | Primary brand color; headers, navigation | | **10%** | Accent | High-contrast CTAs, highlights | **Why it works:** Creates visual hierarchy without overwhelming. Ensures the accent color draws attention precisely where needed. **When to use:** For all brand applications: websites, packaging, marketing materials, app interfaces. --- ### 4. Brand Archetype Color Framework Each brand archetype has associated color palettes that reinforce personality: | Archetype | Color Associations | Psychology | |-----------|-------------------|------------| | **Hero** | Bold reds, blues, gold, black | Power, strength, achievement | | **Sage** | Blues, muted tones, gray, white | Wisdom, knowledge, trust | | **Outlaw** | Black, red, electric colors | Rebellion, disruption, danger | | **Innocent** | Pastels, white, baby blue, pale yellow | Optimism, purity, simplicity | | **Explorer** | Earthy greens, browns, oranges, blues | Adventure, freedom, discovery | | **Caregiver** | Soft blues, greens, warm earth tones | Nurturing, trust, compassion | | **Creator** | Bold, unconventional combinations | Innovation, self-expression | | **Ruler** | Deep purples, gold, black, navy | Authority, luxury, control | | **Magician** | Purples, deep blues, mystical tones | Transformation, vision, imagination | | **Lover** | Reds, pinks, warm tones, sensuous colors | Passion, intimacy, indulgence | | **Jester** | Bright, playful, multi-color combinations | Fun, humor, spontaneity | | **Everyman** | Earthy, accessible colors, blues, greens | Relatability, belonging, trust | **When to use:** After defining brand personality and archetype positioning. --- ### 5. Color Harmony Systems Based on traditional color theory (Isaac Newton's *Opticks*): | Scheme | Description | Best For | |--------|-------------|----------| | **Monochromatic** | Single hue with tints, shades, tones | Sophisticated, cohesive feel (Spotify's greens) | | **Complementary** | Opposites on wheel (blue/orange, red/green) | Maximum contrast, visual pop (use sparingly) | | **Analogous** | Three adjacent colors (blue-green-teal) | Harmonious, soothing palettes | | **Triadic** | Three colors equally spaced (120° apart) | Vibrant and balanced; one primary, others as accents | | **Split-Complementary** | Base + two neighbors of complement | Good contrast with less tension | **When to use:** When constructing secondary and accent color selections after choosing primary. --- ## Blue Ocean Color Strategy Borrowed from Kim and Mauborgne's Blue Ocean Strategy: Find uncontested visual territory. ### The process 1. **Audit the category**: What colors do all major competitors use? 2. **Identify gaps**: What colors are absent or underutilized? 3. **Assess fit**: Does an alternative color still fit brand personality and audience expectations? 4. **Test the territory**: Can you own this color space credibly? ### Success examples | Brand | Strategy | Result | |-------|----------|--------| | **Lufthansa** | Yellow in an airline industry of blues/reds | Globally recognized differentiation | | **T-Mobile** | Magenta in telecom | Instant recognition vs. blue/red competitors | | **Apple** | White/silver in black/gray industry | Communicated purity and design-forward thinking | | **ING** | Orange in conservative blue banking | Signaled innovation and approachability | | **Tiffany & Co.** | PMS 1837 (trademarked) | Color alone triggers recognition without logo | **Key insight:** While conforming to industry color norms feels safe, strategic differentiation often creates more value. --- ## Color specification systems Document every brand color in all four systems: | System | Description | Use For | Format Example | |--------|-------------|---------|----------------| | **HEX** | Six-digit code for RGB | Web development, CSS | #FF0000 | | **RGB** | Red, Green, Blue values | Digital screens, apps | rgb(255, 0, 0) | | **CMYK** | Cyan, Magenta, Yellow, Black | Print materials | C:0 M:100 Y:100 K:0 | | **Pantone** | Standardized spot colors | Brand consistency, premium printing | PMS 485 C | **Important notes:** - RGB has largest gamut; some colors cannot be reproduced in print - CMYK gamut is smaller, so some digital colors look duller in print - ~30% of Pantone colors cannot be replicated in CMYK - Some Pantone colors are trademarked (Tiffany Blue PMS 1837, UPS Brown, Barbie Pink) --- ## Industry-specific conventions ### Technology and finance - **Dominant:** Blue (trust, stability, competence) - **Notable Users:** IBM, Facebook, Chase, LinkedIn - **Differentiation Opportunity:** Purple (Twitch), Green (Robinhood), Magenta (T-Mobile) ### Healthcare and wellness - **Dominant:** Blue (trust), Green (healing, calm) - **Application:** Cool colors reduce patient anxiety ### Food and beverage - **Dominant:** Red, Yellow, Orange - **Scientific Basis:** Warm colors stimulate appetite and quick decision-making ### Luxury and premium - **Dominant:** Black, Gold, Deep Navy, White - **Application:** Restrained palettes with metallic accents; less is more ### Eco/sustainability - **Dominant:** Green, Earth tones (brown, tan) - **Notable Users:** Whole Foods, Patagonia --- ## Cultural color considerations Color meanings vary dramatically across cultures: | Color | Western | Eastern/Asian | Middle Eastern | |-------|---------|---------------|----------------| | **White** | Purity, weddings | Mourning, death | Purity, peace | | **Red** | Danger, urgency, love | Luck, prosperity | Danger, caution | | **Green** | Nature, growth | Youth, fertility | Islam, paradise | | **Yellow** | Happiness, warning | Courage, royalty (Japan) | Happiness | | **Black** | Sophistication, mourning | Power, health (China) | Mystery, evil | | **Blue** | Trust, calm | Immortality (China) | Protection | **Implication:** Always research color meanings in every target market. Be prepared to adapt. --- ## Accessibility requirements ### WCAG contrast ratios | Standard | Ratio | Use Case | |----------|-------|----------| | **AA (minimum)** | 4.5:1 | Normal text | | **AA (minimum)** | 3:1 | Large text (18pt+) | | **AAA (enhanced)** | 7:1 | Normal text | | **AAA (enhanced)** | 4.5:1 | Large text | ### Colorblindness considerations - ~5% of population has some form of colorblindness - Test with Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind) - **Color should never be the only indicator**. Always pair with icons, text, or patterns ### Testing tools - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - [Adobe Color](https://color.adobe.com): has accessibility tools - [Coolors](https://coolors.co): has contrast checker --- ## Common mistakes | Mistake | Why It Fails | Instead | |---------|--------------|---------| | **Using 6+ colors** | Dilutes recognition, impossible to maintain | Limit to 3-5 with clear hierarchy | | **Copying competitors** | Blend in instead of standing out | Audit competitors, find strategic gaps | | **Ignoring accessibility** | Excludes ~5% of users (colorblindness) | Test contrast, never rely on color alone | | **Chasing trends** | Trends age quickly; rebrand in 2-3 years | Choose timeless colors aligned with values | | **Prioritizing personal preference** | Founder preferences ≠ audience psychology | Research audience, let data inform decisions | | **Cultural color blindness** | Western meanings ≠ global meanings | Research target markets, adapt as needed | | **Inconsistent application** | Erodes recognition, looks unprofessional | Document HEX, RGB, CMYK, Pantone specs | --- ## Key mental models ### Recognition compounds over time Coca-Cola's red wasn't special initially. Decades of consistent use made it iconic. Consistency builds recognition. ### Saturation and brightness matter - Bright, saturated = energetic, youthful - Muted, desaturated = sophisticated, mature - Hue is only part of the equation ### Simplicity scales Complex palettes work in controlled environments but break in real-world application. The simpler your palette, the more consistently it will be applied. ### The 90-Second Rule People form product judgments within 90 seconds, and 62-90% of that assessment is color-based. Color is the first impression. --- ## Templates Read [reference/templates.md](reference/templates.md) when producing a deliverable the user will keep, such as a filled worksheet, a documented decision, or a final write-up. Skip it for conceptual questions and quick recommendations, which this file covers. It opens with a table of contents, so load only the template needed: - Color palette documentation template (complete output structure) - Competitor color audit template - Accessibility testing checklist - Color psychology rationale template --- ## When to apply this knowledge ### During strategy phase - Apply Archetype Color Framework based on brand personality - Consider Appropriateness Principle for industry fit - Apply Color-in-Context Theory for specific applications ### During competitive analysis - Use Blue Ocean Color Strategy process - Identify dominant colors and white space - Find differentiation opportunities ### During palette development - Apply Color Harmony Systems for secondary colors - Use 60-30-10 Rule for distribution - Specify in all four systems (HEX, RGB, CMYK, Pantone) ### During validation - Test WCAG contrast ratios - Simulate colorblindness - Check cultural implications for target markets - Verify against the common mistakes checklist --- ## Key principles 1. **Appropriateness over preference**: Color must "fit" the brand context 2. **Context determines meaning**: Same color, different responses 3. **Differentiation creates value**: Blue Ocean thinking for color 4. **Consistency builds recognition**: Recognition compounds over time 5. **Simplicity scales**: 3-5 colors maximum 6. **Accessibility is non-negotiable**: WCAG compliance required 7. **Culture matters**: Research target markets 8. **Specify completely**: All four color systems
© mike-coulbourn · MIT · mike-coulbourn/claude-vibes