К основному содержанию
скилл CX Codex

brand-color-psychology — скилл для Claude Code: суть и установка

Справочник по подбору палитры с учётом психологии восприятия, контрастности и архетипов. Помогает назначить роли оттенкам и отстроиться от конкурентов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add mike-coulbourn/claude-vibes --skill brand-color-psychology -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/brand-color-psychology/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/brand-color-psychology/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
brand-visual-generator kostja94 Скилл помогает задать или проверить визуальную айдентику: шрифты, палитру, отступы, дизайн-токены и эстетику фронтенда. CX Codex +1 1 400установок generate-ui-from-brand dembrandt Превращает URL сайта или файл DESIGN.md в дизайн-токены, решения по UX и готовую спецификацию интерфейса. CX Codex +1 870установок color-palette jezweb Скилл строит полную цветовую систему из одного брендового hex: 11 оттенков, семантические токены, тёмная тема и проверка контраста по WCAG. CX Codex +1 3 200установок color-palette-extractor OneWave-AI Достаёт доминирующие цвета из картинки, скриншота или сайта и собирает из них палитру с проверкой контраста. Пригодится, когда нужна тема под логотип или чужой макет. CX Codex +1 609установок color-accessibility aj-geddes Помогает создавать палитры с учётом дальтонизма и требований WCAG AA и AAA. Пригодится при оформлении интерфейсов, графиков и валидации форм. CX Codex +1 619установок brand-identity arnabbagxd Скилл превращает стратегию компании в чёткий бриф для дизайнера. Помогает задать палитру с hex-кодами, шрифтовые пары и правила оформления. CX Codex +1 2 100установок

Из того же набора3

Спонсоры проекта

Компании, которые помогают держать аналитику открытой