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