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 按钮和重点图片 — 而非每一个色彩。