I am maintaining a simple application that is using puppeteer with headless Chromium to take screenshots. One of requirements is that we take a screenshot with background color with wider color gamut than sRGB.
We managed to run headless chromium instance with forced color profile display-p3-d65
, but there seems to be no way to actually declare color in css outside of standard sRGB gamut (e.g. color()
is supported by WebKit (and Safari), but not by Chromium and Chrome).
Is there a way to actually declare colours in css with wide gamut and render it in chromium?
The spec for CSS colors ICC profile and stuff is just out of drafts. Support for P3-D65 (Apple uses that with sRGB parametric ("para") curve, it is the same as 1DLUT of v2 ICC sRGB profiles) is limited in Chrome.
Just assign this to a file on the fly to the image, https://cielab.xyz/thumbnails/Display%20P3.icc. Simple. BUT! PLEASE note that negative XYZ value (negative Z value for the red primary) is present in such a profile, because XYZ values in ICC profiles before v5 are always chromatically adapated to D50 instead of D65 used in Display P3, that is not supported by Chrome or Firefox, besides on MacOS platforms.
Also for PNG I recommend writing gAMA and cHRM chunks (iCCP with ICC profile chunk overrites those, but still).
Safari already supports it, including Display P3 CSS.