CSS 中使用 Display-P3 的广色域色彩

2020 年 3 月 2 日

作者：Nikita Vasilyev

Display-P3 色彩空间包含 sRGB 中无法获得的鲜艳色彩。

CSS 颜色模块级别 4 引入了在网络上使用 Display-P3 色彩空间的语法

color: color(display-p3 1 0.5 0)

以前可用的语法在 sRGB 色彩空间中定义颜色。hsl(42, 70%, 50%)、rgb(3, 5, 11)、#abc——所有这些颜色都在 sRGB 色彩空间中。

Display-P3 是 sRGB 的超集。它大约大 50%

白线表示 sRGB 的边界。其右上方的所有颜色都是 sRGB 中不可用的 Display-P3 颜色。请注意绿色是如何大幅扩展的，而蓝色则没有那么大。

浏览器支持

自 2016 年以来，WebKit 已支持 Display-P3 颜色 (r207442)。以下浏览器支持 Display-P3 颜色

macOS Mojave 及更高版本上的 Safari
iOS 11 及更高版本上的 Safari

截至 2020 年 1 月，WebKit 是唯一支持 Display-P3 颜色的浏览器引擎。

优雅降级

提供回退方案的一种方法是，在此之前包含具有 sRGB 颜色的相同属性

header {
    color: rgb(0, 255, 0);
    color: color(display-p3 0 1 0);
}

目前，WebKit 以外的浏览器将 color(...) 解析为无效值。带有无效值的 CSS 属性会被浏览器忽略。

或者，您可以使用 @supports 功能查询。这在定义颜色变量时特别有用

/* sRGB color. */
:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

header {
    color: var(--bright-green);
}

硬件支持

iPhone 7 及更高版本
MacBook Pro（2016 年起）
iMac（2015 年起）
iPad Pro（2016 年起）
LG UltraFine 5K 显示器

还有许多设备支持 Display-P3 色彩空间，但目前没有浏览器支持 CSS 中的 Display-P3

Google Pixel 2 XL
Google Pixel 3
HTC U11+
一加 6

更多支持 Display-P3 的设备列在维基百科上。

硬件支持可以通过 CSS 中的媒体查询检测到

@media (color-gamut: p3) {
    /* Do colorful stuff. */
}

以及 JavaScript

if (window.matchMedia("(color-gamut: p3)").matches) {
    // Do colorful stuff.
}

Web 检查器

从 Safari 技术预览版 97 开始，Web 检查器包含了支持 P3 的颜色选择器

白线描绘了 sRGB 色彩空间的边界。其右上方的所有颜色仅在 Display-P3 色彩空间中可用。

右键单击颜色方块会显示转换为 sRGB 色彩空间的选项

当颜色在 sRGB 色彩空间内时，显示“转换为 sRGB”菜单项。当它在 sRGB 外部时，显示“钳制到 sRGB”。

Web 检查器还包括将 sRGB 颜色转换为 Display-P3 的上下文菜单

结语

CSS 具有在 Display-P3 色彩空间中定义颜色的语法，其中包含以前在 sRGB 中无法获得的鲜艳色彩。许多现代显示器覆盖 100% 的 P3 颜色标准。Web 检查器现在包含了支持 P3 的颜色选择器。

您今天就可以开始在您的网站和 Web 视图中使用 Display-P3 颜色。只需几行代码即可提供向后兼容的 sRGB 颜色。

如果您有任何反馈，请在Twitter 上联系我。您也可以将一般性评论发送到 @webkit Twitter 账户。