給設計師、營運、需高一致交付的前端素材崗：PNG 色彩管理常在 Display P3 與 sRGB 螢幕之間「同一檔、兩種臉」。本文用ICC／色彩描述檔對照表、預覽校驗、透明通道檢查與遠端 Mac 三步驗收，支撐可回溯的設計交付驗收。
① 為什麼跨螢幕偏色
偏色多來自工作色域、匯出轉換與檢視端解讀 PNG不一致：寬螢幕選色後若未正確轉成 sRGB 就標籤化輸出，易飽和度漂移；頁面混用未標記素材或濾鏡也會讓「已標 sRGB」看起來仍不同。高一致交付請書面約定「母檔／寬色域 vs 上線 sRGB」與是否內嵌 ICC，寫進 README，而非匯出後才口頭補述。
② 匯出預設對比表
下表作團隊對「sRGB PNG」的共同定義；大版號升級請抽驗並存截圖。
| 工具 | 文件／工作空間 | PNG 匯出：描述檔與 ICC | 常見 Web 交付建議 |
|---|---|---|---|
| Figma | 專案色彩設定 | 切片明確選 sRGB，勿預設跟螢幕 | sRGB 8-bit；內嵌依前端政策 |
| Sketch | 畫布描述檔 | 預設設 sRGB；「同文件」須註記 | sRGB UI／行銷 |
| Affinity | 文件 ICC | 可開關內嵌；交 sRGB 要轉換 | sRGB 母檔先轉再出 |
| Photoshop | 指定 vs 轉換描述檔 | 匯出 sRGB；嵌入 ICC 依規則 | sRGB 批次先烘焙 |
| 預覽／快速查看 | 依螢幕＋內嵌 ICC | 僅抽檢 | 需與瀏覽器對照 |
批量切片與倍率請一併對照 Affinity／Sketch／Figma 批量匯出 PNG 工作流。
預覽校驗步驟（跨螢幕）
| 步驟 | 動作 | 通過標準 |
|---|---|---|
| 1 | 參考 Mac「預覽程式」開啟，查內嵌描述檔 | 與核准稿一致、無意外伽瑪偏移 |
| 2 | Safari／Chrome 置於 #FFFFFF／#0B0B0B 底 | 品牌色穩；token 色在容差內 |
| 3 | 100% 像素 與 CSS 顯示尺寸各檢一次 | 無重複縮放糊邊 |
| 4 | sRGB 外接 vs Display P3 筆電對照 | 書面已寫清對外 sRGB／內部母檔預期 |
透明通道檢查點
- Alpha 型態：Web 多用 straight；premultiplied 須管線明定。
- 邊緣暈圈：深淺底檢抗鋸齒是否灰／色圈；查填邊與扁平化。
- 透明區 RGB：勿留會在壓縮或 blend 下竄色的殘值；Web 以 8-bit RGBA 為主並與工程對齊。
③ 遠端 Mac 校驗流程（三步）
遠端 Mac可固定螢幕描述檔與系統版次，適合徹夜批量 PNG。三步：
- 鎖環境：macOS、描述檔、匯出預設版次一致；
README-color.md寫清 Display P3 母檔 →/dist內 sRGB PNG。 - 批次＋抽檢：遠端跑全批；腳本可驗尺寸／大小／Alpha，主視覺仍依上表人工看。
- manifest 簽核：檔名、寬高、位元組、色彩意圖、工具版次，供營運與前端同機重跑設計交付驗收。
大畫幅批量見 遠端 M4 批量匯出 4K PNG；連線請先讀 幫助中心。
④ 批量驗收命名與歸檔
- 目錄：
sources/p3/母檔、dist/web-srgb/簽核 PNG；可選qa/screenshots/。 - 檔名：
@2x、dark、必要時-srgb區分導出鏈。 - Manifest＋版次：CSV／JSON 含
path,width,height,bytes,colorIntent,checksum，並綁 Git 標籤或設計檔版次。
⑤ FAQ（偏色、透明邊）
問：已匯 sRGB，Windows Chrome 仍偏灰？
答：確認已「轉換」非僅標籤；查 CSS 濾鏡、透明度疊加與頁面是否混用未標記圖。
問：漸層斷階？
答：常關位元與抖動；Display P3 硬壓 sRGB 8-bit 易加重，宜高位元轉完再出 8-bit。
問：透明 Logo 深色底有淺輪廓？
答：多為合成假設、淺填邊或 Alpha 白邊；調扁平化後於純黑底依上列透明項重驗。
問：每張都要內嵌 ICC？
答：產品線一次定案；重點是全團隊同一規則，利於 PNG 色彩管理稽核。
把 sRGB／Display P3 分工寫死、表格式驗收落地後，建議以遠端 Mac 設計場景套餐固定批量匯出與簽核環境；請透過下方按鈕前往首頁、租用／購買、節點定價與幫助中心完成選型與連線。