AI色彩推荐引擎从情感关键词到设计系统色板的自动化之旅色彩是设计中最感性的维度也是最难用规则描述的维度。在美院学色彩理论时老师常说这个蓝不够温暖——这种感觉怎么翻译成代码如今 LLM 给出了一种可能的答案。一、从这个蓝不够温暖说起色彩推荐的古老难题每个设计师都经历过这样的场景产品经理说这个颜色感觉不对但你问他哪里不对他说不出来。色彩评审长期处于只可意会不可言传的状态直到 AI 出现。传统色彩推荐的三大痛点主观性强没有客观标准好看是个人感受语境依赖同样的蓝色用在金融APP和儿童游戏里感觉完全不同系统思维缺失选了一个主色不知道如何衍生出完整的色板AI 介入色彩推荐的核心优势在于它可以在海量设计案例中学习色彩与情感、场景、品牌的关联关系并且能以结构化的方式输出完整的设计系统色板。经过半年的实践我发现AI 色彩推荐的最佳使用方式不是让AI替你决定而是让AI帮你扩展——你给它一个方向它帮你算出完整的色板。这种人机协作模式既保留了设计师的审美判断又发挥了 AI 的计算优势。二、情感关键词到HSL坐标AI理解色彩的语言转换要让 AI 做色彩推荐首先要解决一个基础问题如何把温暖专业活力这类情感关键词映射到具体的色彩数值HSL 色彩空间连接情感与数值的桥梁在 RGB、HEX、HSL、LAB 等色彩空间中HSL色相Hue/饱和度Saturation/亮度Lightness是最接近人类感知模式的也最适合用 AI 来处理。情感关键词与 HSL 参数的映射关系经过多次校准的经验值情感关键词H色相范围S饱和度范围L亮度范围推荐主色区间温暖0°-60°红橙黄60%-90%50%-70%#FF6B35 ~ #FFB800冷静180°-240°青蓝40%-70%40%-60%#0066FF ~ #00B4D8专业210°-240°深蓝50%-80%30%-50%#1A1A2E ~ #003566活力30°-90°橙黄绿80%-100%50%-65%#FF6B00 ~ #00C853优雅300°-360°紫红30%-50%40%-60%#6A4C93 ~ #B388EB安心120°-180°绿青30%-60%45%-65%#2D6A4F ~ #52B788提示词设计让LLM输出可计算的色彩参数关键不是让 LLM 直接输出 HEX 色值而是让它输出 HSL 参数范围再用程序生成具体色值。这样可控性更强。提示词模板## 任务 根据以下品牌描述推荐一套设计系统色彩方案。 ## 品牌描述 [在此填入行业/目标受众/品牌调性关键词/竞品色彩风格] ## 输出要求 1. 对每个情感关键词给出 HSL 参数范围不是单一值 2. 主色给出3个候选HSL坐标附带推荐理由 3. 辅助色基于主色用色彩理论互补/三角/分裂互补计算 4. 中性色给出灰度阶梯的L值0%/10%/.../100% 5. 输出格式JSON包含 h/s/l 数值范围 ## 色彩理论约束 - 主色与辅助色对比度 ≥ 4.5:1WCAG AA - 主色与白色对比度 ≥ 3:1WCAG 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 真正能发挥价值的地方。传统色阶生成的痛点手动制作色阶时设计师通常这样做选一个基准色如#0066FF在 Figma 里手动调整 H/S/L生成 9 个阶梯凭感觉微调直到看起来均匀这种方式的问题人眼对亮度的感知是非线性的。均匀的 HSL 步进在人眼看来并不均匀。这也是为什么 Material Design 的色板看起来更高级——他们用了感知均匀的色彩空间HCT基于 CAM02 模型。AI辅助色阶生成三种技术路线路线一基于LLM的感知均匀色阶推荐让 LLM 直接输出每个阶梯的 HSL 值。提示词核心请以{base_color}为基准色生成9级色阶50/100/200/300/400/500/600/700/800/900。 要求 - 亮度变化符合人眼感知均匀不是线性变化 - 最深色900对比白色对比度 ≥ 7:1WCAG 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 10Material Design 标准的10级色阶路线三调用专业色彩API推荐用于生产环境实战数据三种路线的对比测试我用同一组情感关键词专业、信任、温暖测试了三种路线结果如下路线生成速度感知均匀性设计系统适配综合评分路线一纯LLM慢10-30s⭐⭐⭐⭐⭐⭐⭐7/10路线二程序AI审核快1s⭐⭐⭐⭐⭐⭐⭐⭐⭐9/10路线三专业API中2-5s⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐10/10结论路线二性价比最高路线三效果最好。在实际项目中我通常采用路线二生成 路线三验证的混合策略。四、落地实践用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这是在学一种新的设计表达语言。关键要点HSL 是连接情感与数值的最佳桥梁优先用 HSL 参数与 LLM 交流**路线二程序化生成 AI 审核**性价比最高推荐日常使用对比度验证是必要环节LLM 可以帮你计算 WCAG 对比度输出标准化Design Token 格式让色板可直接导入设计工具美院时学色彩老师让我们画100张色卡每张都要说出为什么这样搭配。如今 AI 可以瞬间生成100套色板但它说不出为什么——这个答案依然需要你我来给出。