How do you work around wrong color rendering in Sketch?

7 years ago from , UI designer @SKIPJAQ

With Sketch becoming more and more popular, I was wondering if anyone came up with some solution for Sketch rendering hex colors wrong on output?

(if you didn't notice) - Make a shape fill #30a4d1, export (with or without profile) and check the hex values in Photoshop or any other tool - it'll be different in each case (both times noticeably different for me).

I checked with BohemianCoding couple times already, but they don't seem to be able to solve it soon. So with many designers using Sketch for client work now, I really hope there's some trick I'm missing ...



  • Cristian MoiseiCristian Moisei, almost 4 years ago

    3 years later and the issue is still there.

    1 point
  • Andrew CornettAndrew Cornett, 7 years ago

    Found this out from my roommate recently. Sadly could not figure it out and he decided to switch back to Photoshop :-(

    1 point
    • Petr Vlk, 7 years ago

      For projects that need accurate output, I reverted to Illustrator.

      Fortunately there are plenty of cases where mockups can differ a bit, as the implementation will be done with css, using proper hex codes.

      0 points
  • Ryan Bollenbach, over 3 years ago

    I got this sorted out and it's a little more simple than I thought.

    sRGB is a standard color profile on many devices so, switch your macbook to it and you'll be in good shape and better shape for mobile.

    Easy! lol

    0 points
  • Brian James, almost 4 years ago

    I thought I was fucking crazy! My iOS simulator is always way off from Sketch. I have a solution that's worked for me for a while now. Download the free HexColor Mac app and always use its dropper tool as the real hex values.

    Below is the same pixel observed from HexColor and Sketch. 3 different fucking hex codes for the same color! Sketch's is just wrong so you can ignore it. Strangely, both hex codes from HexColor are necessary. The one in the top right, "Hex Color #", is what iOS will use. The bottom "Web #" hex is what to use for web (css).

    It's a pain in the ass, but at least its fixable.

    0 points
  • Patrick LoonstraPatrick Loonstra, 5 years ago

    I have this issue, and although this thread is 2 years old, it can be handy to post this link from the Bohemian team itself.


    0 points
  • Kevin WhiteKevin White, almost 6 years ago

    This is happening to me as well. I've tried different options with exporting out of sketch and svg, png, eps all have this issue.

    Check out the difference here: https://www.dropbox.com/s/rnvme9gqrccn7gm/Screenshot%202015-06-04%2013.47.48.png?dl=0

    Also, I read that it may occur from the color preferences in illustrator. Apparently there is a setting that might fix this. Anyone know how to do this?

    0 points