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

  • This is a real problem indeed... The fastest solution I found is to use a web image optimizer (ImageOptim) to erase all embedded image profiles after slicing. – Guillaume Gautier Jun 16 '16 at 9:53

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.

sRGB

enter image description here

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.

  • Thanks for the reply, unfortunately that does not work for me, I can't even describe the behavior of the color management as it is so random. For instance, if I open the exported image in chrome it has the right colors and when i start switching desktop, the color suddenly change to a more saturated version. See the video here cl.ly/1e1n102T2V2Q – alxscms May 5 '15 at 9:52
  • That is weird, but it's certainly not Sketch. You have an OS-level issue. Have you tried the same image on a different machine? At the very least, log in to a different account and see if it persists. – plainclothes May 5 '15 at 15:28

This problem has fixed (and answered) in the Sketch official doc: https://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.

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!

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.