Right now, it seems like the only way to use P3 color in Chrome is to export a PNG from a tool like Sketch or Photoshop (unfortunately, no Figma support yet). This background-image hack works, but do you have a sense for when we'll be able to use P3 colors without PNGs? Or maybe I'm missing something.
Thanks! You’re not missing anything. :)
Yeah, Display P3 support on the web via CSS isn’t in a state where you can rely on it. It’s easy to create a fallback sRGB colour, but if you really want a colour to be Display P3, using an image is the most reliable option (colour spaces in PNGs have really good support across all modern browsers).
That’s part of my motivation in writing the article and creating the action — colours that fall within sRGB can just use normal CSS colours, and things that fall outside sRGB can be special cased using a variety of available techniques.
Exporting an image with a proper Display P3 profile is a bit tricky. As far as I’m aware, Photoshop, Affinity Designer, Affinity Photo and a few other apps can do it. I do not think Sketch and Figma can.
Old thread, but replying in case someone comes across this searching for P3 and Figma / Sketch.
Sketch allows for exporting p3 images. I've been using them on every platform without issue.
Figma now has this plugin to export p3 assets: