Quick Tip – Accurate Web Colors in Photoshop

WRITTEN BY

Zach Dunn

Zach is the Co-Founder and Director of Front End Development at One Mighty Roar in Boston, Massachusetts.

Short URL

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”:

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!

Wordpress.com stats not installed! Posted Wednesday, January 14th, 2009 / Back to Top

I this post. Tweet

41 Comments 3 Mentions

Raymond Selda Author Editor
Amazing tip Zach! This is a really helpful color tip in Photoshop. Thank you.

January 15, 2009 · Reply
meewosh Author Editor
Thank you a lot. I have tried to figure it out for quite a long time.

January 15, 2009 · Reply
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.

January 15, 2009 · Reply
tb Author Editor
… thanks a bunch. That exact problem bit me pretty hard one time :-(

January 15, 2009 · Reply
LOGO DESIGN GURU Author Editor
Hey great tips. Thanks so much

January 15, 2009 · Reply
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!

January 15, 2009 · Reply
Coljung Author Editor
Great tip. Thanks

January 15, 2009 · Reply
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?

January 15, 2009 · Reply
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!

January 15, 2009 · Reply
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.

January 15, 2009 · Reply
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/

January 17, 2009 · Reply
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.

January 17, 2009 · Reply
Adam Author Editor
Great tip, thanks.

January 17, 2009 · Reply
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.

January 18, 2009 · Reply
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.

January 23, 2009 · Reply
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

February 13, 2009 · Reply
meneerbroekhuis Author Editor
Thanx for this great tip! Saved me a lot of decision making….

February 14, 2009 · Reply
Marek Chrenko Author Editor
nice tut

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

March 27, 2009 · Reply
Joseph Lee Author Editor
Hey Zach, that’s a great tip. I’ve always wondered the same thing myself.

March 27, 2009 · Reply
Business Card Printing Author Editor
Excellent tip! Thanks for sharing this with us. Definitely learned something new. Keep up the good work!

April 3, 2009 · Reply
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/

April 6, 2009 · Reply
Gaby Author Editor
Cool Tip! You avoided me a lot of headaches. Thx!

April 13, 2009 · Reply
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

April 16, 2009 · Reply
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

April 24, 2009 · Reply
Pinky Author Editor
You sir, are a saint. THANK YOU!

June 30, 2009 · Reply
Jon Author Editor
Useful tip!

July 6, 2009 · Reply
Lancca Author Editor
This tip is amazing, just waht i needed. Thank you

July 19, 2009 · Reply
Marianna Author Editor
THANK YOU!! This saved me! :)

August 26, 2009 · Reply
G000085 Author Editor
Great! :)

October 16, 2009 · Reply
brin kat Author Editor
WHOA thank you… that helps +++.

January 17, 2010 · Reply
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

April 22, 2011 · Reply
Jhett Author Editor
I feel so much happier now I unedrtnsad all this. Thanks!

May 17, 2011 · Reply
gfusrjlk Author Editor
DRwIno zpsplifbczxz

May 19, 2011 · Reply
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.

August 14, 2011 · Reply
neuroxik Author Editor
* better to define a
(sorry for the bump)

August 14, 2011 · Reply
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?

August 24, 2011 · Reply
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.

January 1, 2012 · Reply
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

March 19, 2012 · Reply
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.

March 24, 2012 · Reply
Sandro Author Editor
To enable Proof Colors by default, follow this instructions:

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

June 3, 2012 · Reply
Guillau e Author Editor
Thank You

So much

January 7, 2013 · Reply