color-theory

어떤 스킬인가요?

Color models, palettes, contrast, color psychology, color harmonies, and dark mode for web projects. Defines the 60-30-10 rule, semantic color coding, design tokens, and WCAG contrast requirements.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# Color Theory -- Patterns (Reference)

## 60-30-10 Rule

**When**: Apply to every color scheme.

**Distribution**:
- **60% dominant color**: Background, large areas (usually white/light gray or dark gray in dark mode)
- **30% secondary color**: Cards, sections, navigation, page areas
- **10% accent color**: CTAs, highlights, interactive elements, links

**Benefit**: Creates visual balance and clear hierarchy without explicit rules.

## Monochromatic Scheme

**When**: Minimalist designs, corporate websites, content-focused pages.

**Implementation**:
- One base color in 5-7 brightness levels
- Example blue: #EFF6FF, #BFDBFE, #60A5FA, #3B82F6, #2563EB, #1E40AF, #1E3A8A
- Accent: a single contrasting color only for CTAs and highlights
- Neutral tones (gray scale) for text and structural elements

**Benefit**: Visually calming, content-focused, hard to get wrong.

## Complementary Contrast

**When**: Energetic, eye-catching designs. E-commerce, promotional pages.

**Implementation**:
- Two opposing colors on the color wheel (e.g., blue + orange)
- IMPORTANT: Never use them equally -- observe the 60-30-10 rule
- The dominant color calms, the accent color activates
- For large areas: use a muted variant of the complementary color

## Analogous Scheme

**When**: Harmonious, natural color worlds. Wellness, nature, lifestyle.

**Implementation**:
- 2-3 adjacent colors on the color wheel (e.g., teal + blue + blue-violet)
- Less contrast than complementary -- but more harmonious
- Choose the accent from outside the analogous range

## Triadic Scheme

**When**: Versatile, dynamic designs. Children's brands, creative, education.

**Implementation**:
- 3 evenly spaced colors on the color wheel (120-degree intervals)
- One color dominates, the other two serve as accents
- Align the saturation of all three colors

## Semantic Color Coding

**When**: Dashboards, forms, systems with status indicators.

**Associations** (established cross-culturally, NOT reinterpretable):

| Meaning | Color | HEX Example | Usage |
|---------|-------|-------------|-------|
| Success | Green | #22C55E | Confirmation, completion, positive status |
| Error | Red | #EF4444 | Error message, invalid input, deletion |
| Warning | Orange | #F59E0B | Notice, action needed, attention |
| Information | Blue | #3B82F6 | Hint, tip, neutral notification |

**Rules**:
- Always provide a second signal alongside color (icon, text)
- Do NOT misuse semantic colors as decorative colors
- Signals must remain recognizable for users with color vision deficiency

## Design Tokens -- Two-Tier System

### Primitive Tokens (Raw Values)
```css
:root {
  --blue-50: #EFF6FF;
  --blue-500: #3B82F6;
  --blue-900: #1E3A8A;
  --red-500: #EF4444;
  --green-500: #22C55E;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-900: #111827;
}
```

### Semantic Tokens (Meaning)
```css
:root {
  --color-primary: var(--blue-500);
  --color-primary-light: var(--blue-50);
  --color-error: var(--red-500);
  --color-success: var(--green-500);
  --color-bg-page: var(--gray-50);
  --color-bg-surface: white;
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-500);
}
```

### Dark Mode Tokens
```css
[data-theme="dark"] {
  --color-bg-page: #121212;
  --color-bg-surface: #1E1E1E;
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #A0A0A0;
  --color-primary: var(--blue-400); /* muted */
}
```

Rule: Use EXCLUSIVELY semantic tokens in component CSS. Never reference primitive values directly.

## Dark Mode -- Independent Scheme

**Rules**:
- Background: #121212 to #1E1E1E (NOT pure black #000)
- Text: #E0E0E0 (NOT pure white #FFF)
- Primary colors: reduce saturation, adjust brightness
- Express elevation through lighter gray levels instead of shadows
- Saturated colors on dark backgrounds appear to "glow" -- tone them down
- Check contrasts separately (different ratios than in light mode)

---
name: color-theory
description: Color models, palettes, contrast, color psychology, color harmonies, and dark mode for web projects. Defines the 60-30-10 rule, semantic color coding, design tokens, and WCAG contrast requirements.
---

# Color Theory

> Systematic color design -- from strategic color selection to accessible dark mode.

## Scope

Use this skill when: You are defining color schemes, building palettes, checking contrasts, designing dark mode, establishing semantic colors, creating design tokens for colors, or auditing existing color concepts for quality.

## Principles

### 1. Colors Are Communication -- Not Decoration
Every color conveys a message. Color selection is a strategic decision.

### 2. Fewer Colors -- Stronger Impact
2-4 colors are sufficient for 95% of all projects. Primary color + accent color + neutral tones.

### 3. Contrast Is Mandatory
Without sufficient contrast, colors are ineffective. Contrast determines readability, hierarchy, and accessibility.

### 4. Consistency Across All Channels
Colors must appear identical everywhere. This requires a defined color system with named tokens.

### 5. Color for Function, Not Just Mood
Colors indicate status (red = error, green = success), signal interactivity, and mark relationships.

## Rules

### Building a Color Scheme

- **DO**: Minimal scheme: 1 primary color + 1 accent color + 3-5 neutral tones.
- **DO**: Create gradations of each color in 9-11 steps (50-950).
- **DO**: Define semantic colors: `success` (green), `warning` (orange), `error` (red), `info` (blue).
- **DO**: Use color harmonies as a starting point: complementary, analogous, or triadic.
- **DON'T**: Use randomly chosen colors. Each one needs justification (brand, function, emotion).
- **DON'T**: Use more than 5 chromatic colors (excluding neutral tones).

### Color Models & Formats

- **DO**: Work internally with HSL (more intuitive for systematic gradations).
- **DO**: Use `oklch()` in modern CSS for perceptually uniform gradations.
- **DON'T**: Use CMYK on the web. CMYK is for print.

### Contrast & Readability

- **DO**: Normal text (< 24px): at least **4.5:1** (WCAG AA).
- **DO**: Large text (>= 24px / >= 18.66px bold): at least **3:1** (WCAG AA).
- **DO**: UI components (icons, borders, focus): at least **3:1**.
- **DO**: Simulate and test for color vision deficiency (protanopia, deuteranopia, tritanopia).
- **DON'T**: Use color as the ONLY differentiator. Always provide a second signal (icon, text, shape).
- **DON'T**: Use light pastel tones on white backgrounds for text or interactive elements.

### Color Psychology & Impact

- **DO**: Choose the primary color to match the industry:
  - Blue: Trust (finance, tech, healthcare)
  - Green: Nature, growth (organic, sustainability)
  - Red: Energy, urgency (food, sales)
  - Black: Premium (luxury, fashion)
  - Orange/Yellow: Optimism (startups, education)
  - Purple: Creativity (creative industries, wellness)
- **DO**: Consider cultural differences for international projects.
- **DON'T**: Work against industry expectations without a deliberate differentiation strategy.

### Dark Mode

- **DO**: Design dark mode as an independent color scheme, not an inversion.
- **DO**: Use muted primary colors (less saturation, medium brightness).
- **DO**: Background: dark gray (#121212 to #1E1E1E), NOT pure black (#000).
- **DO**: Text: #E0E0E0 instead of #FFFFFF.
- **DON'T**: Use saturated bright colors on dark backgrounds -- they "glow."

### Design Tokens

- **DO**: Two-tier system: primitive tokens (`--blue-500`) + semantic tokens (`--color-primary`).
- **DO**: Use exclusively semantic tokens in components.
- **DON'T**: Use HEX values directly in component CSS.

## Patterns

Detailed pattern descriptions: see `references/patterns.md`

### 60-30-10 Rule
60% dominant color (background) + 30% secondary (cards, navigation) + 10% accent (CTAs, highlights).

### Monochromatic Scheme
One color in 5-7 gradations. Accent through a single contrasting color for CTAs.

### Complementary Contrast
Two opposing colors. Never equally weighted -- one dominates (60-30-10).

### Semantic Color Coding
Green = success, red = error, orange = warning, blue = information. These associations are established cross-culturally and are NOT reinterpretable.

## Anti-Patterns

### Rainbow Design
Too many colors without a system. **Solution**: 60-30-10 rule. Max. 5 chromatic colors.

### Color as the Only Signal
Red = error without icon or text. **Solution**: Always provide a redundant signal alongside color.

### Blindly Adopting Trend Colors
Trend color as primary without fit. **Solution**: Use trends as inspiration, brand values as the decision basis.

### Ignoring Contrast Violations
"Looks fine to me" instead of objective verification. **Solution**: Check every combination with a tool (WebAIM, Chrome DevTools).

### Dark Mode as Inversion
Swapping black and white. **Solution**: Independent scheme with adjusted saturation and brightness.

## Checklist

- [ ] Color scheme defined: primary + accent + neutrals + semantic?
- [ ] Max. 5 chromatic colors?
- [ ] 60-30-10 rule applied?
- [ ] All text-background combinations WCAG AA (4.5:1 normal, 3:1 large)?
- [ ] UI component contrast at least 3:1?
- [ ] Color vision deficiency tested?
- [ ] Color never used as the only signal?
- [ ] Design tokens defined (primitive + semantic)?
- [ ] No HEX values directly in components?
- [ ] Dark mode as an independent scheme?
- [ ] Dark mode background #121212-#1E1E1E (not #000)?
- [ ] Color psychology appropriate for the industry?

## Cross-References

- `ui-design` -- Color as a hierarchy tool in layout
- `web-typography` -- Text color and contrast ratios
- `accessibility` -- WCAG contrast requirements in detail
- `branding-identity` -- Color as brand identity
- `visual-direction` -- Current color trends
- `design-trends` -- Color trends from award-winning websites