PNG 色彩管理决定同一张图在 Display P3 与 sRGB 屏上是否「各说各话」。面向设计师、运营与前端素材岗，本文给出 ICC/色彩描述文件导出对比表、预览校验与透明通道检查点，以及远程 Mac三步验收和归档命名，服务设计交付验收。
① 为什么跨屏偏色
偏色通常来自工作空间、导出是否真转换到 sRGB与查看端解释 ICC不一致。广色域稿若只改标签、不做转换，易裁切或发脏；sRGB PNG 若与未标记资源、滤镜或混合模式叠放，渐变与品牌色先出问题。请在 README 固定「母版」（常保留 Display P3）与「上线」（多为 sRGB PNG）及是否嵌入 ICC。切图参数可对照三款工具批量导出 PNG 工作流一并收口。
② 导出预设对比表
下表作团队合同；大版本升级后复检并截图。默认 Web 交付 sRGB。
| 工具 | 文档 / 工作空间 | PNG 导出：ICC 与色彩描述文件 | 典型 Web 交付约定 |
|---|---|---|---|
| Figma（桌面 / 浏览器） | 按文件色彩设置；确认预览是否偏 P3 设备 | 导出 PNG 时显式选 sRGB 意图；避免「跟着显示器走」的口头交接 | sRGB，8 位，嵌入或剥离与前端策略一致 |
| Sketch | 画布「色彩描述文件」 | 导出预设中配置文件选 sRGB；若选「与文档相同」须在说明表中注明文档 ICC | sRGB，营销与 UI Kit 通用 |
| Affinity Photo / Designer | 文档指定工作 ICC | 导出面板：是否嵌入 ICC 按规范；需交付 sRGB 时执行转换为配置文件而非仅改标签 | sRGB，宽色域母版需先转换再批量导出 |
| Adobe Photoshop | 编辑 → 指定配置文件 / 转换为配置文件 | 导出为 / 存储为 Web：sRGB，「嵌入颜色配置文件」按团队统一开关 | sRGB，批处理前先烘焙转换 |
| 预览 / 快速查看（macOS） | 跟随显示器与嵌入 ICC | 非制作工具，仅作抽检 | 必须与浏览器对照，不能单独作为签字依据 |
预览校验步骤（跨屏）
| 步骤 | 操作 | 通过标准 |
|---|---|---|
| 1 | 在参考 Mac 上用预览打开；可用检查器查看是否带嵌入描述文件（视文件而定） | 相对已批准样稿无明显伽马跳变；与书面规范中的色彩意图一致 |
| 2 | 在 Safari 与 Chrome 中将素材置于 #FFFFFF 与 #0B0B0B 背景上 | 品牌色稳定；与设计 Token 的 hex 对比在约定 Δ 容差内 |
| 3 | 分别按 100% 像素 与目标 CSS 显示尺寸查看 | 锐度与噪点可接受；无意外二次缩放 |
| 4 | 换一类显示器对比（如 sRGB 外接屏 vs Display P3 笔记本） | 预期行为已文档化：对外统一 sRGB 上限，或注明存在 P3 专用母版目录 |
透明通道检查点
- Alpha：默认 Web 用非预乘 straight，除非管线要求预乘。
- 边缘：深浅底看抗锯齿，无灰/色光晕；检查衬底与合并选项。
- 透明区 RGB：勿留混合或压缩后会冒出来的杂色。
- 位深：常规 8 位 RGBA；高位深另议。
大批量高分辨率导出可与远程 Mac M4 批量导出 4K PNG的夜间批次结合。
③ 远程 Mac 校验流程（三步）
专用远程 Mac可固定显示与系统状态，适合大批量 PNG 的设计交付验收。
- 冻结参考环境：固定 macOS 小版本、显示器描述文件与导出预设版本；仓库中保留
README-color.md，写清「源空间 → 交付空间」（例如母版 Display P3 → 分发目录 sRGB PNG）。 - 批量导出 + 按表抽检：在远端跑完导出脚本或动作；对尺寸、体积、是否含 Alpha 做自动化或抽样脚本，主视觉与品牌色素材按上文预览表人工过一遍。
- 发布签字清单：工单附上 basename、宽高、字节数、色彩意图、导出工具版本；运营与前端可在同类机器上复现同一验收。
接入步骤见帮助中心。
④ 批量验收命名与归档
目录与文件名应能自述色彩与倍率，便于审计。
- 目录：
sources/p3/放广色域母版，dist/web-srgb/放已签字 PNG，可选qa/screenshots/存浏览器截图与日期。 - 文件名 token：包含倍率（如
@2x）、主题变体（dark），多衍生版本可加-srgb等色彩标签。 - 清单：每版本一份 CSV/JSON：
path, width, height, bytes, colorIntent, checksum。 - 版本绑定：清单与设计稿版本号或 Git 标签对应，确保「当时用的哪条 ICC 规则」可追溯。
⑤ FAQ（偏色、透明边）
问：Windows 上仍偏「闷」？ 答：确认已转换到 sRGB 而非只改标签；查父级 opacity、filter 与未标记资源混排。
问：渐变起带？ 答：多因位深/抖动；P3→sRGB 过急也会加重，宜 16 位处理后再落 8 位 sRGB。
问：透明 Logo 暗色底有细边？ 答：查预乘/衬底/Alpha 夹白，按上文透明检查点在黑底重导出。
问：要每张都嵌 ICC 吗？ 答：产品统一即可，关键是写进验收文档并全员执行。
小结与下一步
把 Display P3 母版与 sRGB 交付分开，ICC 策略写死，预览表 + 透明检查 + 清单命名，即可稳住PNG 色彩管理与设计交付验收；远程 Mac适合批量与夜间复现。压缩与体积见压缩交付三步。
远程 Mac「设计场景」套餐
需要固定系统与导出预设、可复现色彩验收的团队，可将批量 PNG 放在远程 Mac 设计场景套餐上跑。首页了解方案，购买 / 租用下单，价格与节点比对配置，帮助中心完成接入；更多 PNG 实践见技术见解。