色彩理论与配色

要解决的问题

配色方案落地时常见的三个坑：选色凭感觉、缺少心理学依据，方案在评审时站不住脚；只看美观忽略对比度，上线后被无障碍审计打回；暗色模式直接反相，品牌色严重失真。这个技能针对这三类问题给出系统化处理方式。

核心能力

• 色彩心理学推导：将品牌关键词映射为色彩建议（蓝=信任/金融，绿=自然/健康，橙=活力/电商），输出 HEX 与 HSL 双格式
• 比例分配：按 60-30-10 法则 组织主色、辅色与强调色；中性色用 HSL 统一色温偏移法生成，避免灰阶冷暖不一致
• 无障碍校验：计算前景/背景对比度，标注 WCAG AA（4.5:1）/ AAA（7:1），不达标时提供替换方案
• 暗色模式适配：主色饱和度降低 15–30%，背景从纯黑改为深灰 #121212

工作流

技能分五步执行：

1. 场景收资：确认介质（屏幕/印刷）、受众、品牌调性与既定色约束
2. 主色推导：基于关键词给出色彩心理学映射与主色 HEX/HSL
3. 辅色与中性色：按比例分配并生成色温统一的中性色阶
4. 无障碍校验：输出对比度报告并标注达标等级
5. 暗色模式适配：调整饱和度与背景，确保明暗两套方案都可用

适用边界

• 适用：品牌色板确立、UI 主辅色选择、前端对比度校验、暗色模式适配
• 不适用：印刷专色与潘通色卡的精确匹配——需要实物校色，超出理论推导范围

最终输出工件 ColorPalette 包含色值、使用场景标注与对比度报告，可导出为 design token 供下游设计工具衔接。