辰棠产品校色工具

使用教程

从上传到下载,
一步步学会产品校色。

这份教程会告诉你每一步怎么操作、每个滑块会让图片发生什么变化,以及工具在背后是怎么校色的。

01

先准备两张图

上传待校色图和标准参考图

  • 待校色图:需要修正颜色的图,例如场景图、模特图、实拍图。尽量上传原图,输出会保持原图像素尺寸。
  • 标准参考图:你认为颜色最准的那张图,通常是白底棚拍图或经过校准的产品图。
  • 两张图都支持点击选择或直接拖进上传框。换一张待校色图时,之前涂的蒙版和结果会一起清空。

提示参考图要和待校色图是同一款、同一颜色的产品,否则系统会把产品改成参考图的颜色。

02

告诉系统产品在哪里

取样主色,再用画笔涂出产品

这一步一共做三件事:在待校色图上画取样框、在参考图上画取样框、用画笔把待校色图里的产品涂出来。取样框告诉系统“要改哪个颜色、改成什么颜色”,涂抹区域告诉系统“只在哪里改”。

A. 在待校色图上画取样框

  1. 上传后,待校色图上方默认选中「取样框」工具。
  2. 在产品上按住鼠标,从一个角拖到对角,松开后出现橙色虚线框,标着“待校色产品”。想换位置就重新拖一次,新框会替换旧框。
  3. 框选的位置应是产品面积最大、最能代表产品颜色的那块,例如衣服的前片、包的正面、玩具的主体。
  4. 不满意可以点画布下方的「恢复默认取样框」回到初始位置。
✓ 应该框
  • 光线均匀、不亮不暗的平整区域
  • 同一种材质、同一种颜色
  • 框尽量大一些,但不要超出这块颜色
✕ 尽量避开
  • 强反光、高光点、亮边
  • 深阴影、褶皱的暗面
  • 印花、图案、logo、文字、拼色
  • 透明、网纱、缝线边缘和背景

系统会取框内颜色的中位数,再剔除离中心最远的约四分之一像素后重新计算,所以框里混进一点杂色没关系;但如果杂色占了一大半,测出来的“产品颜色”就会偏。框太小时会提示“取样框太小”,把框拉大一点即可。

B. 在标准参考图上画取样框

  1. 在右侧的标准参考图上,用同样的方法拖出紫色取样框,标着“标准产品”。
  2. 关键:选和待校色图相同的部位、相同的材质。待校色图框的是前片,参考图也框前片;待校色图框的是皮面,参考图就不要框到五金或缝线上。
  3. 避开的内容同上:反光、阴影、印花、白底背景。
  4. 点「恢复默认框」可以重置位置。

两个框选得越“对应”,结果越准。如果两个框选的不是同一个颜色,系统会忠实地把 A 的颜色往 B 推,结果就会跑偏。

C. 用画笔把产品涂出来(产品软蒙版)

  1. 点击待校色图上方的「画笔涂抹产品」。鼠标移到图上会变成一个圆圈,圆圈大小就是画笔大小。
  2. 先调画笔大小:拖动“画笔大小”滑块,或者按键盘 [ 变小、] 变大。大面积用大画笔快速涂,靠近边缘时换小画笔。
  3. 按住鼠标拖动,把产品涂满。涂过的地方会盖上一层半透明蓝色。可以分很多笔来涂,不需要一笔完成。
  4. 涂出界了:切到「橡皮擦」,按住拖动擦掉多余的部分。
  5. 涂错了:点「撤销」或按 ⌘/Ctrl + Z,每次撤回一笔;点「清空蒙版」则全部重来。
  6. 手机和平板上用手指直接涂,操作相同。
✓ 涂抹要点
  • 产品整体涂满,包括它的阴影面和高光面
  • 边缘大致贴边即可,系统会自动羽化
  • 宁可略微涂出一点,也不要漏涂产品
  • 确保第 A 步的取样框落在蓝色区域内
✕ 不要涂
  • 模特皮肤、头发
  • 旁边的道具、其他产品
  • 和产品颜色接近的背景(这时边缘要贴紧一些)

自动羽化是什么?系统会把蓝色区域的边缘柔化成渐变过渡,宽度约为图片短边的 1%(最少 10 像素)。所以产品边缘的校色是逐渐减弱的,不会出现一圈生硬的色边,也正因为这样,涂抹只需要大致贴边。

D. 高级:使用黑白产品遮罩(可选)

产品轮廓很复杂(如蕾丝、毛绒、镂空)时,可以先在其他软件里抠好图,导出一张白色代表产品、黑色代表不处理的黑白图,在“校色设置 → 高级:使用黑白产品遮罩”中上传。上传后会优先使用这张遮罩,画笔涂抹不再生效。也可以给参考图上传遮罩,让参考取样只统计产品像素。

完成第 02 步前检查一下 橙色框在产品主色上 紫色框在参考图相同部位 产品已被蓝色完整覆盖 橙色框位于蓝色区域内
03

微调处理方式

每个参数会让图片发生什么变化

点击“开始自动校色”后,拖动下面任意一个滑块,右侧结果都会实时更新。建议先用默认值看效果,再按下面的说明一项项调整。

第一步:全图白平衡

默认开启 · 强度 75%

它做什么先柔和地消除整个场景的偏色,作用于整张图,包括背景、模特和道具,所以不会产生蒙版接缝。

系统会在画面里找出“最亮且颜色最淡”的区域(通常是白墙、白底、灰色地面),测出它们偏向哪个颜色,再把整张图往中性方向拉回来。为了不破坏画面氛围,每个颜色方向最多只修正 4 个单位,属于轻度修正。

强度调高白色背景更白、整体偏黄或偏蓝的感觉消除得更多。
强度调低保留更多原始灯光氛围,人物肤色、暖光场景变化更小。
关闭整张图不做白平衡,只修改涂抹区域内的产品颜色。

建议如果人物肤色或环境氛围变化太大,可降到 40%~60%;暖光、夕阳等刻意营造的氛围图,可以直接关闭。

第二步:产品校色强度

默认 100% · 范围 0~150%

它做什么决定产品颜色往参考色靠多少。只作用于涂抹区域内、和取样主色相近的像素。

系统先算出“参考色 − 白平衡后的产品色”的差距,再乘以这个百分比。100% 是自动测量值,理论上会让取样处的颜色等于参考色;超过 100% 会“矫枉过正”。为了防止离谱的结果,单次自动校正在色相方向上有上限(每个方向最多 18 个单位),差距特别大时可配合“手动微调”补足。

调高颜色更接近甚至超过参考色,变化更明显。
调低只往参考色走一部分,结果更保守、更自然。
0%产品不做局部校色,只保留全图白平衡的效果。

建议效果过重、颜色显得“假”时可降到 70%~90%;先确认取样框选得对,再考虑超过 100%。

取色容忍度

默认“标准”(14) · 精准 ≤10 · 标准 11~20 · 宽松 >20

它做什么决定“颜色要多像取样主色才会被改”,也就是校色作用的颜色范围。

系统会比较每个像素和取样主色的差别。明暗差异只算很小的比重,所以同一颜色的阴影面、高光面会被一起改,而颜色明显不同的部分会逐渐被排除。容忍度越大,被视为“同一颜色”的范围越宽。

与主色相差 14 个单位的颜色(同色系但看得出差别),在不同容忍度下被修正的比例(印花保护 70%):
容忍度5814(默认)2030
修正比例0%1%23%48%72%
调小(向左)只改和取样色几乎一样的颜色。产品的褶皱、渐变处可能改不到,出现“亮处改了、暗处没改”的斑驳感。
调大(向右)相近的颜色一起改,渐变、纹理、深色面料改得更整体;但和产品颜色相近的印花、背景也可能被带着变。

建议纯色产品用默认值;渐变、纹理、毛绒或深色产品适当向右调;产品上有和主色接近的其他颜色时向左调。

印花保护

默认 70% · 范围 0~100%

它做什么决定“不太像主色”的颜色被改动得有多少。数值越高,彩色图案越不容易被带偏。

如果说容忍度划定了一个范围,印花保护就决定了这个范围的边缘有多“陡”:保护越高,离主色稍远的颜色修正比例下降得越快,印花、logo、拼色基本保持原样;保护越低,过渡越平缓,更大范围的颜色会被一起带动。

容忍度为默认值时,与主色相差不同程度的颜色被修正的比例:
与主色的差别印花保护 0%70%(默认)100%
7(略有差别)88%69%62%
14(同色系)61%23%15%
21(明显不同)32%4%1%
30(另一种颜色)10%0%0%
调高印花、图案、logo、拼色几乎不动,只改产品主色。
调低颜色过渡更柔和,主色附近的相近颜色也一起变;适合没有图案的纯色产品。

建议发现印花或图案颜色被改了,就把印花保护往上调,或者把容忍度往下调。

局部同步产品亮度

默认关闭

它做什么开启后,除了颜色,产品的明暗也会往参考图靠拢(最多调整 8 个单位)。

开启产品的深浅更接近参考图。但参考图通常是白底棚拍,光线和场景不同,开启后产品可能显得过亮或过暗、和周围环境光不协调。
关闭只改颜色、不改明暗,产品的光影和场景保持一致。

建议两张图光线差异大时保持关闭;两张图光线接近、只是产品深浅不对时再开启。

手动微调:亮度 · 冷暖 · 色调

默认 0 · 范围 −15~+15

它做什么在自动校色结果的基础上,让你看着标准参考图再手动补一点。作用范围和产品校色相同:涂抹区域内、和取样主色相近的颜色。

亮度向左更暗,向右更亮。不受“局部同步产品亮度”开关影响。
冷暖向左偏蓝(更冷),向右偏黄(更暖)。
色调向左偏绿,向右偏红(品红)。

建议右侧切到“对照标准参考图”并勾选“放大取样区域”,左右对比着微调;双击某个滑块可单独归零,“全部归零”一次清空。

04

调整参数即时预览

检查结果并下载

  • 前后对比:左右拖动图片中间的分隔线,左边是校色前,右边是校色后。
  • 对照标准参考图:左边是实时的校色结果,右边是标准参考图。勾选“放大取样区域”后,两边都会放大到各自的取样框,方便对比同一部位的颜色。
  • 色块与色差 ΔE:依次显示原图取样色、校色后的颜色和标准色。ΔE 是与标准色的差距,例如 “12.4 → 1.8” 表示从 12.4 降到了 1.8。一般 ΔE 在 2 以内肉眼基本看不出差别,2~5 仔细对比能察觉,5 以上一眼可见。
  • dL / da / db:本次实际施加的修正量,分别对应亮度、绿↔红、蓝↔黄方向。
  • 如果结果下方出现“取样框大部分不在涂抹区域内”的提示,说明产品没有被涂满,回到第 02 步补涂即可。
  • 下载:实时预览用的是缩小图,停止调整片刻后系统会自动按原图尺寸生成高清结果,按钮变回“下载校色后图片”即可下载。默认与原图同格式、最高质量导出,也可以选择 PNG 无损。
原理

产品校色实现原理

工具在背后做了什么

整个过程分两步:先对整张图做轻度白平衡,再只在产品区域内把颜色推向参考色。所有计算都在你的浏览器里完成,图片不会上传。

1测量颜色两个取样框各测出一个代表色
2全图白平衡整图轻度去除偏色
3计算差距参考色 − 白平衡后产品色
4逐像素校正按相似度和蒙版分配修正量
5输出原尺寸保持原图像素与格式

为什么用 Lab 颜色空间

屏幕上的颜色是红绿蓝(RGB)混出来的,改一个颜色往往会同时改变明暗。工具会把每个像素转换成 Lab 颜色:

L亮度0 是黑,100 是白
a绿 ↔ 红负数偏绿,正数偏红
b蓝 ↔ 黄负数偏蓝,正数偏黄

这样就能只改颜色、不动明暗。本教程里说的“相差多少个单位”,指的就是 Lab 里的距离。

1. 测量代表色

在取样框内均匀抽取像素,先求 L、a、b 各自的中位数作为中心,再丢掉离中心最远的约 25% 像素(比如少量反光点、线头),用剩下的像素重新求中位数。待校色图和参考图各得到一个代表色。

2. 第一步:全图白平衡

在整张待校色图里,挑出亮度排在前约三成、同时颜色最淡的像素,把它们看作“本该是白色或灰色”的地方。如果它们的 a、b 不为 0,说明画面有偏色,于是整张图的 a、b 都往反方向平移,平移量乘以“全图白平衡强度”,每个方向最多 4 个单位。因为是整张图统一平移,所以不会产生任何接缝。

3. 第二步:计算产品需要改多少

把待校色代表色加上白平衡的变化,再和参考代表色相减,得到 a、b(以及开启时的 L)方向上的差距,然后乘以“产品校色强度”,再加上你手动微调的数值。

修正量 = (参考色 − 白平衡后的产品色)× 校色强度 + 手动微调

4. 逐像素按权重校正

不是每个像素都完整地加上修正量,而是乘以一个 0~1 之间的权重:

新颜色 = 原颜色 + 白平衡变化 + 修正量 × 权重
权重 = 颜色相似度 × 蒙版值

  • 颜色相似度:像素和取样主色越像,越接近 1。“取色容忍度”决定多远的颜色还算相似,“印花保护”决定相似度下降得有多快。计算差别时,明暗差只占约两成比重,所以产品的阴影、高光会和主色一起被改。
  • 蒙版值:涂抹区域内是 1,区域外是 0,羽化边缘处从 1 平滑过渡到 0。

因为每个像素都是在自己原来的颜色上平移,而不是被替换成同一个颜色,所以布料纹理、褶皱、光影层次都会完整保留。

5. 实时预览与原尺寸输出

调参时,工具在一张长边约 960 像素的缩小图上重算,几十毫秒就能更新画面;你停止调整后,再在后台按原图尺寸用同样的算法重新计算一遍,效果与预览一致,导出保持原图像素尺寸。

问答

遇到问题先看这里

常见问题

点了校色,产品颜色几乎没变化?

依次检查:橙色取样框是否在蓝色涂抹区域内;“产品校色强度”是否太低;“取色容忍度”是否太小;两个取样框测出的颜色是否本来就很接近(看色块和 ΔE)。

印花、logo 或拼色也被改了颜色?

把“印花保护”往上调,或把“取色容忍度”往左调。如果印花颜色和产品主色非常接近,可以用橡皮擦把印花区域从蒙版里擦掉。

产品的阴影或褶皱处颜色没跟着变,看起来斑驳?

把“取色容忍度”往右调,或适当降低“印花保护”,让相近的颜色一起被校正。

背景或旁边的物体也变色了?

整体轻微变化来自“全图白平衡”,可以降低强度或关闭;只有产品周围一圈变色,说明涂抹出界了,用橡皮擦擦掉多余部分。

模特肤色变了?

不要把皮肤涂进蒙版;如果仍有变化,把“全图白平衡强度”降到 40%~60% 或关闭。

ΔE 降不下来,颜色还差一截?

自动校正有上限,避免一次改得太离谱。可以适当把“产品校色强度”调到 100% 以上,或者对照标准参考图用“手动微调”补足。同时确认两个取样框选的是同一部位、同一材质。

产品边缘出现一圈色边?

通常是涂抹离产品边缘太远,羽化区域落在了背景上。用小画笔或橡皮擦把边缘修贴近一些。

我的图片会被上传吗?

不会。所有处理都在你当前的浏览器中完成,页面不会上传或保存你的图片。