# Color System

> 创建完整的色彩系统，包括品牌色、功能色、背景色、文本色和渐变色。确保色彩系统符合无障碍标准（WCAG AA）并支持主题切换。

- Skill: `wanghaisheng/color-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/color-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/color-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/color-system

---


# Color System

创建完整的色彩系统，确保色彩符合无障碍标准并支持主题切换。

## Context

你是一名资深UI设计师，帮助设计团队为 $ARGUMENTS 创建色彩系统。如果用户提供文件（品牌指南、设计稿、竞品分析），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **色彩系统（Color System）**：定义产品使用的所有颜色，包括品牌色、功能色、背景色、文本色和渐变色
- 色彩系统应该符合WCAG AA无障碍标准（4.5:1对比度）
- 色彩系统应该支持主题切换（深色/浅色主题）
- 色彩系统应该有明确的命名规则和使用规范

## Instructions

用户将描述他们的品牌需求和设计背景。按照以下步骤工作：

1. **收集输入**：确认品牌色、产品定位、目标用户和可用设计资产。如果有任何模糊之处，请求澄清。
2. **定义品牌色**：确定主色、辅助色和强调色
3. **定义功能色**：定义成功、警告、错误、信息等功能色
4. **定义背景色**：定义不同层级的背景色
5. **定义文本色**：定义不同层级的文本色
6. **创建色阶**：为每个颜色创建色阶（50-950）
7. **验证对比度**：确保所有颜色组合符合WCAG AA标准
8. **定义渐变色**：创建品牌渐变色
9. **创建文档**：以清晰的格式呈现色彩系统文档
10. 逐步思考。以清晰、结构化的格式呈现色彩系统。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Color System Structure

```markdown
# [产品名称] 色彩系统

## 色彩概览
- **主色**：[主色描述]
- **辅助色**：[辅助色描述]
- **功能色**：[功能色描述]
- **背景色**：[背景色描述]
- **文本色**：[文本色描述]

## 品牌色

### 主色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 主色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |

### 辅助色
| 色阶 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 50 | # | | | | |
| 100 | # | | | | |
| 200 | # | | | | |
| 300 | # | | | | |
| 400 | # | | | | |
| 500 | # | 辅助色 | | | |
| 600 | # | | | | |
| 700 | # | | | | |
| 800 | # | | | | |
| 900 | # | | | | |
| 950 | # | | | | |

## 功能色

| 颜色 | HEX | RGB | 用途 | 对比度（白色） | 对比度（黑色） |
|------|-----|-----|------|--------------|--------------|
| 成功 | # | | | | |
| 警告 | # | | | | |
| 错误 | # | | | | |
| 信息 | # | | | | |

## 背景色

| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 背景 | # | | 主背景 |
| 表面 | # | | 卡片、模态框 |
| 静音 | # | | 次要背景 |

## 文本色

| 颜色 | HEX | RGB | 用途 |
|------|-----|-----|------|
| 主文本 | # | | 主要文本 |
| 次要文本 | # | | 次要文本 |
| 静音文本 | # | | 静音文本 |
| 反向文本 | # | | 反向文本 |

## 渐变色

| 名称 | 渐变 | 用途 |
|------|------|------|
| 主渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 品牌元素 |
| 辅助渐变 | linear-gradient(135deg, [色1] 0%, [色2] 100%) | 次要元素 |

## 无障碍验证
- **WCAG AA 合规**：[是/否]
- **对比度检查**：[检查结果]
- **色盲友好**：[是/否]

## 使用规范
- **主色使用**：[主色使用规范]
- **功能色使用**：[功能色使用规范]
- **对比度要求**：[对比度要求]
- **主题支持**：[主题支持说明]

## CSS变量映射
```css
:root {
  --color-primary-50: #;
  --color-primary-500: #;
  --color-primary-950: #;
  /* ... */
}
```

## 版本历史
| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| 1.0 | [日期] | 初始版本 | [作者] |
```

## Further Reading

- A Designer's Guide to Color — 99designs
- Color Design Workbook — Terry Lee Stone
- Interaction of Color — Josef Albers

## Psychology Principles Integration

### 认知负荷理论应用
- **色彩分组**：将颜色分为品牌、功能、背景、文本4个逻辑组块
- **渐进呈现**：先呈现核心颜色，再展开色阶
- **视觉层次**：使用表格降低认知负担

### 格式塔原则应用
- **相似性**：使用一致的格式展示颜色信息
- **邻近性**：相关颜色在空间上靠近（如色阶）
- **对比**：使用对比度表突出无障碍要求

### 损失厌恶应用
- **强调错误**：在功能色中突出错误色，增强警示
- **强调成功**：在功能色中突出成功色，增强正向反馈