关于 color-theory
Color Theory 是用于创建和审查配色系统、调色板、对比度、语义色和深色模式的设计技能。它结合无障碍、一致性与设计令牌的实用规则。
主要功能
- 01构建系统化调色板
- 02检查文本与界面对比度
- 03定义语义颜色角色
- 04设计独立的深色模式配色
- 05使用设计令牌组织颜色
适用场景
- 01为新产品创建配色系统
- 02审查对比度与颜色无障碍性
- 03规划语义色和深色模式
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/color-theory确认已加载。
附带文件references/patterns.md
详细介绍
色彩理论
系统化的色彩设计——从策略性选色到无障碍深色模式。
范围
适用场景：定义配色方案、构建调色板、检查对比度、设计深色模式、建立语义色彩、创建颜色设计令牌，或审查现有色彩概念的质量。
原则
1. 色彩是传达信息的方式——而非装饰
每种颜色都传递着一种信息。色彩选择是一项策略性决策。
2. 色彩越少，效果越强
95% 的项目只需 2-4 种颜色就足够。主色 + 强调色 + 中性色调。
3. 对比度必不可少
对比度不足，颜色就无法发挥作用。对比度决定了可读性、层级和无障碍性。
4. 所有渠道保持一致
颜色在所有地方都必须相同。这需要建立包含命名令牌的色彩系统。
5. 色彩服务于功能，而不只是氛围
颜色用于指示状态（红色 = 错误，绿色 = 成功）、表示可交互元素，以及标示关联关系。
规则
构建配色方案
- DO：采用极简方案：1 种主色 + 1 种强调色 + 3-5 种中性色调。
- DO：为每种颜色创建 9-11 个阶度（50-950）。
- DO：定义语义色彩：
success（绿色）、warning（橙色）、error（红色）、info（蓝色）。 - DO：以色彩和谐关系为起点：互补色、类似色或三角色。
- DON'T：随机选择颜色。每种颜色都需要有依据（品牌、功能、情感）。
- DON'T：使用超过 5 种彩色（不包括中性色调）。
色彩模型与格式
- DO：在内部使用 HSL（更便于系统化地创建阶度）。
- DO：在现代 CSS 中使用
oklch()，以创建感知上均匀的阶度。 - DON'T：在网页中使用 CMYK。CMYK 用于印刷。
对比度与可读性
- DO：正文（< 24px）：至少 4.5:1（WCAG AA）。
- DO：大号文本（>= 24px / >= 18.66px 粗体）：至少 3:1（WCAG AA）。
- DO：UI 组件（图标、边框、焦点）：至少 3:1。
- DO：模拟并测试色觉缺陷情况（红色盲、绿色盲、蓝黄色盲）。
- DON'T：不要只用颜色作为区分方式。始终提供第二种信号（图标、文本、形状）。
- DON'T：不要在白色背景上用浅淡的柔和色调呈现文本或可交互元素。
色彩心理与影响
- DO：选择与行业相符的主色：
- 蓝色：信任（金融、科技、医疗保健）
- 绿色：自然、成长（有机、可持续发展）
- 红色：活力、紧迫感（食品、销售）
- 黑色：高端（奢侈品、时尚）
- 橙色/黄色：乐观（初创企业、教育）
- 紫色：创造力（创意产业、健康养生）
- DO：为国际项目考虑文化差异。
- DON'T：除非有明确的差异化策略，否则不要违背行业惯例。
深色模式
- DO：将深色模式设计为独立的配色方案，而不是简单反转颜色。
- DO：使用柔和的主色（降低饱和度，保持中等亮度）。
- DO：背景：深灰色（#121212 至 #1E1E1E），不要用纯黑色（#000）。
- DO：文本：使用 #E0E0E0，而不是 #FFFFFF。
- DON'T：不要在深色背景上使用高饱和度的亮色——这些颜色会“发光”。
设计令牌
- DO：采用双层系统：原始令牌（
--blue-500）+ 语义令牌（--color-primary）。 - DO：组件中只使用语义令牌。
- DON'T：不要在组件 CSS 中直接使用 HEX 值。
模式
详细的模式说明：参见 references/patterns.md
60-30-10 法则
60% 主导色（背景）+ 30% 次要色（卡片、导航）+ 10% 强调色（CTA、重点内容）。
单色方案
一种颜色的 5-7 个阶度。通过单一对比色为 CTA 添加强调。
互补对比
两种相对的颜色。两者的占比切勿相同——其中一种应占主导地位（60-30-10）。
语义颜色编码
绿色 = 成功，红色 = 错误，橙色 = 警告，蓝色 = 信息。这些对应关系已在不同文化中确立，不能重新解读。
反模式
彩虹式设计
使用过多颜色，且没有系统。解决方案：遵循 60-30-10 法则。最多使用 5 种彩色。
仅以颜色传达信号
只用红色表示错误，没有图标或文本。解决方案：始终在颜色之外提供冗余信号。
盲目采用流行色
不考虑是否适合，就将流行色用作主色。解决方案：从趋势中汲取灵感，以品牌价值作为决策依据。
忽视对比度问题
用“我觉得看起来没问题”代替客观验证。解决方案：使用工具（WebAIM、Chrome DevTools）检查每种颜色组合。
将深色模式视为简单反转
直接互换黑色和白色。解决方案：创建独立配色方案，并调整饱和度和亮度。
检查清单
- 是否定义了配色方案：主色 + 强调色 + 中性色 + 语义色？
- 彩色是否最多 5 种？
- 是否遵循 60-30-10 法则？
- 所有文字与背景的组合是否符合 WCAG AA（普通文字为 4.5:1，大号文字为 3:1）？
- UI 组件的对比度是否至少为 3:1？
- 是否测试了色觉缺陷？
- 是否从未仅用颜色传达信号？
- 是否定义了设计令牌（基础 + 语义）？
- 组件中是否没有直接使用 HEX 值？
- 深色模式是否采用独立配色方案？
- 深色模式背景是否为 #121212-#1E1E1E（而非 #000）？
- 色彩心理学是否适合该行业？
交叉引用
ui-design-- 在布局中将颜色用作层级工具web-typography-- 文字颜色与对比度比例accessibility-- WCAG 对比度要求详解branding-identity-- 将颜色作为品牌标识visual-direction-- 当前色彩趋势design-trends-- 获奖网站的色彩趋势