color-palette

色彩方案创建

概述

这项技能可帮助你为 UI 和网页设计创建独特且易于访问的色彩方案，让设计脱颖而出，不落入 AI 生成设计的俗套。它提供色彩理论指导、精选的领域专属示例、无障碍验证工具，以及避免常见过度使用模式的策略。

何时使用此技能

在以下情况下使用此技能：

• 为网站、应用或数字界面设计色彩方案
• 用户需要特定领域或行业的配色方案
• 构建设计系统或样式指南
• 确保符合无障碍标准（WCAG AA/AAA）
• 摆脱千篇一律的“AI 风”设计
• 需要验证现有配色选择

工作流

第 1 步：了解背景和需求

在选择或生成颜色之前，先收集必要的背景信息：

领域/行业问题：

• 这是面向哪个行业或领域？（科技/SaaS、电商、医疗保健、金融、创意、食品等）
• 配色方案应传达哪些情绪或联想？
• 是否有可沿用或扩展的现有品牌颜色？

技术需求：

• 浅色模式、深色模式，还是两者都需要？
• 无障碍要求是什么？（至少达到 WCAG AA，最好达到 AAA）
• 需要多少种颜色？（通常包括：1-2 种主色、1-2 种次要色、1-2 种强调色、完整的中性色阶和语义色）

差异化目标：

• 是否应避免看起来像“AI 生成”的设计？
• 有没有需要避免的特定颜色或组合？
• 偏好暖色调还是冷色调？

第 2 步：选择基础方法

根据背景选择以下方法之一：

方法 A：领域专属精选配色方案

适用情况： 行业/领域明确，希望使用经过验证的有效组合

流程：

1. 阅读 references/color-palette-ui-design-reference.md，重点查看相关领域部分
2. 提供该领域的 2-3 种配色方案
3. 说明每种方案的有效之处
4. 根据需要调整选定的配色方案

示例领域：

• 科技/SaaS：信任与稳定、现代简约、专业仪表板、深色模式
• 电商：时尚、美妆、运动、家居、奢华
• 医疗保健：沉稳专业、舒缓类应用、心理健康/身心健康
• 金融：传统银行、现代金融科技、投资平台
• 创意/作品集：大胆现代、极简、艺术风格、开发者作品集
• 食品/餐饮：温暖诱人、配送应用、有机、高端

方法 B：根据品牌色生成配色方案

适用情况： 以现有品牌色为基础，需要构建完整的色彩系统

流程：

1. 使用 scripts/generate_palette.py 创建色阶：

   python scripts/generate_palette.py #3B82F6 scale
   

2. 使用色彩理论生成和谐的颜色：

   python scripts/generate_palette.py #3B82F6 complementary
   python scripts/generate_palette.py #3B82F6 triadic
   python scripts/generate_palette.py #3B82F6 analogous
   

3. 验证对比度（第 3 步）
4. 应用 60-30-10 法则（参见参考文档）

方法 C：根据灵感创建自定义配色方案

适用情况： 需要独特鲜明的配色方案，且有具体的灵感来源

流程：

1. 如果用户提供了灵感来源（图像、艺术作品、地点），从中提取颜色
2. 查看参考资料中的“常见 AI 设计陷阱”部分，避免千篇一律的模式
3. 应用参考文档中的色彩和谐原则
4. 使用“反 AI 检查清单”确保设计独特
5. 验证无障碍性（第 3 步）

第 3 步：验证无障碍性

务必使用对比度检查脚本验证对比度：

python scripts/check_contrast.py <foreground> <background> <text-size>

示例：

# Check normal text on background
python scripts/check_contrast.py #1A1A1A #FFFFFF normal

# Check large text (headings)
python scripts/check_contrast.py #4A4A4A #FFFFFF large

# Check button contrast
python scripts/check_contrast.py #FFFFFF #3B82F6 normal

要求：

• 普通文本：最低 4.5:1（AA），推荐 7:1（AAA）
• 大号文本（18pt+）：最低 3:1（AA），推荐 4.5:1（AAA）
• UI 组件（按钮、边框、图标）：最低 3:1

如果验证未通过：

• 加深前景色
• 提亮背景色
• 使用配色方案生成器创建更深/更浅的色阶
• 考虑其他颜色组合

第 4 步：构建完整的色彩系统

遵循设计系统最佳实践组织配色方案：

主色

• 品牌主要识别色（1-2 种）
• 完整色阶（50-950 阶）
• 用途：Logo、主按钮、激活状态

次要颜色

• 辅助品牌颜色（1-3 种颜色）
• 根据用途使用完整或部分色阶
• 用于：次要按钮、图标、不太突出的功能

强调色

• 用于吸引注意力的颜色（1-2 种颜色）
• 应用 60-30-10 规则：仅用于设计中 10% 的部分
• 用于：CTA、重点内容、徽章、通知

中性色

• 用于构建结构的灰色/中性色
• 必须提供完整色阶（50-950）
• 用于：文本、背景、边框、禁用状态

语义/功能颜色

• 成功：绿色色调
• 错误：红色色调
• 警告：黄色/橙色色调
• 信息：蓝色色调

命名规范：

Primitive tokens: blue-500, gray-100, red-700
Semantic tokens: background-surface-primary, text-body, button-primary-background

步骤 5：避免 AI 设计误区

定稿前，请根据参考文档中的反 AI 检查清单进行检查：

关键检查项：

• 不使用白底紫/蓝渐变（除非符合品牌风格）
• 不使用橙色与青绿色的组合
• 不在各处使用高饱和度渐变
• 包含符合具体场景的颜色（而非通用颜色）
• 有真实世界的灵感来源
• 体现具体的品牌故事或领域特征
• 使用独特色调，而非默认值

如果出现任何警示信号，请采用以下方式修改：

• 使用自然风格的渐变，而非紫蓝渐变
• 在深色背景上使用柔和的强调色，而非霓虹色
• 使用意想不到但仍然协调的颜色组合
• 参考精选调色板中的行业专属配色

步骤 6：展示调色板

清晰地排版最终调色板：

Primary Color - [Name] (#HEX)
├─ 50:  #XXXXXX
├─ 100: #XXXXXX
├─ ...
└─ 950: #XXXXXX

Secondary Color - [Name] (#HEX)
[Similar structure]

Accent Color - [Name] (#HEX)
[Similar structure]

Neutral Colors - Gray (#HEX)
[Full scale]

Semantic Colors:
├─ Success: #XXXXXX (contrast: X.X:1)
├─ Error:   #XXXXXX (contrast: X.X:1)
├─ Warning: #XXXXXX (contrast: X.X:1)
└─ Info:    #XXXXXX (contrast: X.X:1)

请包含：

• 颜色名称和十六进制值
• 关键组合的对比度
• 用途指南（每种颜色的用途）
• 此调色板适合该领域的原因
• 此调色板避免通用 AI 风格的方式

快速参考

色彩理论配色关系

互补色：色轮上相对的颜色（高对比度、张力最大） 类似色：相邻颜色（和谐、平顺、低对比度） 三角色：在色轮上间隔相等的三种颜色（鲜明、均衡） 分裂互补色：基色 + 与其互补色相邻的两种颜色（高对比度、张力较小）

如需详细说明，请参阅 references/color-palette-ui-design-reference.md → 色彩理论基础

60-30-10 规则

60% - 主色（背景、主要表面） 30% - 次要颜色（卡片、次要表面） 10% - 强调色（CTA、重点内容、视觉焦点）

需要避免的常见误区

1. 紫/蓝渐变 - 最常见的 AI 设计模式
2. 橙色与青绿色 - 一眼就能看出是 AI 生成的
3. 到处使用高饱和度颜色 - 缺少视觉留白
4. 通用语义颜色 - 使用缺乏独特性的标准蓝/绿/红
5. 模板化思维 - 未考虑具体场景

资源

scripts/check_contrast.py - 验证 WCAG 对比度 scripts/generate_palette.py - 生成色阶和配色关系 references/color-palette-ui-design-reference.md - 综合指南，包含：

• 色彩理论基础
• 色彩心理学
• 按领域分类的 60 多个精选调色板示例
• 设计系统方法（Material Design、Tailwind、Ant Design）
• 无障碍指南
• 反 AI 设计策略

示例

示例 1：科技 SaaS 仪表盘

用户请求：“为 B2B SaaS 分析仪表盘创建专业的调色板”

流程：

1. 阅读参考资料中的科技/SaaS 部分
2. 选择“专业 SaaS 仪表盘”调色板作为基础
3. 验证对比度
4. 使用生成器扩展为完整色阶

输出：

Primary: Professional Blue (#0072BB)
├─ Use for: Primary actions, active states, links
└─ Contrast validated: 4.6:1 on white background ✓

Secondary: Dark Navy (#28324E)
├─ Use for: Headers, important text, secondary buttons
└─ Contrast validated: 12.4:1 on white background ✓

Success: Soft Green (#77D38C)
Warning: Amber (#F0AD4E)
Error: Muted Red (#C1666B)

Neutral: Blue-Gray scale (#B5BDD7 to #28324E)

Why this works:
- Calm blue conveys trust and professionalism
- Muted semantic colors don't overwhelm data visualizations
- Full blue-gray neutral scale maintains cohesive color temperature
- Avoids purple-gradient cliche while staying professional

示例 2：电子商务时尚网站

用户请求：“我需要为可持续时尚电商网站设计温暖、大地色系的配色”

流程：

1. 阅读参考资料中的电子商务 → 时尚与服饰部分
2. 选择大地色系调色板，并针对可持续发展主题进行调整
3. 验证所有关键颜色组合

输出：

Primary: Dark Teal (#264653)
├─ Evokes nature, sustainability, calm
└─ Use for: Navigation, primary buttons

Secondary: Living Teal (#2A9D8F)
├─ Fresh, natural, growth
└─ Use for: Highlights, hover states

Accent 1: Terracotta (#E76F51)
├─ Warm, earthy, organic
└─ Use for: CTAs, sale badges

Accent 2: Gold (#E9C46A)
└─ Use for: Premium products, special offers

Why this avoids AI-generic:
- Uses earthy tones instead of bright tech colors
- Warm accents on cool base (intentional temperature mixing)
- Terracotta is distinctive, not overused
- Reflects real sustainable fashion brand aesthetics

示例 3：深色模式应用

用户请求：“为创意工具应用设计深色模式配色，想避免千篇一律的暗色霓虹风格”

流程：

1. 查看“深色模式 SaaS”和“常见 AI 陷阱”部分
2. 选择柔和的强调色，而非全霓虹色
3. 生成自定义色阶
4. 验证所有对比度

输出：

Background: Very Dark Navy (#0A0E27)
Surface: Dark Blue-Gray (#1E2749)

Primary: Vibrant Blue (#4A9EFF)
├─ Bright enough for contrast, not neon
└─ Contrast: 8.2:1 on background ✓

Secondary: Lavender Indigo (#8B7FE8)
├─ Creative, sophisticated
└─ Contrast: 7.1:1 on background ✓

Text: Off-White (#E8EAF6)
└─ Contrast: 13.2:1 on background ✓

Why this works:
- Deep, rich backgrounds (not pure black)
- Accents are vibrant but not harsh neon
- Lavender adds creativity without purple-gradient cliche
- Excellent contrast without eye strain

成功秘诀

1. 始终从上下文入手 - 先了解领域、受众和目的，不要一上来就选颜色
2. 多参考现有方案 - 精选配色已在真实产品中验证
3. 尽早并经常验证 - 构建过程中就检查对比度，不要等到最后
4. 打造鲜明特色 - 主动避免最常见的 AI 风格
5. 讲述品牌故事 - 每种颜色的选择都应与品牌叙事或领域相关
6. 考虑完整的系统 - 不要只考虑主色，还要考虑完整的色阶和语义色
7. 结合实际场景测试 - 屏幕不同、光照不同、周围内容不同，颜色看起来也会不同

高级用法

根据图片创建调色板

如果用户提供图片作为灵感：

1. 手动识别 2-3 种主色，或描述配色方案
2. 提取十六进制颜色值，或估算颜色值
3. 将这些颜色作为生成调色板的基础色
4. 运用色彩理论创建和谐的扩展配色
5. 验证并优化配色，确保无障碍访问

多品牌颜色系统

对于拥有多个品牌或主题的产品：

1. 建立各主题共用的中性色阶
2. 为每个品牌创建独特的主色
3. 确保所有主题都符合相同的无障碍标准
4. 使用语义化令牌命名，便于切换主题
5. 记录各品牌变体的适用场景

无障碍优先方案

对于要求符合 AAA 标准的产品：

1. 从对比度要求入手（普通文本为 7:1）
2. 反向推导出符合要求的颜色组合
3. 使用比常见方案更深或更浅的色调
4. 使用色盲模拟器进行测试
5. 提供高对比度模式选项

常见问题

问：如何在不牺牲易用性的前提下，让调色板独具特色？ 答：使用标准语义色的独特色调。成功状态用绿色是常见做法，但可以结合恰当的文化或领域背景，选用独特的绿色。

问：调色板生成器生成的颜色与我的品牌不匹配，该怎么办？ 答：生成器会创建数学上均匀的色阶。你可以在保留其他色阶的同时手动调整特定色阶，也可以将生成结果作为起点，再手动优化。

问：完整的调色板应该包含多少种颜色？ 答：最低配置：1 种主色（含色阶）、1 种中性色（含色阶）、4 种语义色。典型配置：1-2 种主色、1-2 种次要色、1-2 种强调色、1 种中性色（均含色阶）、4 种语义色。复杂配置：多种主色、丰富的语义色和专用色阶。

问：如果用户坚持要紫色渐变，该怎么办？ 答：如果紫色渐变确实是其品牌特色，就让它更具辨识度：使用独特的紫色色调、出人意料的渐变组合，或搭配意想不到的强调色。避免使用默认的 #6366F1 → #8B5CF6 → 白色搭配。