8

What color profile do you use on your monitors for design work?

over 6 years ago from , UX Designer

Hi all, I've recently realized that the colors on my Macbook Air's monitor and the colors on the external display connected to the monitor are different! The colors on the mac are more saturated, but are not the ones that I've intended it to be.

Here are two images - This is the .png file when opened using Preview while this is the design file's screenshot in Sketch

Both the images are viewed through Preview app. I've used Sip to pick colors from what Preview shows me. The screenshot of the artboard in Sketch shows the intended HEX value, while the one on the Air shows a saturated, incorrect HEX value!! Surprisingly, if the image is opened in a browser, it renders the color accurately. Also, if the .png file is viewed on an external monitor through the Preview app, it renders the intended HEX value. This led me to believe that there is a color profile inconsistency here, rather than just some glitch with the Preview app!

For this reason, I'm wary about sending my designs to a developer and ask them to pick colors. I just give them the HEX values for now.

Would like to know how to approach this problem of mine. If indeed the color profile is the problem, I was wondering what is the best color profile to use when doing design work (I'm interested purely in digital design and not print design).

Thanks in advance.

15 comments

  • Dirk HCM van BoxtelDirk HCM van Boxtel, 6 years ago (edited 6 years ago )

    I don't touch color profiles because:

    • I don't understand them (never paid enough attention to how they work, what they do, etc)
    • I've never had issues with them
    • I'm a believer in using defaults wherever I can because someone else, somewhere, put a lot of time into thinking about what should be the default, and why.

    If you'd be so inclined, you could reword those as "fear, ignorance and laziness".

    And with all those powers combined, I am Captain Efficiency.

    With all your powers combined, I AM Captain Efficiency!

    .edit: I feel obligated to mention that parts of this post are to be digested with a side of salt.

    15 points
  • Pierre de MillyPierre de Milly, over 6 years ago

    Seems black and blue to me. Is it supposed to be white and gold?

    10 points
  • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

    Both the images are viewed through Preview app.

    That'll be your first problem. Preview treats untagged images as sRGB (by “untagged”, I mean images that have been saved without an ICC Color Profile attached). That means it’ll convert from sRGB to your display’s profile, changing the values (an attempt to make the colours appear as intended, based on the source file being sRGB).

    As well as changing the values, color profile conversion often leads to rounding errors, which manifest as gradient banding, and clipping. Both highly undesirable.

    I've used Sip to pick colors from what Preview shows me.

    Sip looks nice, but I haven’t used it much.

    I can vouch for Digital Color Meter (in your /Applications/Utilities folder), provided it is set to Display native values.

    Surprisingly, if the image is opened in a browser, it renders the color accurately.

    I assume you’re using Chrome. Chrome treats untagged images as device RGB native, and keeps the values the same.

    Safari treats untagged images as sRGB.

    I beleive Firefox also treats untagged images as sRGB.

    So, both will do a conversion from sRGB to your display’s color profile.

    For this reason, I'm wary about sending my designs to a developer and ask them to pick colors. I just give them the HEX values for now.

    Picking colours from screen can be a bit tricky, due to the behaviours noted above. If I need to pick colours, I only use Photoshop. Chrome would also be ok, but it’s difficult to know if the behaviour will change in the future.

    If indeed the color profile is the problem, I was wondering what is the best color profile to use when doing design work (I'm interested purely in digital design and not print design).

    If you’re using an Apple laptop and Apple display, my advice would be to not touch their color profile or setup.

    If you’re using a different display, you probably want to calibrate as closely as you can to sRGB. sRGB is what Apple targets for their Mac and iOS devices.

    If you’re using Photoshop or Illustrator, here’s my advice on how to set them up: Colour management and UI design

    It’s unfortunate, but color management for screen design is often way harder than it needs to be.

    9 points
    • Braden HammBraden Hamm, over 6 years ago

      Your thorough comments are always great.

      Thanks for the info.

      0 points
    • Vinay ChilukuriVinay Chilukuri, 6 years ago (edited 6 years ago )

      Dear Marc, Thank you very much for your comprehensive reply. You article was one of the first things that I've read when I've encountered this problem and searching for solutions on the internet. :)

      I will check the Digital Color meter and post my findings. Thank you for this suggestion. And, yes, I was using Chrome and Firefox Developer Edition to check the colors of the design files.

      My main problem with the inconsistency in color profiles is I don't have an Apple monitor (both at work and in my personal environment). That makes me want to see the consistent colors atleast in my environment first before sending these files to developers.

      The second main problem in this context is I don't use Photoshop for design. I use Sketch. There is an option in Sketch when you export that asks if you want to include/discard 'Color profile and EXIF metadata'. However, I haven't found the difference in the color rendering using this option with the Preview app. As you have mentioned, Preview treats untagged images to be in sRGB color space, however with this option in Sketch, Preview still reports the same inconsistent behaviour (Again, have picked the colors using Sip. Will report the findings with Digital color meter)

      I now think, I should ask developers to open the design files in Chrome if they have to pick the colors, because not everyone uses a Mac at work. Or, perhaps, I should give the intended HEX values.

      0 points
      • Marc EdwardsMarc Edwards, 6 years ago

        My main problem with the inconsistency in color profiles is I don't have an Apple monitor (both at work and in my personal environment).

        Ok. That might not be a problem. If you can, I’d set it up as sRGB, if it’s not already.

        That makes me want to see the consistent colors atleast in my environment first before sending these files to developers.

        Some consistency is impossible, due to the way Preview and some apps handle image files that don’t contain ICC profiles. There’s not much that can be done about it.

        The second main problem in this context is I don't use Photoshop for design. I use Sketch.

        From what I've seen, Sketch works how I’d like and expect for a screen design tool. I haven’t done much testing though.

        There is an option in Sketch when you export that asks if you want to include/discard 'Color profile and EXIF metadata'

        I think that option is just for embedded images, not vectors etc?

        Preview treats untagged images to be in sRGB color space, however with this option in Sketch, Preview still reports the same inconsistent behaviour (Again, have picked the colors using Sip. Will report the findings with Digital color meter)

        I think the issue is Preview. If you’re trying to read the values contained within a file, without sRGB → display profile conversion, you can’t use Preview.

        Maybe we’ll have to build an image previewer one day soon. It’s pretty maddening.

        I should ask developers to open the design files in Chrome if they have to pick the colors, because not everyone uses a Mac at work. Or, perhaps, I should give the intended HEX values.

        Both good options. :) I always supply color values, because this stuff can be difficult, and I don’t want to risk someone else using a method that will give incorrect results.

        1 point
  • Spencer HoltawaySpencer Holtaway, over 6 years ago

    Native Display profiles for Macbook and Thunderbolt monitor.

    "Do not color manage this document"

    1 point
  • Debashish M, over 2 years ago

    Now Im confused what should I do ? What is the right profile for iMac and sketch app?

    0 points
  • Pedro Pimenta, over 6 years ago

    This question comes up every 2 weeks on here and I always give the same answer:

    If you do digital design (i.e. things that users will see and use on a screen) just forget about it. In fact, you should have a bad/regular monitor by your side and periodically check if your content is contrasted enough.

    People will see it differently regardless of what you do to your monitor.

    In fact, I remember the iPhone 4 had different screen manufacturers, one was colder than the other and even if you fine-tuned your colours on your iPhone 4, another user could see it differently.

    TL:DR; in digital design; not important.

    0 points
    • Vinay ChilukuriVinay Chilukuri, 6 years ago

      You are so right, Pedro. The main challenge now is to let go of the control of your work, especially in terms of color because ofcourse, people will be seeing colors differently. But, atleast, that small sample of people who would be seeing color as you intended it to be.. Oh well, I'm again going down in the same old thought process of mine! :)

      Need to relinquish control :)

      0 points
    • Marc EdwardsMarc Edwards, 6 years ago

      People will see it differently regardless of what you do to your monitor.

      There is a difference between consistency of values, and consistency of apparent colors. The former is valuable and important. The latter is impossible (as you’ve suggested).

      0 points
  • Evan DinsmoreEvan Dinsmore, over 6 years ago

    You shouldn't be making your devs pick colours from the document anyway. Always give the intended hex codes.

    But, I use the default profile on my MBP and Cinema Display, and a custom calibrated profile on my older MBP. No colour management when working on digital documents.

    0 points