大家好，很高兴又见面了，我是"前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

Display P3 vs sRGB？如何正确使用色值？

前言

Web 上使用的大多数颜色都是 sRGB 。 比如熟悉的 #rrggbb 、rgb(r, g, b) 语法指定的CSS颜色，其各个颜色分量以 [0, 255] 范围内的值表示。 例如，rgb(255, 0, 0) 是 sRGB 颜色空间中最饱和的纯红色。 但是 sRGB 中的颜色范围，即色域（Color Gamut或Color Space），并不包含人类视觉系统可以感知的所有颜色，同时有些显示器可以产生更广泛的颜色范围。

sRGB（Standard Red Green Blue）是由Microsoft影像巨擘共同开发的一种彩色语言协议，微软联合爱普生、HP惠普等提供一种标准方法来定义色彩，让显示、打印和扫描等各种计算机外部设备与应用软件对于色彩有一个共同的语言。

Display P3，饱和度明显高于 sRGB 的色彩

完全饱和的sRGB(左)和 Display P3（右）圆锥渐变。 在浏览器和支持 Display P3显示器上查看，右颜色会比左颜色浓

如今，市场上有许多计算机、移动设备可以显示Display P3 色域的所有颜色，并且 Web 平台在过去几年中一直在发展，以允许开发者充分利用这些显示器。

下图是在色度图上用三角形划出色彩空间所包含的色彩，明显能看出二者在包含色彩范围上的差别，即Display P3比sRGB范围更大。

图片来自：https://www.zcool.com.cn/article/ZMTIyNjM2NA==.html

WebKit 自 2016 年一直支持宽色图像和视频，去年成为第一个实现 CSS Color Module Level 4 中定义的新颜色语法的浏览器引擎，可以在给定的颜色空间中指定颜色。

目前为止，也就HTML Canvas尚未支持广色域颜色。 2D Canvas API 在宽色域显示器普及之前就已引入，但是目前它只处理绘制和操作 sRGB 像素值。 最近一项使用其他颜色空间创建Canvas上下文的提案被添加到 HTML 标准中，目前 WebKit 已经提供支持，而本文就从这里展开。

1.Display P3特征检测&浏览器支持

可以使用一些技术来检测宽色域显示和画布支持是否可用。

1.1 显示器支持

要检查显示器是否支持 Display P3 颜色需要使用色域媒体查询。

function displaySupportsP3Color() {
    return matchMedia("(color-gamut: p3)").matches;
}

目前matchMedia方法已经受到大多数浏览器的原生支持。从下图可知，Chrome从9版本就已提供这个方法。

matchMedia：媒体查询是否适用于文档的 API

1.2 浏览器画布颜色空间支持

要检查浏览器是否支持宽色域画布，可以创建一个Canvas并检查生成的颜色空间。

function canvasSupportsDisplayP3() {
    let canvas = document.createElement("canvas");
    try {
        // 如果支持 colorSpace 选项，但不满足 Display P3 支持的系统要求（最低 macOS 或 iOS 版本）
        // Safari 会抛出 TypeError。
        let context = canvas.getContext("2d", { colorSpace: "display-p3" });
        return context.getContextAttributes().colorSpace == "display-p3";
    } catch {
    }
    return false;
}

如上所示，可以通过获取context.getContextAttributes().colorSpace == "display-p3"的值来判断浏览器是否支持display-p3。

1.3 CSS Color Module Level 4 语法支持

检查浏览器是否支持在画布上指定宽色域颜色，可以直接设置颜色并查看浏览器是否支持。

function canvasSupportsWideGamutCSSColors() {
    let context = document.createElement("canvas").getContext("2d");
    let initialFillStyle = context.fillStyle;
    context.fillStyle = "color(display-p3 0 1 0)";
    // 判断浏览器是否会忽略
    return context.fillStyle != initialFillStyle;
}

2.在宽色域画布上绘制渲染上下文

Canvas的getContext 方法接受一个选项来设置画布后备存储的颜色空间。

默认颜色空间是 sRGB（避免对现有内容进行颜色空间转换的性能开销），也可以使用display-p3。注意：可以使用任何受支持的 CSS 颜色语法指定填充和描边样式。

let position = 0;
for (let green of [1, 0]) {
    for (let blue of [1, 0]) {
        for (let red of [1, 0]) {
            context.fillStyle = `color(display-p3 ${red} ${green} ${blue})`;
           // 填充样式
            context.fillRect(position, position, 40, 40);
           // 填充样式
            position += 20;
        }
    }
}

在 sRGB（左）和显示 P3（右）画布上用作填充样式的显示 P3 颜色。左侧的颜色被限制在 sRGB 色域内

任何使用画布颜色空间之外的颜色绘图都将被限制，以使其处于色域中。 例如，在 sRGB 画布上用颜色 (display-p3 1 0 0) 填充矩形最终将使用完全饱和的 sRGB 红色。 同样，在 Display P3 画布上绘制颜色 (rec2020 0.9 0 0.9)，在 Rec.2020 色彩空间中几乎全是洋红色，即使用相近颜色 (display-p3 1.0 0 0.923) 来填充，因为这是 Display P3 色域中最相似的。

const COLORS = ["#0f0", "color(display-p3 0 1 0)"];
for (let y = 20; y < 180; y += 20) {
    // 色域外采用相似颜色填充
    context.fillStyle = COLORS[(y / 20) % 2];
    context.fillRect(20, y, 160, 20);
}

sRGB(左)和Display P3(右)画布上交错的Display P3和sRGB条纹。因限制在色域内，两种绿色阴影在sRGB画布难区分

广色域颜色可用于所有Canvas绘图基元，比如：

• 作为矩形、路径和文本的填充和描边
• 渐变节点
• 阴影颜色

3.sRGB 和 Display P3 中的像素操作

getImageData 和 putImageData 可用于获取和设置宽色域画布上的像素值。 默认情况下，getImageData 将返回具有画布颜色空间中像素值的 ImageData 对象，但可以指定与画布不匹配的显式颜色空间，执行转换。

let context = canvas.getContext("2d", { colorSpace: "display-p3" });
context.fillStyle = "color(display-p3 0.5 0 0)";
context.fillRect(0, 0, 100, 100);

let imageData;

// 获取画布颜色空间（显示 P3）中的 ImageData
imageData = context.getImageData(0, 0, 1, 1);
console.log(imageData.colorSpace);  
// "display-p3"
console.log([...imageData.data]);   
// [128, 0, 0, 255]

// 显式获取 Display P3 中的 ImageData
imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "display-p3" });
console.log(imageData.colorSpace);  
// "display-p3"
console.log([...imageData.data]);   
// [128, 0, 0, 255]

// 获取图像数据转换为sRGB
imageData = context.getImageData(0, 0, 1, 1, { colorSpace: "srgb" });
console.log(imageData.colorSpace);  
// "srgb"
console.log([...imageData.data]);   
// [141, 0, 0, 255]

ImageData 构造函数同样采用带有 colorSpace 键的可选项对象。

let context = canvas.getContext("2d", { colorSpace: "display-p3" });
// 创建一个 ImageData 并用完整的 Display P3 黄色填充
let imageData = new ImageData(10, 10, { colorSpace: "display-p3" });
for (let i = 0; i < 10 * 10 * 4; ++i)
    imageData.data[i] = [255, 255, 0, 255][i % 4];
context.putImageData(imageData, 0, 0);

当使用不同颜色空间的颜色绘制形状时，ImageData 和目标画布颜色空间之间的任何不匹配都会导致 putImageData 执行转换并可能限制生成的像素。

4.序列化画布内容

Canvas DOM 元素上的 toDataURL 和 toBlob 方法生成带有画布内容的光栅图像。

const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL();
// toDataURL
canvas.toBlob((blob) => { /* … */ }, 'image/jpeg', 0.95); 
// JPEG at 95% quality

在 WebKit 中，当在 Display P3 画布上调用时，这些方法会在生成的 PNG 或 JPEG 中嵌入适当的颜色配置文件，从而确保保留所有颜色范围。

5.绘制宽色域图像

与 putImageData 一样，drawImage 方法将在绘制颜色空间与画布颜色空间不同的图像时执行所需的任何颜色空间转换。

putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
// putImageData方法
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
// drawImage方法

img 引用的光栅图像使用的任何颜色配置文件，以及视频（无论是视频文件还是 WebRTC 流）引用的视频中的任何颜色空间信息，都将在绘制到画布时得到恰当处理。 这可确保在绘制到色彩空间与显示器（显示 P3 或 sRGB）相匹配的画布时，源图像/视频和画布像素看起来相同。

6.总结

本文只是告诉大家什么是Display P3？为什么要使用Display P3？因为笔者不是这方面的专家，很多内容也就浅尝辄止。但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。

参考资料

https://webkit.org/blog/12058/wide-gamut-2d-graphics-using-html-canvas/

https://caniuse.com/?search=matchMedia

https://baike.baidu.com/item/sRGB/1350619?fr=aladdin

https://developer.aliyun.com/article/787589