Quick Tip – Accurate Web Colors in Photoshop

Ever built a great website mock up in Photoshop only to slice it up and discover that the all the colors are off in the saved images? Even though the hex values are the same, the appearance is totally different.

Easy now! Don’t curse out Photoshop just yet. It’s a simple problem to fix if you know the right options to change.

A Difference of Colors

Photoshop has options under the View menu that allows you to specify a color profile to work with. Certain color profiles, like CMYK are made to work better in print, while RGB works best for the web. By default, Photoshop is not set to work with web color profiles.

Proof Color Setup

Open up the View menu and click on Proof Colors to turn it on:

Photoshop View Menu


Then from the view menu, go to Proof Setup and switch the color profile to “Monitor RGB”:

Proof Setup Menu

Now the colors in your Photoshop document should not become faded when saved. Take a note of the difference it has with the sample below:

Same Red. Different Shade

Conclusion

There you have it! I haven’t found a way to set the proof colors to be on by default, so be sure to make sure it’s on each time a document is opened. If anyone knows a way of doing this, please share in the comments.

Now that you’ve fixed your color woes, go out there and make those mock ups without fear of discoloration!

Posted Wednesday, January 14th, 2009 · Back to Top

SPONSOR

Add Comment

41 Comments 3 Mentions

  1. Raymond Selda Author Editor

    Amazing tip Zach! This is a really helpful color tip in Photoshop. Thank you.

    ·

  2. meewosh Author Editor

    Thank you a lot. I have tried to figure it out for quite a long time.

    ·

  3. eddy was here Author Editor

    Thanks for this tip,

    I had done this about a month ago, and I wasn’t sure if this was the proper fix.

    ·

  4. tb Author Editor

    … thanks a bunch. That exact problem bit me pretty hard one time :-(

    ·

  5. LOGO DESIGN GURU Author Editor

    Hey great tips. Thanks so much

    ·

  6. Kevin May Author Editor

    I would suggest making a photoshop action like… new document, prompt for dimensions, turn on proof colors and then set to monitor rgb. :) Hope this makes it easier!

    ·

  7. Coljung Author Editor

    Great tip. Thanks

    ·

  8. Tiago Cruz Author Editor

    Another solution to this problem…
    I think that if you tell photoshop not to color manage the document you will not see color variations… am I correct?

    ·

  9. rewdy Author Editor

    Thank you for posting this. I have been so annoyed by this condition of photoshop multiple times. I don’t really like designing sites in photoshop anyway (I use fireworks), but when I have to this will be a helpful thing to know.

    Thanks!

    ·

  10. Mark Aplet Author Editor

    It may be worth noting that you should also work in sRGB not Adobe RGB 1998. Also, Safari is the only browser that recognizes color managed images. and does not throw out the profiles. I know I read an article about this in the past but could not find a link for you. Perhaps someone else has more information to share :)

    Good article, It’s always a good tip worth repeating.

    ·

  11. Jimmy Rittenborg Author Editor

    Hi Zach..

    For a while ago i’ve also found this blog post by Viget about the topic, maybe you can pull out some more informations here..
    http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

    ·

  12. Jim Jamesson Author Editor

    I just set my monitor to the sRGB 221 or whatever it is standard, and then create all new photoshop docs also using the sRGB profile (not the 98 one). Then, no matter I build matches the web standard sRGB… this way I don’t even get a toggle choice any longer in photoshop, as both profiles always match.

    ·

  13. Adam Author Editor

    Great tip, thanks.

    ·

  14. Matt Author Editor

    Thanks for the good tip, I wondered why all our mockups for clients were slightly different hues on the third monitor in the Picture Viewer, rather than the live mockup in Photoshop which was correct.

    ·

  15. Nerman Author Editor

    The proof colors function doesn’t do anything other then let you see how the document will look on a particular setup, like a RGB monitor, and doesn’t change how the colors are saved. As long as you are working in sRGB, there shouldn’t be a problem. Looks like you are working in aRGB color profile, as I did a quick test, and found out that if you are working in aRGB color profile and do a color proof with monitor RGB it will display your colors as it were sRGB, it also looks you are saving it as sRGB. I am guessing you have the option to convert to sRGB or not save a profile enabled. When you are viewing the image, you should make sure that either a sRGB profile is applied or the image is not color managed at all.

    ·

  16. AM Concepcion Author Editor

    Agree with Nerman. You need to convert the artwork to sRGB (if it was created with any other colorspace) before Save for Web. See this story from DesignGeek a couple years ago:
    http://www.senecadesign.com/designgeek/dgarchives/designgeek56.php#pshop_webcolor

    ·

  17. meneerbroekhuis Author Editor

    Thanx for this great tip! Saved me a lot of decision making….

    ·

  18. Marek Chrenko Author Editor

    nice tut

    Marek Chrenko’s last blog post..715 minut v Turine

    ·

  19. Joseph Lee Author Editor

    Hey Zach, that’s a great tip. I’ve always wondered the same thing myself.

    ·

  20. Business Card Printing Author Editor

    Excellent tip! Thanks for sharing this with us. Definitely learned something new. Keep up the good work!

    ·

  21. Chris Brailsford Author Editor

    I came across another quicktip article on this and thought I’d share, in case it made any difference. http://www.hongkiat.com/blog/image-color-faded-when-save-for-web-adobe-photoshop-cs3/

    ·

  22. Gaby Author Editor

    Cool Tip! You avoided me a lot of headaches. Thx!

    ·

  23. Steve Author Editor

    My problem was the management profile of my monitor. I added sRGB and set it as default. Found the solution here
    http://frankieloscavio.blogspot.com/2008/05/how-to-fix-color-profile-colors.html
    and here
    http://www.zbrushcentral.com/zbc/showthread.php?t=36744

    ·

  24. DDrDark Author Editor

    You just set up the same color profile on your system preferences and in photoshop. In my case sRGB and you are done ;)

    http://dznr.org/t6zh

    DDrDark’s last blog post..Icon: WebInjection iconset

    ·

  25. Pinky Author Editor

    You sir, are a saint. THANK YOU!

    ·

  26. Jon Author Editor

    Useful tip!

    ·

  27. Lancca Author Editor

    This tip is amazing, just waht i needed. Thank you

    ·

  28. Marianna Author Editor

    THANK YOU!! This saved me! :)

    ·

  29. G000085 Author Editor

    Great! :)

    ·

  30. brin kat Author Editor

    WHOA thank you… that helps +++.

    ·

  31. Alex Author Editor

    To set the proof colors to be on by default, and to make sure it’s on each time a document is opened do the following:
    Setting in Windows 7
    1. Color Management
    2. Advanced
    3. Change system defaults [button at bottom]
    4. Add> Adobe RGB 1998 [now this will be available for use]

    Setting in Photoshop *
    1. Edit
    2. Color Settings
    3. [select] RGB: Adobe RGB (1998)
    4. OK
    5. View [top menu]
    6. Proof Set up
    7. [select] Custom>
    8. [select] Setup: Custom
    Now this will stay even after restarting Photoshop or creating a new file

    ·

  32. Jhett Author Editor

    I feel so much happier now I unedrtnsad all this. Thanks!

    ·

  33. gfusrjlk Author Editor

    DRwIno zpsplifbczxz

    ·

  34. neuroxik Author Editor

    @Tiago Cruz
    Although you can get away with it most of the time (done it myself), it’s better not define a color profile. The reason is some people, especially photographers or graphic designers, set a default color profile to say Adobe 1998, either for their monitor, and/or inside the browser (often by add-ons for the moment). So instead of interpreting as sRGB by default, it will have its own color space interpretation, getting their default settings if none is set in your image header.

    ·

  35. neuroxik Author Editor

    * better to define a
    (sorry for the bump)

    ·

  36. Po Yung Author Editor

    I am using a very old version of Photoshop. I’ve followed some of your steps but I’m unable to select Monitor RGB as it is greyed out. Can you suggest anything to make this option available?

    ·

  37. Scott Weaver Author Editor

    The trouble with the setup that Zach recommends is that the color picker and the thumbnail icon preview in the layers palette (and probably other places in the interface) don’t match the preview color image in the open file. So when you open the color picker to select a new color you’re working almost ‘blind’. I don’t see Zach’s recommendation as a practical solution to this very real problem that he is addressing.

    ·

  38. Inspirational Quotes Author Editor

    Quick Tip – Accurate Web Colors in Photoshop | Build Internet I was suggested this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are incredible! Thanks! your article about Quick Tip – Accurate Web Colors in Photoshop | Build InternetBest Regards Yoder

    ·

  39. Inspirational Quotes Author Editor

    I’m not sure where you are getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for great information I was looking for this info for my mission.

    ·

  40. Sandro Author Editor

    To enable Proof Colors by default, follow this instructions:

    http://forums.adobe.com/message/2799565

    ·

  41. Guillau e Author Editor

    Thank You

    So much

    ·

 

Build Internet by One Mighty Roar. Since 2008.