这篇解决什么问题
场景：你手上有一张很好看的参考图——竞品的详情页、一张摄影作品、或者某品牌的视觉物料，想把它的配色挪到自己的图上，但对着屏幕吸了半天色，做出来的东西要么脏、要么平、要么和自家品牌色打架。
这篇给三套具体做法，对应三种情况：从一张参考图取主色做延展、用品牌色反推辅助色、用色轮和明度梯度给画面补层次。每套都配了可直接改的提示词和验收标准。
这篇不解决什么：不解决“选哪个颜色更好看”的审美判断，那是选品和品牌定位的事；不讲具体某个配色网站的用法；不给“某色系转化率更高”这类结论——我查不到可靠来源，不做引用。标准值会注明出处，经验值会明确标成经验值。
先立三条通用原则
第一条，取色取区域不取点。单像素吸色拿到的是该点噪声值，不是这个物体的颜色。正确做法是在目标物体上圈一块区域取平均，并分别在亮部、中间调、暗部各取一组——同一物体在不同亮度下颜色差别很大，只取一组会让色板整体发灰。
第二条，先定数量再定颜色。配色失控几乎都是颜色太多导致的，不是颜色选错。动手前先把色板上限写死，超过就删，不要边做边加。
第三条，明度先于色相。画面发平通常不是颜色不够丰富，是明度梯度不够。先把亮、中、暗三档拉开，再去调色相；顺序反了会出现“换了十几个色相还是平”的情况。
这三条对应到可检查的数值，大致是下面这张表。前两行有出处，后两行是经验值，请分开看待。
| 检查项 | 建议阈值 | 性质 |
|---|---|---|
| 文字与背景的对比度 | 普通文本不低于 4.5:1，大号文本不低于 3:1 | 来自 W3C 的 WCAG 规范中 AA 级要求，具体以 W3C 当前规范文本为准 |
| 色差（与品牌色的偏差） | 用 ΔE 做量纲，数值越小越接近；多数取色工具可直接读出 | 量纲本身是通用的，阈值请按你的品牌规范与工具实测定 |
| 整套色板的颜色数量 | 主色 1 个、辅助色 2–3 个、中性色 3–4 级，总数通常不超过 8 | 经验值，不是标准，按品类调性可放宽 |
| 明度梯度 | 亮、中、暗三档之间要有明显跨度，暗部要真的压下去 | 经验值，靠转灰度自查 |
三个场景逐个给做法
场景一：从一张参考图取主色做延展
适用情况：你有一张喜欢的参考图，想让自家商品图染上类似调子，但商品本身颜色不能改。做法是分层取样再挑主色——在参考图上按亮部、中间调、暗部各取三到五个区域，记录每组 hex 值，挑出现频率最高且饱和度居中的一组作主色候选。
拿到主色后不要直接用：先把饱和度往下压一点，参考图的颜色通常经过调色，直接用会过艳；再配两到三个明度台阶，供不同面积的区块使用。
取色记录格式（每个区域一行）：
区域描述 | hex | 亮度层（亮/中/暗） | 面积占比估计 | 保留与否
延展提示词（把取到的值直接填进去）：
[商品描述], color palette dominated by [主色hex],
supporting tones [辅助色1hex] and [辅助色2hex],
neutral base [中性色hex],
background in [背景色hex],
soft even lighting, matte finish, no text, no watermark,
[画幅比例]
排除项：
over-saturated colors, neon tones, color banding,
muddy shadows, more than four dominant hues验收：取出的色覆盖亮、中、暗三个亮度层，不是集中在一层；成图里出现的主色不超过四个；把成图和参考图缩到同样大小并排看，调子接近但不雷同；商品固有颜色未被改动。
场景二：用品牌色反推辅助色
适用情况：品牌手册只给了主色或一个 logo 色，其余靠你补齐。最常见的错误是拿主色去配一堆“看起来协调”的颜色，结果整套都是主色调，画面没有落点。
正确顺序是先把主色做成明度台阶，再定中性色，最后才加一个强调色。中性色不是纯灰，要带一点点主色的色相，否则和主色放在一起会显脏。强调色通常在色轮上与主色成对比或互补关系，但饱和度要压到比主色低，面积也要控制住。
| 角色 | 数量 | 画面占比（经验值） | 用途 |
|---|---|---|---|
| 主色 | 1 个，配 3–4 个明度台阶 | 约 60% | 大面积背景、主视觉区块 |
| 辅助色 | 2–3 个 | 约 30% | 次要区块、图形、分隔 |
| 强调色 | 1 个 | 约 5%–10% | 按钮、标签、需要被看见的那一处 |
| 中性色 | 3–4 级灰阶，带微色相 | 剩余部分 | 文字底、留白、描边 |
占比是经验值，不是硬性标准；它的作用是防止你把强调色铺满整张图。
反推辅助色的操作顺序：
1 取品牌主色 hex，向亮部做 2 档、向暗部做 2 档，得到明度台阶
2 取主色，饱和度降到 8% 以下，得到 3–4 级中性灰阶
3 在色轮上找主色的对比位（或互补位），取该色相
4 把该色相的饱和度压到低于主色，明度调到与主色接近
5 按上表分配面积，强调色只放在一处
6 把色板贴回主色旁边，用取色工具量 ΔE，确认辅助色与主色没有接近到互相污染
生成提示词（填入上面得到的各值）：
[商品描述], brand color [主色hex] as dominant surface color,
accent color [强调色hex] used once on [指定位置],
neutral gray background [中性色hex],
consistent color temperature across all elements,
soft even lighting, no text, no watermark, [画幅比例]验收：色板里每个颜色都能说清它属于哪个角色；强调色在画面中只出现一处；辅助色与主色的色差可被取色工具量出明确数值，不是“看起来差不多”；中性灰在主色旁边不发脏。
场景三：用色轮和明度梯度补层次
适用情况：图已经生成出来了，颜色也不难看，但整张发平、没重点，说不清哪里是主角。这类问题九成出在明度上，不是色相上。
先自检：把图转灰度，若灰度图里也分不出主次，说明明度梯度不够，改色相没用。补法是拉开三档——暗部真的压下去（很多人不敢压暗，怕丢细节，结果整张卡在中间调），亮部收拢到一小块。明度拉开后再动色相：相邻色求稳、互补色求跳、三角配色求丰富。
补层次的检查与调整顺序：
1 转灰度，判断主次是否成立；不成立就先别动色相
2 拉明度：暗部压到能托住主体，亮部收拢到一处
3 定色相关系：稳定选相邻，冲击选互补，丰富选三角
4 控制饱和度：大面积低饱和，小面积才允许高饱和
5 复查：再转一次灰度，确认层次是明度撑起来的，不是靠颜色撑的
提示词（画面已经成型、只调层次时用）：
[原提示词保持不变],
deeper shadows with clear separation from midtones,
highlight concentrated on a single focal area,
desaturated large areas, saturation reserved for the focal point,
tonal separation between subject and background验收：灰度图里能一眼看出主体；暗部与中间调之间有明确分界；高饱和区域不超过画面的一成；整张图的颜色数量没有超过动工前定下的上限。
共性质检清单
□ 取色取的是区域平均，不是单像素点
□ 亮、中、暗三个亮度层都取了样，色板不是集中在一层
□ 动工前已写死色板上限，成图没有超
□ 灰度图里主次成立，层次是明度撑的
□ 文字与背景对比度达到 WCAG AA 级要求（普通文本 4.5:1、大号文本 3:1，以 W3C 当前规范为准）
□ 辅助色与品牌色的偏差用取色工具量过，有具体数值
□ 强调色在画面里只出现一处
□ 中性灰带微色相，放在主色旁边不发脏
□ 大面积低饱和，高饱和只留一处
□ 商品固有颜色未被配色过程改动
□ 缩到 200×200 缩略图仍能看出主色
□ 色板 hex 值已记录归档，下次可直接复用下一步
把这次定下的色板按 hex 值存成一份文件，下次同品类直接调用，取色环节整个跳过。配色真正的效率来源不是取色更快，是色板复用——同一套色板用够三次，视觉一致性自然就出来了。
整理日期：2026-10-04。文中对比度阈值来自 W3C 发布的 WCAG 规范中 AA 级要求（普通文本 4.5:1、大号文本 3:1），具体表述以 W3C 当前规范文本为准；ΔE 作为色差量纲属通用概念，本篇未给出具体阈值，请以你的品牌规范与所用工具实测为准；色板数量上限、画面占比、明度梯度等均为经验值，非标准、非实测统计，按品类调性自行调整。