AI 时代设计师的配色工作流
AI 让"得到一堆颜色"变得毫无成本,于是稀缺能力转移到两端:判断颜色的好坏,以及让好颜色可复用。一套现代配色工作流应当是四段式的:采集 → 生成 → 校验 → 管理。
一、采集:像素级取色工具箱
- 系统级:macOS 自带"数码测色计",Windows 用 PowerToys 的 Color Picker,全局快捷键秒取任何屏幕像素;
- 浏览器插件:ColorZilla(Chrome)、Eye Dropper,网页配色考古利器;
- 图片批量提取:Coolors 的图片取色、Adobe Color 的"从图像提取",可一键从海报、剧照、摄影里压出色板;
- 打点采样法:对 AI 生成图手动打点取样,比自动算法更能还原画面的明度结构——算法爱给平均色,而画面的灵魂通常在极端值(最深与最亮)。
采集环节的纪律:每存一张参考图,顺手记录来源场景与情绪关键词,否则素材库三个月就变成无法检索的坟场。
二、生成:AI 配色工具的分工
- Huemint:按使用场景(品牌/界面/插画)生成配色,并预览到真实 mockup 上,适合快速立项;
- Khroma:用你收藏的五十组颜色训练个人化模型,越用越懂你的口味,适合建立"个人色感指纹";
- Coolors:生成 + 锁定 + 微调的效率之王,支持导出多格式;
- Adobe Color:色轮规则(互补、分裂互补、类比)仍是理解色彩关系的最短路径,AI 生成后可回这里手动校准;
- AI 生图反推:让生成模型按描述词出图,再从成品取色——本质是把 AI 当"色彩导演"用。
三、校验:机器出方案,人做质检
AI 配色最容易翻车的三处,对应三个检查动作:
1. 对比度:正文与背景对比度是否达到 WCAG AA(4.5:1,大字 3:1),用 Stark 插件或 WebAIM 的对比度检查器过一遍;
2. 色弱可用性:用 Coblis 等工具模拟红绿色盲视角,确认信息不单靠颜色区分(加图标、下划线、形状冗余);
3. 场景恒常性:同一色板在亮环境和 OLED 暗环境的表现不同,深色底上的蓝紫尤其容易"发闷",实际设备上多看一眼。
四、管理:把色板变成资产
配色工作流的终点是可检索、可复用、可迭代:
- 命名规范:放弃"蓝色 2",改用"功能 + 编号"双轨——语义名(brand/primary/surface/danger)给团队,色值序列给实现;
- 设计令牌(Token)化:在 Figma 设 Variables,或用 CSS 自定义属性落地,改一处全局生效,色板从"文档"升级为"系统";
- 单一信源:选定一处作为色板唯一权威版本,避免七份截图各执一词;
- 情绪标签归档:每个色板打上场景标签,检索时按情绪而非按色值。
五、防同质化:留一手"人味"
AI 工具会向平均值收敛——用久了,所有人的色板开始长得像。对策:定期从摄影、电影、实体材质(陶瓷、旧书、地砖)手工采色混入输入源;保留 10% 的"不完美"(略微偏灰的底色、不精确的撞色),那往往是你个人风格所在的缝隙。
流程总结:屏幕与图像采集 → AI 按场景生成 → 人工校验无障碍与环境适应 → 令牌化入库 → 用真实项目反哺库。工具越快,判断与沉淀越值钱。