P3 烈焰紅
超飽和紅色
P3 蘋果綠
超飽和綠色
P3 電影橘
電影級橘色
P3 霓虹粉
超飽和粉色
P3 翡翠青
超飽和青色
P3 紫羅蘭
超飽和紫色
/* sRGB fallback */
color: #ff4500;
/* P3 增強 */
color: color(display-p3 1 0.3 0);
/* 媒體查詢偵測 */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
P3 色塊更鮮豔 → 真正 P3 支援
P3 被裁切 → 僅 sRGB 色域
專業 DCI-P3 色彩測試
透過 P3 獨有色票、sRGB 邊界視覺化和逐通道飽和度測試，精確驗證螢幕是否真正支援 P3 廣色域。
P3 獨有色票
顯示只有 P3 螢幕才能正確呈現的色彩：超飽和紅、Apple 綠、電影級橙。在 sRGB 螢幕上，這些色彩會被裁切到最接近的 sRGB 值，失去鮮豔度。
sRGB 邊界視覺化
漸層條從 sRGB 色域邊界過渡到 P3 色域極限。P3 螢幕上漸層會繼續延伸超越 sRGB 邊界；sRGB 螢幕上漸層在邊界處停止（色彩不再變化）。
CSS P3 色彩驗證
所有色票使用 CSS color(display-p3 ...) 語法呈現 — 瀏覽器原生的 P3 色彩支援。搭配 @media (color-gamut: p3) 查詢，前端開發者可為廣色域使用者提供更鮮豔的介面色彩。
什麼是 DCI-P3？
了解 P3 色域標準的起源和應用。
電影產業標準
DCI-P3 由數位電影倡議組織於 2005 年制定，最初用於數位電影放映。它覆蓋了約 45% 的人眼可見色彩，比 sRGB 的 35% 大了約 25%。
Apple 生態系統首選
Apple 從 2015 年起全面採用 P3：iMac 5K、iPhone 7+、iPad Pro、MacBook Pro 和 Pro Display XDR 都支援 P3。macOS 色彩管理完美處理 P3 內容，使其成為最成熟的 P3 生態系統。
HDR 內容標準
HDR10 和 Dolby Vision 等 HDR 格式使用 P3 作為色彩容器。Netflix、Disney+ 和 Apple TV+ 以 P3 色域製作 HDR 內容。無 P3 的螢幕無法完整呈現 HDR 色彩。
如何判斷 P3 支援
三個步驟驗證螢幕的 P3 色彩能力。
查看偵測結果
頁面載入時自動偵測瀏覽器的 color-gamut 媒體查詢。如果顯示「P3 已支援」，表示您的螢幕 + 作業系統 + 瀏覽器組合可以呈現 P3 色彩。
比較獨有色票
觀察 P3 獨有色票區域。如果這些色票比相鄰的 sRGB 對照明顯更鮮豔（尤其是紅色和綠色），表示螢幕確實在顯示 P3 延伸色彩，而非裁切到 sRGB。
檢查漸層延伸
在漸層條中找到 sRGB 邊界標記。P3 螢幕上，漸層會在標記之後繼續變得更鮮豔；sRGB 螢幕上，色彩在標記之後停止變化 — 那就是 sRGB 色域的物理極限。
P3 色彩關鍵術語
color(display-p3)
CSS Level 4 色彩函數，允許在網頁中直接指定 P3 色彩。語法：color(display-p3 r g b)，RGB 值範圍 0-1。Safari 率先支援；Chrome 111+ 和 Firefox 113+ 現已支援。
色域媒體查詢
@media (color-gamut: p3) 偵測使用者裝置是否支援 P3。在 CSS 或 JavaScript 的 window.matchMedia 中使用，為不同色域裝置實現優雅降級或漸進增強。
裁切
當 P3 色彩在 sRGB 螢幕上顯示時，超出 sRGB 範圍的值會被裁切到最接近的 sRGB 邊界值。這導致飽和度損失 — 鮮豔的 P3 橙色變成普通的 sRGB 橙色。
廣色域
泛指超越 sRGB 的色域能力。DCI-P3 是最常見的廣色域標準，其次是 Adobe RGB。Display P3 是 Apple 的螢幕版 DCI-P3，使用 D65 白點。
哪些裝置支援 P3
主流裝置的 P3 色域支援情況。
Apple 裝置
P3 支援：
• iPad Pro（全系列）：100% P3。
• MacBook Pro 2016+：100% P3。
• Pro Display XDR / Studio Display：100% P3。
Windows 螢幕
P3 支援：
• 電競螢幕（高階）：90-95% P3。
• 標準辦公螢幕：通常僅 sRGB。
• 注意：Windows 色彩管理需要 ICC 設定檔支援。
Android 裝置
P3 支援：
• Google Pixel 6+：P3 色域支援。
• 中階裝置：通常僅 sRGB 或略低。
• Android 色彩管理從 Android 10 起改善。
瀏覽器支援
色彩呈現：
• Chrome 111+：CSS P3 色彩函數支援。
• Firefox 113+：CSS P3 色彩函數支援。
• Edge：跟隨 Chromium，與 Chrome 同步支援。
前端 P3 色彩實踐
CSS P3 色彩
使用 color(display-p3 1 0.2 0.1) 實現超飽和品牌色彩。搭配 @supports 和備用值實現向後相容。
媒體查詢偵測
@media (color-gamut: p3) { } 為 P3 裝置提供增強色彩。JS 中：matchMedia("(color-gamut: p3)") 進行動態偵測。
圖片素材
為 P3 裝置提供 Display P3 色彩設定檔的圖片。使用 <picture> + 媒體查詢依裝置能力載入不同色域的圖片。
優雅降級
在 P3 值之前始終提供 sRGB 備用。CSS：color: #ff4500; color: color(display-p3 1 0.3 0); — 第二行覆蓋第一行。
常見問題
Q.瀏覽器回報「P3 已支援」但螢幕是 sRGB？
macOS 會將 P3 色彩轉換到 sRGB 螢幕，所以瀏覽器仍回報系統級 P3 支援。但螢幕物理上無法顯示 P3 延伸色彩 — 多餘的值會被裁切。此頁面的色票比較有助於驗證實際螢幕能力。
Q.P3 色彩影響頁面載入速度嗎？
不會。color(display-p3) 是原生 CSS 屬性，不需要額外的 JS 函式庫或資源。唯一可能的效能影響來自嵌入 P3 色彩設定檔的圖片，通常比 sRGB 版本略大。
Q.iPhone 截圖保留 P3 色彩嗎？
是的。iPhone 截圖和照片預設使用 Display P3 色彩空間。傳送到 sRGB 裝置時色彩會被轉換。在支援 P3 的裝置上查看這些截圖會顯示更鮮豔的色彩。
Q.為什麼要同時提供 P3 和 sRGB 值？
全球絕大多數螢幕仍是 sRGB。僅使用 P3 值意味著不支援的瀏覽器會忽略或顯示錯誤色彩。CSS 串聯讓您先寫 sRGB 備用，再寫 P3 增強 — 瀏覽器自動選擇支援的版本。
Q.螢幕的「95% DCI-P3」夠好嗎？
是的。95%+ 的 DCI-P3 覆蓋可顯示絕大多數 P3 延伸色彩。差異僅出現在極飽和的紅綠邊界區域。100% 覆蓋更多是行銷賣點 — 實際使用中 95% 和 100% 幾乎無法區分。
Q.Display P3 和 DCI-P3 有什麼區別？
Display P3 是 Apple 的變體，使用 D65 白點（與 sRGB 相同），適合螢幕。DCI-P3 使用略帶綠色的白點作為電影放映標準。兩者色域範圍幾乎相同 — 只有白點不同。
P3 色彩開發小技巧
- • CSS 語法： color: color(display-p3 1 0.3 0); — 注意 RGB 值範圍 0-1，而非 0-255。
- • 向後相容： 在 P3 值前一行始終寫上 sRGB 備用。瀏覽器自動選擇支援的規則。
- • 除錯工具： Chrome DevTools 色彩選取器已支援 P3 色域預覽和轉換。
- • 設計建議： P3 增強僅用於品牌色彩、CTA 按鈕和重點圖片 — 而非每一個色彩。