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:
Then from the view menu, go to Proof Setup and switch the color profile to “Monitor RGB”:
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:
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!
28 Responses to “Quick Tip – Accurate Web Colors in Photoshop”
January 15th, 2009 at 5:28 AM
Amazing tip Zach! This is a really helpful color tip in Photoshop. Thank you.
January 15th, 2009 at 8:09 AM
Thank you a lot. I have tried to figure it out for quite a long time.
January 15th, 2009 at 9:12 AM
Thanks for this tip,
I had done this about a month ago, and I wasn’t sure if this was the proper fix.
January 15th, 2009 at 9:40 AM
… thanks a bunch. That exact problem bit me pretty hard one time
January 15th, 2009 at 10:42 AM
Hey great tips. Thanks so much
January 15th, 2009 at 11:42 AM
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!
January 15th, 2009 at 1:14 PM
Great tip. Thanks
January 15th, 2009 at 2:29 PM
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?
January 15th, 2009 at 3:47 PM
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!
January 15th, 2009 at 5:40 PM
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.
January 17th, 2009 at 6:40 AM
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/
January 17th, 2009 at 10:25 AM
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.
January 17th, 2009 at 10:51 AM
Great tip, thanks.
January 18th, 2009 at 11:40 PM
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.
January 23rd, 2009 at 8:26 AM
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.
February 13th, 2009 at 2:22 PM
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
February 14th, 2009 at 2:28 PM
Thanx for this great tip! Saved me a lot of decision making….
March 27th, 2009 at 2:18 PM
nice tut
Marek Chrenko’s last blog post..715 minut v Turine
March 27th, 2009 at 6:33 PM
Hey Zach, that’s a great tip. I’ve always wondered the same thing myself.
April 3rd, 2009 at 1:32 AM
Excellent tip! Thanks for sharing this with us. Definitely learned something new. Keep up the good work!
April 6th, 2009 at 12:07 PM
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/
April 13th, 2009 at 7:40 AM
Cool Tip! You avoided me a lot of headaches. Thx!
April 16th, 2009 at 10:09 AM
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
April 24th, 2009 at 6:35 AM
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
June 30th, 2009 at 2:09 PM
You sir, are a saint. THANK YOU!
Join the Conversation!