12.10.2022 0 comments

Display-p3, Safari and Sketch

A whole new gamut of color awaits us in modern browsers, but currently moving those colors from Sketch to CSS is a little fraught.

You should be aware that right now, Safari is way ahead when it comes to the support of modern color in CSS. You can’t see these colors in Chrome or Firefox. Also Figma is currently unable to do anything with Display-p3. Sketch supports working with Display-p3 but I’m not sure it handles it in a sensible way. That’s the crux of this post.

Fair warning, much of what follows are conceptual ways of talking about color. I lack the mathematical expertise to explain the real in-depth nature of different color spaces but for the sake of what follows, that should not matter.

Display-p3 and Safari

Imagine a line with all the sRGB colors of the rainbow you can express in CSS from left to right; the colors you currently represent with hex, rgb() or hsl() functions.

These colors all get laid out left to right. Something like this.

Imagine this is a representation of the current color space you are used to working in; sRGB.

Now, suppose I showed you a similar representation of a different color space; Display-p3. This line would need to be longer, because it contains all of the sRGB gamut, and more besides.

Let’s suppose next to our sRGB line it looks like this – again, this is not an accurate representation, for illustrative purposes only!:

Now in terms of how we can express those colors in Display-p3, they still get expressed as some combination of Red, Green and Blue. However in CSS, even though these new colors can be expressed with some amount of red, green and blue, we don’t use hex, or the rgb and hsl functions. Those remain mapped to sRGB. Instead, we pass the color() function, tell it we want display-p3, and then tell it how much red, green and blue we want. Each color as a decimal value. So the greenest green that Display-p3 can show us is expressed as color(display-p3 0 1 0) .

There are other color formats that can express colors in the Display-p3 gamut such as lch() and oklch() but we won’t concern ourselves with that here.

You can see the disparity between sRGB and Display-p3 for a single color in the Safari color picker. It looks like this:

Sketch – what gives?

Now, as I mentioned at the top, we can work with these new Display-p3 colors in Sketch. You can change the color profile in the Canvas tab of Preferences. Then any new document will use that profile. If you just do that, I think what happens next is more confusing.

Here is the thing that caused some colleagues and myself some head scratching…

When you create a new document in the new Display-p3 color profile, when you choose the greenest green, Sketch still expresses it as rgb(0 255 0). And at that point, your humble author was confused, because I wanted, say, the greenest green, and Sketch tells me that is rgb(0 255 0) , but when I put that in CSS, I get, as you might expect, the greenest green that sRGB can express. Not the new super-duper, eye-watering color I want to see!

What’s going on? Turns out that Sketch is taking the color gamut of Display-p3 and overlaying a 0-255 scale over each red, green and blue (rather that the 0-1 scale that Safari is using). So, while we are in a Display-p3 color profile in Sketch, something like rgb(0 255 0) is a different color than when we are in a sRGB color profile. Which isn’t very useful!

Now, if you had instead, converted a document, by going to Document Settings and changing the canvas, you can see a dialog that explains what is going on a little better. It gives you the option between ‘Assign’, which would apply the current RGB values to the selected profile (the mapping colors thing I described above), or ‘Convert’, which would try to keep the colors looking at they already are, but shifting the values to where they would be in the new color space.

How do we get the right Display-p3 values from Sketch?

Whether Sketch is doing the ‘right’ thing here is up for debate. Now I understand what it is doing, it does make some sense, but I don’t know of anywhere where expressing Display-p3 in a rgb() format is done. Certainly, it is no use in CSS. We need to do a conversion, which is mercifully simple. Take your value from each channel and divide it by 255. So, our greenest green would be 255 / 255=1. Something like 240 from Sketch would be 240 / 255=0.94117647. Do that for each red, green and blue value and you are good to go.

Summary

We spent a few hours trying to get to the bottom of what Sketch was doing. Hopefully this summary will save you the same head scratching. I’d like to see Sketch adopt a color picker similar to the one in Safari, as the current implementation is hella confusing.

Thankfully, unlike much to do with color conversions, converting the values Sketch shows you to something you can use in CSS only requires a level of mathematics that even I can handle!

If this post was useful, Say thanks with a coffee. Every donation helps keep me going!