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.