Headless Chromium下CSS广色域颜色声明及渲染问题咨询

方案1：升级Chromium/Puppeteer到支持CSS color()函数的版本 #

• Chromium 从111版本开始已经默认支持CSS Color Level 4规范中的color()语法，原生支持display-p3色域颜色声明，你可以直接在CSS中按如下格式写广色域颜色：

background-color: color(display-p3 0.95 0.1 0.3 / 1);

• 配套的Puppeteer最低需要升级到v19.7.0版本，该版本内置的Headless Chromium已经是111+版本，无需额外开启实验性flag即可正常渲染广色域颜色。

方案2：兼容旧版本Chromium的替代实现 #

如果你受环境限制无法升级Chromium版本，可以用纯色广色域图片作为背景实现需求：

• 提前生成1px尺寸的display-p3色域纯色PNG图片
• 将图片转成base64编码后直接写入CSS的background-image属性，按需求设置平铺即可
• Chromium对图片文件的广色域支持远早于CSS color函数，即使是旧版本也可以正确识别PNG内嵌的色彩配置，渲染出sRGB色域外的颜色。

验证注意事项 #

截图输出后可以用专业色彩检测工具验证色彩空间与色值是否符合预期，避免因Chromium启动参数配置错误导致广色域颜色被压缩映射回sRGB色域。

内容的提问来源于stack exchange，提问作者iCosic