Color mismatching on sketch exports

When exporting with sketch the colors I get are over saturated compared to the originals. See the capture below :

color mismatch

The color mismatch is appearing in any software that I use to open it. The export can be any file type and the problem occurs.

When I import my exported image in sketch, Sketch shows it with the original colors.

I did some research but could not find anything relevant. Could this come from the color profiles of my mac ? (I tried to make a new one but this didn’t change anything). Thanks for your help


The developers are aware of the issue but aren’t willing to fix it, they consider it a ‘feature’.

When we export an image, we interpret our color values in the sRGB colorspace. We also save the color space in the metadata, unless you have ‘Save for Web’ checked in the export panel. Regardless of that setting though, the intent has been to save with sRGB, which works nicely with Safari as it interprets all images as being saved with sRGB in the first place. If you would also open the image in Preview, it would recognize the sRGB profile and render it as close to Safari as possible. We believe this way we get the most consistent color representation possible.

Sounds sensible. The problem is that for some some reason they don’t render the actual workspace using sRGB. Because that’s ‘simpler’ (for them, I assume). They render it using your systems colour profile, which, if calibrated, won’t be sRGB.

So what does Sketch do? When you pick a color in Sketch we only store the RGB values. When we render to the screen we interpet [sic] those values using the color space of your monitor.

Which is an obvious flaw to me. Software for designing content intended for a browser, that doesn’t render like a browser.

So basically anyone with a calibrated screen can’t use this software if they care about the accuracy of the colours they’re working with. The only option is to set your screen’s profile to sRGB. I have to compensate my macbook’s screen because it leans too heavily on the blue end of the spectrum, so this isn’t an option for me – it would be completely unworkable – the colours would end up looking different to what I expect either way. Regardless, most professional designers will (and should!) calibrate their screens. So there seems to be a disconnect between the developers of the software and the community they’re developing for.

And unless all you use your machine for is web work, it’s not great advice to leave your monitor colour profile at sRGB. It’s a pretty limited colour space, as indicated by the chart in the source link.

What’s more, their claim that:

if you use the same RGB values in your artwork in Sketch as you use in the CSS on your website, the colors will match.

Is kind of true. I actually found that even when using sRGB everywhere, and re-colour picking my whole palette, there was still a difference between the colour in the exported image, and the RGB values stated in Sketch. (at least when viewed in Chrome). The CSS defined colour, and the Sketch defined colour where indeed identical, but the exported image with the same colour (exported with sRGB monitor profile and with ‘Save for web’ selected) was ever so slightly different.

I’m personally not sure how to move on with using Sketch. I like the software, but this is such a basic and fundamental oversight, and it’s causing real friction in my workflow.


Source : Link , Question Author : alxscms , Answer Author : Nathan Hornby

Leave a Comment