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 显示器才能正确显示的颜色：超饱和红、苹果绿、电影级橙色。sRGB 显示器上这些颜色会被裁剪为最接近的 sRGB 色值，失去鲜艳度。
sRGB 边界可视化
渐变条从 sRGB 色域边界过渡到 P3 色域极限。P3 显示器上你能看到渐变在 sRGB 边界之后继续延伸；sRGB 显示器上渐变会在边界处停止（颜色不再变化）。
CSS P3 色彩验证
使用 CSS color(display-p3 ...) 语法渲染所有色块。这是浏览器原生的 P3 色彩支持方式。搭配 @media (color-gamut: p3) 查询，前端开发者可以为宽色域用户提供更鲜艳的界面色彩。
什么是 DCI-P3？
深入了解 P3 色域标准的起源和应用场景。
电影行业标准
DCI-P3 由数字电影倡议组织（Digital Cinema Initiatives）于 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+ 的 HDR 内容均以 P3 色域母版制作。不支持 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+ 也已支持。
Color Gamut 媒体查询
@media (color-gamut: p3) 可以检测用户设备是否支持 P3。在 CSS 或 JavaScript 的 window.matchMedia 中使用，实现针对不同色域设备的优雅降级或渐进增强。
Clipping（色彩裁剪）
当 P3 色彩被显示在 sRGB 显示器上时，超出 sRGB 范围的色值会被裁剪到最近的 sRGB 边界值。这导致颜色饱和度丢失，鲜艳的 P3 橙变成 sRGB 的普通橙。
Wide Gamut（广色域）
泛指超出 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 和 fallback 色值确保向后兼容。
媒体查询检测
@media (color-gamut: p3) { } 为 P3 设备提供增强色彩。JS 中用 matchMedia("(color-gamut: p3)") 动态检测。
图片资源
为 P3 设备提供 Display P3 色彩配置文件的图片。使用 <picture> + media 查询按设备能力加载不同色域的图片。
优雅降级
始终在 P3 色值前提供 sRGB fallback。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 fallback 再写 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 fallback，浏览器会自动选择支持的规则。
- • 调试工具： Chrome DevTools 的色彩选择器已支持 P3 色域预览和转换。
- • 设计建议： 只在品牌色、CTA按钮、关键图片上使用 P3 增强，而非全部颜色都换成 P3。