P3 廣色域 vs sRGB 色域差異：對網站設計與使用者體驗的影響
在網站製作與品牌視覺中，「螢幕色彩」其實比多數人想像的重要。
你可能曾發現：
👉 在 iPhone 或 Mac 上看起來很漂亮的圖片，
👉 換到一般 PC 螢幕或 Android 裝置卻突然變暗、變灰、變不飽和？
這多半就是 P3 廣色域（Display-P3） 跟 sRGB 色域 的差別所造成。
本篇文章整理兩者的差異，並從「網站呈現」、「圖片優化」、「設計與前端」的角度出發，讓企業能更清楚如何準備網站素材。
一、P3 與 sRGB 是什麼？差別在哪？
sRGB（最通用的標準色域）
-
全球 90% 裝置使用的色彩標準
-
包含大部分 Windows PC、一般 notebook、辦公螢幕
-
社群平台（FB/IG/LINE）圖片預設都以 sRGB 呈現
-
顏色較保守、飽和度較低
👉 優點：通用、不容易色偏、最安全
👉 缺點：無法呈現非常飽和或豐富的顏色
P3 廣色域（Apple 裝置主力色域）
-
可顯示比 sRGB 多 25% 左右的顏色
-
常見於 iPhone、iPad、MacBook、部分高階螢幕
-
顏色更飽和、亮度感更強、紅綠色特別亮眼
👉 優點：畫面漂亮、色彩豐富、照片更亮眼
👉 缺點：在 sRGB 裝置上會被「壓色」，看起來變暗或偏灰
二、這跟網站有什麼關係？
1.圖片在不同螢幕上會有不同效果
如果你在 iPhone（P3）上調的圖片很亮很飽和→ 到大部分 PC（sRGB）上就會變暗、變灰。
尤其常發生於：
-
產品照
-
人像膚色
-
品牌主色
-
漸層背景
-
深色背景網站
對網站來說，這是最常見的色差來源。
2.網站設計稿會在不同螢幕呈現不同結果
設計師有不少喜愛mac的族群會在 Mac（P3）工作，
但客戶可能在 Windows（sRGB）檢視，
結果就會出現：
-
設計稿顏色比網站看起來更亮
-
版頭圖在客戶螢幕看起來「比較灰」
-
背景色、按鈕飽和度都不一致
這不是工程師做錯，是 螢幕色域不同造成的自然差異。
3.網站前端需要以 sRGB 作為基準
因為大部分使用者的螢幕都屬於 sRGB，
網頁的圖片、色碼（HEX）、漸層都需要以 sRGB 為基準。
如果你直接使用 P3 色域的素材，上線後會出現問題：
-
顏色被自動壓縮
-
偏色
-
飽和度下降
-
與設計稿不一致
這就是為什麼前端都會要求：
👉 圖片請輸出成 sRGB 色域
👉 顏色請使用 HEX / RGB，避免使用 P3-only 色彩
三、網站製作時我們怎麼處理 P3 vs sRGB？
1. 所有網站素材都會統一轉成 sRGB
目的：
避免顏色在不同裝置上產生巨大落差，確保「所有裝置都能看到最接近的效果」。
2. 設計稿（Figma / Sketch）也會提醒使用 sRGB 安全色系
Figma 的亮度有時會偏高（尤其 Mac），
我們會協助：
-
校正關鍵色系
-
確定按鈕色不會「偏灰」
-
檢查圖片在 sRGB 裝置的呈現
3. 重要圖片會做「雙裝置檢查」
尤其是：
-
banner
-
品牌主視覺
-
產品照
我們會在 Mac（P3）＋ Windows（sRGB）都檢查一次，避免顏色跑太多。
4. 如果客戶使用高飽和品牌色，我們會提供調整建議
因為過飽和色到了 sRGB 螢幕會被壓縮，我們會建議：
-
選擇相對更通用的 HEX 色
-
避免太亮的綠色或紅色
-
避免過度依賴漸層亮度
四、客戶最常問的一句話
「為什麼我的 iPhone 看起來這麼漂亮，電腦就變灰？」
因為：
你在 iPhone 上看到的是 P3 廣色域，加亮度加飽和度的版本 但大部分使用者（含你的客戶）看到的是： sRGB 的正常亮度版本
這不是網站壞掉，也不是修圖修錯，是螢幕本身的顯示差異。
五、總結
-
P3＝顏色鮮豔、亮眼、漂亮（蘋果裝置為主）
-
sRGB＝最通用、最穩定、所有網站都以它為標準
做網站時，所有素材最好以 sRGB 為基準製作，才能確保無論用什麼裝置，網站色彩都能一致、穩定。
