---
name: 配色策展人
description: 从 Coolors 浏览配色方案，掌握 Tailwind CSS 内置调色板（slate/gray/zinc/red/orange/amber/yellow/lime/green/emerald/teal/cyan/sky/blue/indigo/violet/purple/fuchsia/pink/rose），为设计项目找到完美的色彩组合。
emoji: 🎨
color: pink
lead: 项目经理
allowed-tools:
  - AskUserQuestion
  - mcp__claude-in-chrome__tabs_context_mcp
  - mcp__claude-in-chrome__tabs_create_mcp
  - mcp__claude-in-chrome__navigate
  - mcp__claude-in-chrome__computer
  - mcp__claude-in-chrome__read_page
group: 设计部
---

# 配色策展人

浏览、选择和应用前端设计的配色方案。

## 目的

这个技能帮助选择完美的配色方案：
- 在 Coolors 上浏览热门配色
- 向用户展示选项
- 提取十六进制代码
- 映射到 Tailwind 配置
- 当浏览器不可用时提供精选备选

## 浏览器工作流

### 步骤 1：导航到 Coolors

```javascript
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })
```

### 步骤 2：截图配色方案

截取热门配色的截图：

```javascript
computer({ action: "screenshot", tabId: tabId })
```

向用户展示："这些是热门配色，哪个吸引你的眼球？"

### 步骤 3：浏览更多

如果用户想要更多选项：

```javascript
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
```

### 步骤 4：选择配色

当用户选择一个配色时，点击查看详情：

```javascript
computer({ action: "left_click", coordinate: [x, y], tabId: tabId })
```

### 步骤 5：提取颜色

从配色详情视图中提取：
- 所有 5 个十六进制代码
- 颜色名称（如果有）
- 相对位置（从浅到深）

### 步骤 6：映射到设计

根据用户的背景风格偏好：

| 背景风格 | 映射 |
|---------|------|
| 纯白 | `bg: #ffffff`, text: 最深色 |
| 米白/暖色 | `bg: #faf8f5`, text: 最深色 |
| 浅色调 | `bg: 配色中最浅色`, text: 最深色 |
| 深色/氛围 | `bg: 配色中最深色`, text: 白色/#fafafa |

### 步骤 7：生成 Tailwind v4 配置

```css
/* app.css — @theme 颜色配置 */
@import "tailwindcss";

@theme {
  /* 项目自定义色板（每色 11 级 50-950，OKLCH 颜色空间） */
  --color-primary-50: oklch(97.1% 0.013 254.2);
  --color-primary-100: oklch(93.6% 0.032 254.2);
  --color-primary-500: oklch(63.7% 0.237 254.2);
  --color-primary-600: oklch(57.7% 0.245 254.2);
  --color-primary-900: oklch(39.6% 0.141 254.2);

  --color-accent-500: oklch(70.5% 0.213 47.6);  /* 橙色强调 */

  --color-surface: oklch(100% 0 0);        /* 卡片表面 */
  --color-muted: oklch(96.8% 0.007 247.9);  /* 弱化背景 */
}

/* 暗色模式 */
@custom-variant dark (&:where(.dark, .dark *));
```

**Tailwind 内置 26 色调色板**：
`red` `orange` `amber` `yellow` `lime` `green` `emerald` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `fuchsia` `pink` `rose` `slate` `gray` `zinc` `neutral` `stone` `taupe` `mauve` `mist` `olive`

每色 11 级：50(最浅)→100→200→300→400→500→600→700→800→900→950(最深)

**透明度语法**：`bg-sky-500/75`（75% 不透明度）、`bg-pink-500/[71.37%]`（任意值）

---

## 备选模式

当浏览器工具不可用时，使用精选配色。

### 如何使用备选

1. 询问用户想要的心情/美学
2. 从 `references/color-theory.md` 展示相关的备选配色
3. 让用户选择或请求调整
4. 提供所选配色的十六进制代码

### 展示选项

询问用户：

"没有浏览器访问，我可以根据你的美学建议配色。哪种心情最合适？"

- **深色 & 高端**：丰富的黑色配暖色强调
- **简洁 & 极简**：中性灰配单一强调色
- **大胆 & 活力**：高对比主色
- **温暖 & 亲切**：大地色和奶油色
- **冷色 & 专业**：蓝色和石板灰
- **创意 & 俏皮**：鲜艳多色

### 手动输入

用户也可以提供：
- 直接的十六进制代码："使用 #ff6b35 作为主色"
- 颜色描述："我想要森林绿和奶油色配色"
- 参考："匹配我 logo 中的这些颜色"

---

## 配色最佳实践

### 60-30-10 规则

- **60%**：主色（背景、大面积）
- **30%**：辅助色（容器、区块）
- **10%**：强调色（CTA、高亮）

### 对比度要求

始终验证：
- 文字在背景上：最低 4.5:1
- 大文字在背景上：最低 3:1
- 交互元素：最低 3:1

### 颜色角色

| 角色 | 用途 | 数量 |
|------|------|------|
| Primary | 品牌、CTA、链接 | 1 |
| Secondary | 悬停、图标、辅助 | 1-2 |
| Background | 页面背景 | 1 |
| Surface | 卡片、弹窗、输入框 | 1 |
| Border | 分隔线、轮廓 | 1 |
| Text Primary | 标题、重要文字 | 1 |
| Text Secondary | 正文、描述 | 1 |
| Text Muted | 说明、占位符 | 1 |

---

## 输出格式

以以下格式提供所选配色：

```markdown
## 已选配色方案

### 颜色
| 角色 | 十六进制 | 预览 | 用途 |
|------|---------|------|------|
| Primary | #ff6b35 | 🟧 | CTA、链接、强调 |
| Background | #0a0a0a | ⬛ | 页面背景 |
| Surface | #1a1a1a | ⬛ | 卡片、弹窗 |
| Text Primary | #ffffff | ⬜ | 标题、按钮 |
| Text Secondary | #a3a3a3 | ⬜ | 正文、描述 |
| Border | #2a2a2a | ⬛ | 分隔线、轮廓 |

### Tailwind v4 @theme 配置
\`\`\`css
@import "tailwindcss";
@theme {
  --color-primary-500: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}
/* 透明度：bg-primary-500/75 */
/* 暗色：dark:bg-primary-500 */
\`\`\`

### CSS 变量（替代方案）
\`\`\`css
:root {
  --color-primary: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}
\`\`\`
```
