brand-color-psychology — скилл для Claude Code: суть и установка
Справочник по подбору палитры с учётом психологии восприятия, контрастности и архетипов. Помогает назначить роли оттенкам и отстроиться от конкурентов.
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-codeЧто делает brand-color-psychology
Скилл передаёт ассистенту правила формирования фирменных палитр. В основе лежат теория контекста Эллиота и Майера, а также принцип уместности: восприятие тона зависит от среды, поэтому универсальных сочетаний нет. Ассистент учитывает архетипы марки, распределение площадей элементов и классические схемы гармонии вроде триад или аналоговых рядов.
Для практической вёрстки навык фиксирует значения сразу в нескольких форматах: HEX, RGB, CMYK и Pantone. Модель заранее учитывает, что цветовой охват CMYK уже экранного RGB, поэтому полиграфические версии требуют ручной калибровки. В инструкции также разобран метод визуального аудита конкурентов для поиска свободных цветовых ниш.
Какие задачи решает
- подобрать контрастные цвета для интерфейса по стандартам читаемости
- сформировать палитру по архетипу и позиционированию продукта
- найти незанятую цветовую гамму среди прямых конкурентов
- разложить цвета проекта по форматам HEX, RGB и CMYK
Примеры запросов агенту
- Подбери палитру для финансового приложения с акцентом на надёжность в HEX и RGB
- Проверь контрастность кнопок и текста для тёмной темы интерфейса
- Предложи цветовую схему для образовательной платформы с архетипом мудреца
Как установить brand-color-psychology
1Через Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-code2Вручную: положить файлы
~/.claude/skills/brand-color-psychology/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/brand-color-psychology/
1Через Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a codex2Вручную: положить файлы
.agents/skills/brand-color-psychology/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a cursor2Вручную: положить файлы
.cursor/skills/brand-color-psychology/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mike-coulbourn/claude-vibes brand-color-psychology2Вручную: положить файлы
.github/skills/brand-color-psychology/SKILL.md1Через Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a gemini-cli2Командой платформы
gemini skills install https://github.com/mike-coulbourn/claude-vibes --path plugins/vibes/skills/brand-color-psychologyВручную: положить файлы
.devin/skills/brand-color-psychology/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о brand-color-psychology
Как установить brand-color-psychology в Claude Code?
Выполните команду npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-code.
Что делает скилл brand-color-psychology?
Он снабжает ИИ-агента инструкциями по подбору фирменных цветов, расчёту контраста и адаптации оттенков под архетип бренда.
Почему при подготовке макетов важна разница между RGB и CMYK?
Цветовой охват CMYK меньше пространства RGB. Без раздельной фиксации кодов цвета на печати станут блёклыми.
Исходный текст
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