商品图在设计稿和网页里颜色不一样？从 sRGB、Display P3 到导出副本排查

设计稿里看起来正常，导出后在网页或另一台设备上却发灰、变暗，第一反应常常是继续调色。这样做可能把源文件本身改坏，因为差异也许出在颜色解释、转换或显示环境，而不在商品图的像素内容。

先把问题改写成一个更容易验证的问句：同一份文件，在哪一步第一次出现了差异？

先固定同一份文件和查看环境

不要同时拿设计稿、聊天软件预览和网页截图比较。先导出一份候选文件，记录文件名、尺寸和版本，再在两个明确环境中打开。必要时记录文件哈希，先排除“实际拿到的不是同一份文件”。

同一份文件在某个环境明显不同，优先检查该环境的浏览器、显示模式和色彩管理。屏幕的观感可以提示方向，但不能单独证明哪个颜色才是事实标准。

区分工作空间和网页副本

sRGB、Display P3 等名称描述的是颜色空间。工作文件可以使用更宽的空间，但网页交付是否合适，要看整个链路能否正确识别并呈现。把“指定一个配置文件”和“转换到另一个空间”混成一件事，容易让 RGB 数值和颜色外观同时发生不可解释的变化。

如果已确认源文件空间和目标需求，就按目标生成独立副本；如果来源不清楚，先回查拍摄、设计和导出记录。不要在未知前提下反复套配置，直到某一块屏幕看起来顺眼。

网页交付还要检查格式和尺寸

颜色正确不代表文件就适合页面。导出后还要核对实际显示尺寸、透明度、文字边缘和压缩变化。换格式时，保留一份源文件和一份未经再次编辑的交付副本，避免下一轮处理拿压缩结果继续加工。

关于首次出现色偏的位置，可以参考商品图导出后的 ICC 与显示环境排查；关于格式变化带来的细节和体积差异，可以看图片格式转换质量验收。

交付说明要写清楚边界

交接时至少写明源文件空间、目标空间、是否执行了转换、输出格式和检查环境。如果无法确认某一项，就写成待确认，不要用“颜色已统一”这样的结论替代证据。

可以进入图叮格式转换工具准备目标格式副本，但工具完成转换不等于所有设备都会呈现一致。最终仍要在真实网页和目标设备上复核，再决定是否接受这份文件。

颜色排查的终点不是让所有屏幕看起来完全一样，而是让每一次变化都有来源、有条件、有可回退的文件。