Professional Documents
Culture Documents
NOTE: The following instructions are for Photoshop CS3 running on OS X, but it will be the
same for Windows and similar for older versions of Photoshop.
First, we need to know what profile to use for your web images — that’s the sRGB IEC61966-2.1
profile. It is standard across many PC monitors and so is recommended for use on the web. To set
your working space to this profile, open up the “Edit” menu, and click on “Color Settings…”
Now you’ve got the working space set up correctly, but we’re not done. What you see now isn’t
what you’ll see when you save the image for the web because what you see isn’t affected by your
monitor settings — to see the “real” colors we need to use color proofing.
Click on the “View” menu and then on “Proof Setup”. You should see another selection. We
want to see the image as it will appear on our monitor, so select “Monitor RGB” at the bottom.
Finally, we need to activate color proofing as it is off by default. Click on the “View” menu again,
and click on “Proof Colors” if there is no check already next to it.
Once you click on it, it will be checked indicating that the colors are now being proofed using your
monitor settings. That’s it, what you see now on your screen will be pretty much what you’ll get
when you save the image.
People will still see the colors slightly differently across many devices and operating systems (for
example, default OS X gamma differs to the standard Windows PC gamma, so images are a little
brighter — if you are working on a Mac it is advised to set your gamma level to 2.2) but the output
will still be consistent with your working space and will be ready for modern browsers that do use
embedded color profiles.
74 Responses:
1. Travis Neilson
30 Jul, 2008
Awesome. ive been wondering about that for a little bit now. thanks. found your post
through design float, ill have a longer look around your site. awesome so far. thanks again.
2. Dmitry
30 Jul, 2008
One thing to note is that the “Proof Colors” mode is off by default on every new image, so
you have to make sure to turn it on — can use a shortcut (Command+Y on OS X or
Control+Y on Windows). I’m not a Photoshop guru so not sure if it’s possible to turn it on by
default.
ohh, thats a really good post, extremly helpful, im glad you posted thanks.
4. Thomas
31 Jul, 2008
This tutorial is recommended reading for anyone who designs for screen.
5. Kevin Cannon
31 Jul, 2008
Personally, I just turn off all colour management. That way what’s on screen, is just the way
it will be in your browser.
6. Julia Román
31 Jul, 2008
Well, I´ve been working with web images for the last few days, so this has been a great
help. Good Blog!!
Un abrazo y saludos desde Guadalajara, México.
7. Dmitry
31 Jul, 2008
Kevin — good question :) A lot of browsers right now don’t use color profiles, but the
newer ones do (Safari by default, and Firefox 3 if you turn it on). Basically, your colors
should be richer and stronger with profiles (though you’ll only see the difference in a
modern browser).
Here are two great links with lots of example comparison images:
http://www.gballard.net/psd/go.....files.html
http://www.dria.org/wordpress/.....04/29/633/
I think it’s not crucial for you to use color profiles today, but as they will be used by all
browsers in the future, I think it’s a good idea to know how to set them up.
8. James
1 Aug, 2008
I always make sure my “new document” in Photoshop uses sRGB2.1 as well but didnt know
about the “View > Proof Setup”.
I tend to turn off Proof Colours now though so that it looks the same as the Windows
version since most of my clients are on Windows I know how it will look while designing.
9. Kevin Cannon
1 Aug, 2008
Dimitry – thanks for the explanation. I’ll read up on that with a view to doing it in the
future.
10. Mike
3 Aug, 2008
11. Shristi
4 Aug, 2008
12. gavin
4 Aug, 2008
Thats cool, I was wondering if i set this up will i have to change it every time i want to use
the color settings for print? can I save the two diff setups? or even three setups with the
PSCS3 standard saved?
13. Dmitry
4 Aug, 2008
Hi Gavin,
Don’t think there is a faster way to switch color profiles than through the Color Settings
menu under the “Edit” menu.
You can save the different settings you change in that menu for future use — however
you’ll have to go back to Color Settings to switch to them though. Not amazing, but it’s not
too bad either.
14. loswl
5 Aug, 2008
A great way to switch between color profiles and apply it to all your Adobe Applications is
doing the color setting with Adobe Bridge: Open Bridge > Edit > Adobe Suite Color Settings
>> Choose, Adobe North “America web/Internet”(web settings) or choose “North America
Prepress” (Print Settings)
*The setting you choose will be applied to all your Adobe Applications.
Thank you thank you thank you from another grateful reader. This just saved me a year’s
worth of head scratching and adjustment making. You rock!
High 5*
Thanks dude.
17. Arien
15 Aug, 2008
18. Dmitry
15 Aug, 2008
Thanks for the positive comments everyone, I’m happy this post was helpful.
Thank you! I’ve been looking for this solution for such a long time and finally its here… I’m
working with mostly web interfaces using both PC and Mac, the color problems always
making things complicated all the time.
i’ve been looking for this for such a long time. thanx a lot man
21. Ronald
8 Sep, 2008
Thanks for this. I’ve been struggling with this issue for sometime now. I usually ended up
over saturating my images before saving them to make them look normal when i saved them
for the web.
22. Roc
9 Sep, 2008
That’s what was messing them up! I’ve been wondering what the hell it was, thanks!
23. Beau
12 Sep, 2008
Amen.
Hmmm, great post, but shouldn’t you give cred to the pros posting on said blog about
disabling color profiles? Heh.
Hello webmaster , Your blog post about photoshop is absolutely great. Easy to understand it
and with excellent value. I just stumbled up and dugg your site to digg as good news article
about photoshop on Monday . Cheers, Mike Brown , keep up the good work !
26. NoiteIdiotte
22 Sep, 2008
The issue I find with enabling Proof Colors is that your document will now appear to be a
different color than the hex code that you swatch from it. if you eyedrop a color in
Photoshop and then paste that hex value into your CSS document, the HTML is NOT going
to match the exported .png.
In other words, with color management and “Proof Colors” enabled, you cannot accurately
sample colors from your document within PS to use in your HTML/CSS document, because
the raw hex has no color profile associated with it.
The solution to this would be to swatch from an exported .PNG but doesn’t that seem like a
hassle?
What are the advantages for web graphics with color profiles embedded anyway? I was
always under the assumption that profiles were intended for photographs exported from PS.
Can you not get as “rich” or accurate colors by just starting a fresh template with no color
management and making the colors appear the way you intend them to look in the first
place?
28. mindcrusher
14 Oct, 2008
29. Razhluk
26 Oct, 2008
31. Jeff
27 Nov, 2008
Ive been searching everywhere and was even playing around the photoshop and did exactly
what you did today before I saw this post. Thank you for reassuring me my computer wasn’t
the crazy one! Great tutorial!
Thanks for clearing up a whole load of conflicting advice around the web. I’ve been
struggling to get my head around this one for ages.
Does anyone have any good advice on a workflow for picking hex refs for style guides? When
you’ve finished a design is there an easy way of picking out the background and font colors
for the CSS developers? Do you have to Save for web and colorpick? Or turn proofing on and
use Digital Color Meter?
Somebody out there must get this right every time. Where are you!? ;o)
[...] are still rather mysterious. I’ve now crossed RGB color profiles off that list when I found
this consise and easy to read post on how to accurately reproduce color when exporting for
the [...]
I’ve been looking and asking (including Adobe) for this everywhere and you solved my
problem. Thanks a lot.
@Amir Ardalan:
While I can see where you’re coming from, I think you’re incorrect; when you view in proof
colors, you aren’t changing the RGB or HEX value, you’re just seeing it through a “lens” –
that is, you’re telling photoshop to show you these colors as they would be displayed outside
of photoshop.
Therefore, when sampling colors from a document, you would be grabbing the correct HEX
values regardless of what lens (in this case, monitor profile) you were looking through.
If I’m wrong and you can document where your concern is popping up, I’d love to see it.
38. TRAEVINA
24 Mar, 2009
Just installed Photoshop CS4 on my new Mac Pro running Mac OS 10.5.6 and am moving
from using ImageReady on an old G5 running 10.3.9. The second I opened an existing file
created in ImageReady, disaster struck. Colors are not matching what I see in Firefox. Did
everything mentioned in article above, but still slightly off. In the Color Settings menu,
found the Advanced Controls settings (under “More Options” button) had the “Desaturate
Monitor Colors By: 18 percent” checked off. Not sure why this was checked by default but
when I unchecked this option, colors are now fairly close, but, not perfect.
40. caz
2 Apr, 2009
Thanks for this! Always been frustrated with having to correct an image over and over after
seeing it different on the web
41. Grant
3 Apr, 2009
You fuckin rule, I have been so pissed off about this for a while. Thanks buddy.
Thanks, Dmitry!
Do you know why the images may still look different in CS4 and FF3 or Safari? I have
executed the sequence that you have described but for some reasons images in FF3 are
much more saturated than in CS4…
43. Mariano
29 Apr, 2009
Great article, it has really helped me out. Given that colour management will be more
prevalent on the web in the future, I am aiming to design with this in mind. Apart from
ensuring images have the correct profile, is it possible (or will it be possible) to specify a
profile within the page itself, so that both the page and images match up?
45. Mary
9 May, 2009
46. Sillya
19 May, 2009
THANK YOU! It has been driving me nuts. i couldnt figure out why my photographs looked
less colorfull once uploaded. Thank you for your help now i can work in peace. lol
47. Ian
3 Jun, 2009
So I process my images in sRGB mode, but in Proof view for Cinema – and it works fine for
web saving. But if I now want to print the image do I need to turn Proof view off and process
the image again? As the processing I’ve just done is now too dark in sRGB view.
48. JB
10 Jun, 2009
Dmitry, Incredibly helpful info here, wish I had found it sooner. Many thanks!
50. Ashar
26 Jun, 2009
:)
thx for great article. today i learn sth new and in the sametime it will help me in the future
52. Happy Hump Day | Pursuing Photoshop
1 Jul, 2009
[...] How to Use Photoshop Color Profiles for Web Images http://www.usabilitypost.com
/2.....eb-images/ [...]
[...] How to Use Photoshop Color Profiles for Web Images [...]
54. Julia
11 Jul, 2009
Thanks so much for the post. One question. I’m designing on a PC (don’t ask me why) while
90% of my viewers are on a Mac. So if I set my Proof Setup to Mac RGB, is that pretty much
what it would look like on a Mac? (I hope not, because it’s looking a lot lighter.)
55. gold
28 Jul, 2009
Great just what I was looking for! Thanks and greetings from Germany
56. tamara
30 Jul, 2009
nice!
it was just what i was looking for.
thanks :)
loved your blog.
[...] How to Use Photoshop Color Profiles for Web Images [...]
58. xtcommerce
19 Aug, 2009
This is a realy cool tip, thanks for sharing. I will try it on my next steps. Thanks !
59. il
19 Aug, 2009
great info!
thank u!!
What you’ve done allow you to work inside Phosthop Mac while viewing the final exported
colors: this allow you to create accurate colors for Mac web surfers but PC users still see
different colors (not only related to gamma difference).
A better solution is to use color profiles because almost every Mac browser support color
management.
The key point here is that the non proofed Photoshop image (using sRGB working space)
look very similar on that displayed on a PC but, as you say, differ noticeably when exported
for Mac with save for web…. The tip is simple: check the option to include color profile into
the save for web panel.
This way Mac browsers will se exactly what you see inside Photoshop (non proofed image)
and PC browsers (even thoose that ignore color profiles) will continue to see closest colors.
Bye.
62. ardarvin
28 Aug, 2009
In light of Firefox 3.5, and how its new “color correction” feature…that is treating PNGs
different than CSS color, I really think this article isn’t right. If ff3.5 is a sign of browser
mentality to come, I think the only solution is to delete the color profile info.
See: http://hacks.mozilla.org/2009/06/color-correction/
63. Kipp
14 Oct, 2009
I don’t get it. Proofing with the monitors rgb defeats the point of using a srgb colour space in
the first place. You may as well just use your monitors colour profile instead?
As far as I can see it this doesn’t solve anything, the difference in display between a mac and
pc still persists.
64. Rob
27 Oct, 2009
Thanks a million for this – its been nagging me for ages and never spotted the proofing
option under view
@Kipp – what is solves is saving images that look the same as when you designed them
within photoshop.
67. Yarra
12 Nov, 2009
I hope you can help me, this is really a problem at the moment.
Kind Regards,
Miriam
70. james
11 Dec, 2009
Thank you, thank you, thank you so much for the tip!
72. 20 Websites to Help You Master User Interface Design « Usability – My Love
16 Dec, 2009
[...] Usability Post is a blog about design usability. A couple of blog posts you’ll find share
tips on using white space to improve User Interface and using Photoshop color profiles for
web images. [...]
73. Ciprian
25 Dec, 2009
Did not work .. so i disabled color profiles when i saved from the web…