: Color mismatching on sketch exports When exporting with sketch the colors I get are over saturated compared to the originals. See the capture below : The color mismatch is appearing in any

@Si6392903

Sorry to revive such an old thread but this is still an issue-- But I found a somewhat convoluted workaround! Fire up Zeplin, chose export colors as .clr and copy the the file into ~Library/Colors. Make a new AppleScript with "choose color". On the far right there will be a new tab with the colors from the .clr. Click on the color you want, then click the second icon from the left, the RGB sliders. Click the settings wheel and select an sRGB profile from the dropdown. The resulted RGB values should be what you want.

Happy Coloring!

Vote Up Vote Down

@Welton168

This problem has fixed (and answered) in the Sketch official doc: www.sketchapp.com/learn/documentation/other/color-management/
When export, make sure to check on ‘Save for Web’ as it will make sure to provide clean color profile images and make sure the color looks identical to the one in your sketch file.

Vote Up Vote Down

@Reiling762

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: blog.sketchapp.com/post/133932511180/colors-in-sketch

Vote Up Vote Down

@Ravi4787994

System color settings change everything

I keep mine at sRGB for some measure of browser representation. I also use a bunch of other presets and screens to test for variation. Here’s an example of sRGB vs Adobe RGB.





Variance within a screen

Your problem seems odd, though. If the variation is from your color settings, you should see it across the doc. The exported image may change depending on where you view it, but you shouldn’t be able to discern a difference between your artboard and the export panel. That’s just weird.

I think you may be looking at a bug with your particular file or the app itself. Try to recreate the behavior with other colors and documents. Check with the Bohemian guys (I usually hit them up on Twitter) and see if they can find it in the code somewhere.

Vote Up Vote Down