Linear gradients render differently than CSS

[benfrain]

Gradients in Sketch render differently than the same hex values exported and set as a linear-gradient in CSS, why?

I am aware that Sketch does some very odd things with display P3 colours in the colour picker (they get mapped to hex, even when they are outside sRGB colour space). However, putting that aside, I would like to know why a gradient in Sketch between pink and green seems to pass through different colours, than the same thing in CSS?

Here is the Sketch version:

Here is the CSS version (I have used oklch colours here to try and get to the same P3 colour being used in Sketch). I cannot add another image as the forum won’t let me (new user )

The Sketch one seems to pass through some purples in the middle, where the CSS does not. Is Sketch passing values through a different colour space?

[dfmedrano (Jorge)]

Hi Ben,

Thanks for sharing this report. There’s a lot to cover here and color is a vast topic, so I’ll try to summarize it first and then go into more detail.

The hex colors you export from Sketch do render as expected in CSS, as long as you also use Hex. I noticed that your Pen has the OKLCH syntax and I think this is where the issue is: the translation between the two formats produced an unexpected result, more on this later.

There are two key parts for the color syntax in CSS: gamut and color space. I’m no color expert and perhaps you know way more than me, but after digging a bit, I think this is what’s going on:

The gamut is the range of colors, and we know P3 has a wider gamut than sRGB. If you use Sketch on a P3 compatible device, you’ll see brighter colors, if you use a traditional monitor, colors will be less vivid as they’ll be rendered with the sRGB gamut.

The other piece of the puzzle is the color space, which, in short, defines how colors are plotted or determined in the selected range or gamut. So you can use the Hex color space syntax to plot colors from a P3 gamut with limitations of course.

OKLCH is a newer color space that’s now supported in CSS and designed to plot colors from the P3 gamut. This color space has a different way of plotting coordinates for colors and, in consequence, has a different syntax. As with any format, there can be some caveats and OKLCH has some, precisely with gradients.

Chroma (the “C” in OKLCH) maps hues as elevations:

And sometimes, there can be unexpected results when using specific colors in OKLCH as outlined here

To my surprise, when I use the known Hex colors from Sketch, the gradient in CSS has much vivid colors than it’s OKLCH counterpart:

 

See the Pen from the image above here

There are several, if not many tools out there to convert Hex to OKLCH. Perhaps exploring different ones can help get a better result for this gradient.

[benfrain]

Hi Jorge,

At present, Sketch has a very odd way of dealing with P3.

You can make a document P3, and colour-pick a colour, and Sketch represents that P3 colour in a HEX/RGB/HSL notation. It is effectively stretching the 0-255 range of sRGB for each R/G/B channel over the entirety of P3 colour gamut, something sRGB notation was never designed to do (to the best of my knowledge).

So, picking a HEX colour from a P3 Sketch document, that is representing a colour in P3 space, and then using that same HEX value on the web gives you a totally different colour than the colour it shows in Sketch. This because the web requires P3 in the color(display-p3 0.812 0.173 0.608) format, or a newer format like lch/lab or oklch/oklab.

However, put all that aside. Even in an sRGB Sketch document, if you make a 200x1000 image, and put a linear gradient from #CF2C9B to #39A583. That gradient looks like this in Sketch:

And like this on the web (Codepen https://codepen.io/benfrain/pen/yLwPaEj ):

Sorry, again I can not post the two grabs in this post as I am a new user.

The Sketch version goes through a nice bit of purple in the middle that the web version doesn’t and I would like to understand why?