2008-04-10
Color management is the one and only way to achieve perfect color reproduction across multiple devices. Color management systems are affordable and pretty easy to use today. But after you created a profile for your device, the job is not done. Setting up your application correctly is essential to exactly know how your pictures will look on the web or in print.
To make sure your monitor displays all colors as correctly as possible, you have to calibrate them and create a color profile.
A CMS is the best way to calibrate and profile your display. They will give you the best results and are pretty foolproof. Some of the most common CMS‘ are the Spyder 2, Spyder 3> and the Eye-One.
Mac OS X has a good programm to calibrate your monitor without any expensive measuring device (but not that accurate).
It can be found in Apple > System Preference > Displays > Color > Calibrate….
The program itself is self-explanatory.
While it is hard to test your color temperature and white luminance with the naked eye, you can at least check your gamma manually.
Werbefotos.at has some good images to find out and adjust your Gamma.
Remember, that this won’t produce a profile for your monitor!
In order to describe the behavior of the various output devices, they must be compared (calibrated) in relation to a standard color space. Often a step called linearization is performed first, in order to get the most out of limited 8-bit color paths. Instruments used for measuring device colors include colorimeters and spectrophotometers. As an intermediate result, the device gamut is described in the form of scattered measurement data. The measurement data (CGATS) is often not usable immediately. Such data need to be prepared for high speed conversions of the actual image data. The transformation of the scattered measurement data into a more regular form, usable by the application, is called profiling. Profiling is a complex process involving mathematics, intense computation, judgement, testing, and iteration. After the profiling is finished, an idealized color description of the device is created. This description is called a profile.
From Wikipedia
After the calibration your profile should be applied automatically.
Under Mac OS X you can check if everything is set up correctly in Apple > System Preference > Displays > Color > Display Profile.
For Windows user this is a bit more difficult, because Windows itself can’t apply a color profile because Windows can’t really do color management. This makes an additional program necessary which typically comes with every CMS and is installed automatically. Make sure this program is in the autostart.
Start Photoshop or any other CS application. Go to Edit > Color Settings….
Your settings should look like these on the right.
RGB: If you only work for the web you can choose sRGB, but if your work will probably be printed you should go with Adobe RGB, because it’s the bigger gamut. Never chose your monitor profile (even if many people think, that this is what should be chosen). This wouldn’t make sense, because your monitor profile is already applied by your graphics-card and would be run a second time over your image if you chose that.
CMYK: Choose a standard CMYK Profile like Euroscale Coated v2.
Leave Gray and Spot as they are.
To make shure you always know what’s happening deactivate all Color Management Policies and check Ask When Opening. This means, that always if a picture has no or a different color profile than your working space, you will be asked what to do.
In this case you should either choose to keep the profile or to convert it to your working space (depends on what you want to do). If you have an image from the web with no profile you should assign sRGB, because images on the web are in the majority of cases in sRGB.
Never, ever deactivate or turn off color management! This will screw things completely up!
Save these settings under a name of your choice. To synchronize all CS applications open up Adobe Bridge and go to Edit > Creative Suite Color Settings… look for the profile you just saved and click Apply. Now all your CS applications will work with the same setting.

Many people have the problem, that their colors change when they use the option “Save for Web”.
In fact they don’t change. They are just not displayed the right way while working in Photoshop.
By default Photoshop applies your working space to your images, which is good for print work, but leads to a difference in color displaying. To make sure Photoshop displays the colors like an application, that don’t color manage (like your browser or your operating system) you have to check View > Proof Setup > Monitor RGB. Furthermore you have to check View > Proof Colors. Make sure this is always checked in every image you are working on (because its deactivated by default).
When saving for the web you should also make sure to check Convert to sRGB, especially if you are not working in sRGB.
If you work in Adobe RGB (or an other profile than sRGB) there could be a slight difference in color after Saving For Web because of the difference between Adobe RGB and sRGB. You can check your images by converting them manually to sRGB before saving for the web by clicking on Edit > Convert to Profile… > Profile: sRGB. Make sure you undo this step afterwards or you will keep on working in sRGB.
If you follow these steps you will see your images in Photoshop exactly like in your browser. But now you are color managing to make sure your pictures will also look great in print.

My name ist Marcus Blättermann.
I’m majoring in communication design and work as a freelancer for illustration, print- & webdesign. If you like my work you can .
Don’t forget to subscribe to my RSS-Feed and follow me on Twitter. You should also check out my Portfolio.
Ric
April 28, 2008
2:49 am
Thanks! this was actually very helpful. I never understood the whole sRGB thing but now things are different :]
Ericka
August 27, 2008
12:16 am
All I can say is THANK YOU THANK YOU THANK YOU for this! All my color problems are finally solved.
Renato Carvalho
November 18, 2008
3:49 am
You helped me a lot!
Now, the only thing that I need is a Color management system.
Thanks!
Jean
December 16, 2008
2:31 am
Thanks for the info. There are still problems. 1. when converting pictures from adobe 1998 to sRGB there is an enormous shift in color saturation(more). 2. There are browsers with color-management(Safari, firefox 3) and browsers with no color-management, making it even more confusing as to get the same color for everyone, depending on the browser.
Monitor Calibrated with Monaco Optix, working space : adobe 1998, pc gama 2.2, proof colors on to monitor RGB.
Snehal
January 21, 2009
9:19 am
You are too cool dude. So here I am trying to make an image that is not set to a proofing color space look good in a web browser. I was tearing out the head even though I am bald. Nice work explaining things here.
MikeTheVike
February 25, 2009
10:19 pm
Thanks for the article. I have always read to set the profile to sRGB, and make sure “Covert to sRGB” is checked when saving for web. Seems like most people have the problem of colors desaturating, I always have the problem that my colors get oversaturated. I used to think “This will only look like this on my mac, in windows in a browser it will be fine. But I would notice it looked oversaturated there as well. Next time I will view proof colors and set it to Monitor RGB, maybe that will finally work!
Ronel
March 16, 2009
8:16 pm
Thank you so much! At last my clients can see what they will actually get!! Thanks!!!
René Damkot
June 1, 2009
10:48 pm
@Jean: Are you sure you are converting, not assigning sRGB?
Colors should not (and do not) change much when converting from AdobeRGB to sRGB…
On the article: Save for web *does* show the images correct. You have the choice on how to view images in the “save for web” dialog box:
http://img.skitch.com/20090601-eisawsdyeg2ws4jbhpjfppufxp.jpg
1. “Monitor Color”: As a non color managed application would show it on your screen.
2. “Macintosh (No color management)” As a non color managed application would show it on a monitor with gamma 1.8 (ancient): The image appears lighter.
3. “Windows (No color management)”: As a non color managed application would show it on an sRGB monitor. An sRGB image will look the same here as in the last option. An AdobeRGB image will appear less saturated.
4. “Use document profile”: As a color managed application would display it.
@davidpots
June 3, 2009
2:16 pm
Wow, this seems to have worked for me. Have re-approached this problem many times over the years w/ no lasting solution. Hopefully this keeps up!
Question — why would you want to work with “Proof Colors” checked? With that enabled, my working colors in Photoshop appear desaturated / dulled — which is not how I want them in the final product. For example, see: http://img.skitch.com/20090603-d1ygy4b99np32ypybaek75sp81.png
Note that whether or not Proof is checked, I get the same final product after save-for-web.
Thanks again!
James
October 15, 2009
7:48 am
If my file is srgb and when i save for web i leave convert to srgb ticked will it apply srgb twice or does it make no difference? the reason i ask is because you mention that is the case with the monitor profile being applied by the graphics card and can potentially be applied twice.
Any help would be ace
James