AI色彩推荐引擎：从情感关键词到设计系统色板的自动化之旅

AI色彩推荐引擎：从情感关键词到设计系统色板的自动化之旅

色彩是设计中最感性的维度，也是最难用规则描述的维度。在美院学色彩理论时，老师常说"这个蓝不够温暖"——这种感觉，怎么翻译成代码？如今 LLM 给出了一种可能的答案。

一、从"这个蓝不够温暖"说起：色彩推荐的古老难题

每个设计师都经历过这样的场景：产品经理说"这个颜色感觉不对"，但你问他哪里不对，他说不出来。色彩评审长期处于"只可意会不可言传"的状态，直到 AI 出现。

传统色彩推荐的三大痛点：

AI 介入色彩推荐的核心优势在于：它可以在海量设计案例中学习色彩与情感、场景、品牌的关联关系，并且能以结构化的方式输出完整的设计系统色板。

经过半年的实践，我发现 AI 色彩推荐的最佳使用方式不是"让AI替你决定"，而是"让AI帮你扩展"——你给它一个方向，它帮你算出完整的色板。这种人机协作模式，既保留了设计师的审美判断，又发挥了 AI 的计算优势。

二、情感关键词到HSL坐标：AI理解色彩的语言转换

要让 AI 做色彩推荐，首先要解决一个基础问题：如何把"温暖""专业""活力"这类情感关键词，映射到具体的色彩数值？

HSL 色彩空间：连接情感与数值的桥梁

在 RGB、HEX、HSL、LAB 等色彩空间中，HSL（色相Hue/饱和度Saturation/亮度Lightness）是最接近人类感知模式的，也最适合用 AI 来处理。

情感关键词与 HSL 参数的映射关系（经过多次校准的经验值）：

提示词设计：让LLM输出可计算的色彩参数

关键不是让 LLM 直接输出 HEX 色值，而是让它输出 HSL 参数范围，再用程序生成具体色值。这样可控性更强。

提示词模板：

## 任务
根据以下品牌描述，推荐一套设计系统色彩方案。

## 品牌描述
[在此填入：行业/目标受众/品牌调性关键词/竞品色彩风格]

## 输出要求
1. 对每个情感关键词，给出 HSL 参数范围（不是单一值）
2. 主色：给出3个候选HSL坐标，附带推荐理由
3. 辅助色：基于主色，用色彩理论（互补/三角/分裂互补）计算
4. 中性色：给出灰度阶梯的L值（0%/10%/…/100%）
5. 输出格式：JSON，包含 h/s/l 数值范围

## 色彩理论约束
– 主色与辅助色对比度 ≥ 4.5:1（WCAG AA）
– 主色与白色对比度 ≥ 3:1（WCAG AA 大字号）
– 色板需包含暗色模式适配方案

实战：用GPT-4生成色彩方案的完整提示词

以下是直接可用的完整提示词（替换括号内容即可）：

你是一位色彩系统专家，精通色彩理论、色彩心理学和设计系统构建。

请根据以下信息，为{产品名称}设计一套完整的色彩系统：

【产品信息】
– 行业：{行业，如：金融科技/在线教育/医疗健康}
– 目标用户：{用户画像}
– 品牌调性关键词：{3-5个关键词，如：专业、信任、温暖}
– 主要使用场景：{如：移动端APP/Web dashboard/小程序}
– 竞品色彩参考：{描述竞品用色，或粘贴色值}

【设计要求】
1. 主色1个，辅助色2-3个，中性色1套（9级灰度）
2. 每个颜色需要给出：HEX/HSB/HSL 三种格式
3. 给出色阶梯度（50/100/200/…/900），用于设计系统
4. 标注哪些颜色用于：主按钮/次按钮/链接/成功提示/警告/错误
5. 给出暗色模式下的对应色值

【输出格式】
JSON格式，包含完整的设计系统色板定义，可直接导入 Figma Token Studio。

请先思考：每个调性关键词对应的色彩情感是什么？然后选择合适的色相区间，最后计算出完整色板。

三、从单一色值到设计系统色板：AI辅助的色阶生成算法

选出主色只是第一步。设计系统需要的是一整套色阶梯度（从最浅的 50 到最深的 900），这才是 AI 真正能发挥价值的地方。

传统色阶生成的痛点

手动制作色阶时，设计师通常这样做：

这种方式的问题：人眼对亮度的感知是非线性的。均匀的 HSL 步进，在人眼看来并不均匀。这也是为什么 Material Design 的色板看起来"更高级"——他们用了感知均匀的色彩空间（HCT，基于 CAM02 模型）。

AI辅助色阶生成：三种技术路线

路线一：基于LLM的感知均匀色阶推荐

让 LLM 直接输出每个阶梯的 HSL 值。提示词核心：

请以{base_color}为基准色，生成9级色阶（50/100/200/300/400/500/600/700/800/900）。
要求：
– 亮度变化符合人眼感知均匀（不是线性变化）
– 最深色（900）对比白色，对比度 ≥ 7:1（WCAG AAA）
– 最浅色（50）在有彩色背景下可读
– 输出每个阶梯的 HEX 和 HSL

路线二：程序化生成 + AI 审核

用算法生成色阶，再让 AI 审核"看起来是否均匀"：

// 感知均匀色阶生成算法（简化版）
function generateColorScale(baseHSL, steps = 10) {
const scale = [];
// 使用指数曲线模拟感知均匀
for (let i = 0; i < steps; i++) {
const ratio = i / (steps – 1);
// 亮度：用 gamma 校正模拟感知均匀
const lightness = Math.pow(1 – ratio, 0.5) * baseHSL.l;
// 饱和度：随亮度降低而略微增加（模拟自然色彩感知）
const saturation = baseHSL.s * (1 + ratio * 0.15);
scale.push({
step: i * 100,
h: baseHSL.h,
s: Math.min(100, saturation),
l: Math.max(0, Math.min(100, lightness))
});
}
return scale;
}

具体参数（直接可用）：

• gamma = 0.5：感知均匀的最佳近似值（来源：CIE Lightness 公式）
• saturationBoost = 0.15：深色阶饱和度提升比例，避免颜色发灰
• steps = 10：Material Design 标准的10级色阶

路线三：调用专业色彩API（推荐用于生产环境）

实战数据：三种路线的对比测试

我用同一组情感关键词（"专业、信任、温暖"）测试了三种路线，结果如下：

结论：路线二性价比最高，路线三效果最好。在实际项目中，我通常采用"路线二生成 + 路线三验证"的混合策略。

四、落地实践：用AI色彩引擎搭建完整设计系统色板

理论说完，来点实际的。以下是我用一个真实项目（一个面向设计师的AI工具产品）完整走一遍 AI 辅助色彩设计的过程。

第一步：定义品牌调性关键词

与产品经理、创始人深度访谈后，确定了三个核心调性：

• 专业：用户信任我们的技术能力
• 温暖：AI工具不应该冷冰冰，要有温度
• 创意：面向设计师，本身要有美感

第二步：LLM生成初版色板

将关键词输入 GPT-4，使用上面提供的提示词模板，得到初版推荐：

{
"primary": {
"50": "#EEF2FF", "100": "#D6E4FF", "200": "#ACD6FF",
"300": "#7FBFFF", "400": "#4D9FFF", "500": "#0066FF",
"600": "#0052CC", "700": "#003D99", "800": "#002966",
"900": "#001333"
},
"accent": {
"warm": "#FF6B35",
"creative": "#8B5CF6"
},
"neutral": {
"0": "#FFFFFF", "100": "#F5F5F7", "200": "#E8E8ED",
"300": "#D1D1D6", "400": "#AAAAAF", "500": "#80808A",
"600": "#48484D", "700": "#2C2C31", "800": "#15151A",
"900": "#000000"
}
}

第三步：AI审核与迭代

把初版色板拿到 LLM 里做"二次评审"——让它从以下维度检查：

请审核以下设计系统色板：

1. 对比度检查：主色#0066FF 在白色背景上的对比度是多少？
（计算方式：(L1 + 0.05) / (L2 + 0.05)，其中L为相对亮度）

2. 色阶均匀性：从50到900，每级之间的感知差异是否均匀？

3. 跨色相协调性：primary蓝 + warm橙 + creative紫，是否协调？
（建议用60-30-10法则评估）

4. 暗色模式适配：在暗色背景下，primary.400是否可读？

5. 可访问性：模拟色盲用户（红绿色盲）视角，primary与accent.warm是否难以区分？

LLM 给出的审核意见（摘要）：

• ✅ 主色对比度 8.2:1，超过 WCAG AAA 标准
• ⚠️ 色阶500（基准色）与400之间的差异偏小，建议调整
• ✅ 蓝橙紫配色为分裂互补方案，协调性良好
• ⚠️ 暗色模式下 primary.400 与深色背景对比度仅 2.8:1，建议用 primary.300
• ⚠️ 红绿色盲视角下，accent.warm 与 accent.creative 区分度可接受，但建议增加亮度差异

第四步：输出生产级色板

根据审核意见调整后，最终输出用于生产的色板定义：

// design-tokens/_colors.scss
:root {
// 主色系 – 专业蓝
–color-primary-50: #EEF2FF;
–color-primary-100: #D6E4FF;
–color-primary-200: #ACD6FF;
–color-primary-300: #7FBFFF; // 暗色模式使用
–color-primary-400: #4D9FFF;
–color-primary-500: #0066FF; // 基准色
–color-primary-600: #0052CC;
–color-primary-700: #003D99;
–color-primary-800: #002966;
–color-primary-900: #001333;

// 强调色 – 温暖橙
–color-warm-500: #FF6B35;

// 创意色 – 灵动紫
–color-creative-500: #8B5CF6;

// 语义色
–color-success: #00C853;
–color-warning: #FFB800;
–color-error: #E53935;
–color-info: var(–color-primary-500);
}

五、总结

AI 色彩推荐引擎不是要取代设计师的审美，而是把设计师从重复的、可计算的工作里解放出来——选主色之后的色阶生成、对比度检查、可访问性验证，这些才是 AI 真正擅长的。

从"这个蓝不够温暖"到输出一套完整的、符合 WCAG 标准的设计系统色板，AI 可以把这个过程从几小时压缩到几分钟。但前提是：你要学会用 AI 能理解的方式描述你的色彩需求——这不是在学 prompting，这是在学一种新的设计表达语言。

关键要点：

美院时学色彩，老师让我们画100张色卡，每张都要说出"为什么这样搭配"。如今 AI 可以瞬间生成100套色板，但它说不出"为什么"——这个答案，依然需要你我来给出。