Under some circumstances you may notice that colors for graphics and images appear different on different monitors. You may also notice that colors appear different in your graphic design application than they do in the final online version. Color management can be a highly complex topic but this article offers some explanation for the causes of these differences and some quick tips to get the best results when working with Adobe Photoshop.
Maintaining consistent color from one stage of the design process to the next has often been an area of difficulty for designers. Many factors can cause changes or "shift" in color. These are just a few of the common reasons you might experience some color differences:
Monitors and Printers are two completely different devices and colors work in very different ways on each. Monitors produce their own light which is capable of producing very vibrant colors. Printers rely on light reflecting off of pigments in the dye. Monitors work a combination of Red, Green, and Blue "lights" (pixels) (RGB) whereas printers work with Cyan, Magenta, Yellow, and Black inks (CMYK). These differences mean that there are actually colors on your monitor that are impossible to print, as well as colors your printer creates that are impossible to preview on your monitor.
Effect on You: You may find that your web pages or electronic documents do not appear the same when printed as they do online. This is natural and to be expected. Some colors do "shift" more visibly than others.
Even though all monitors use RGB color, not all monitors display RGB in the same way. Each manufacturer and model introduces small physical differences in the display. Additionally, almost all monitors have settings to control the brightness and contrast of the display. Also, most computer systems make adjustments, often specifically tailored to the monitor type of brand, when talking to the Monitor to attempt to make the colors more accurate. The process of correctly configuring all of these options is called "Calibration". Unfortunately, very few people correctly calibrate their monitors, and the settings from computer to computer can range from very accurate, to nearly unrecognizable.
Effect on You: You may find that although your design looks wonderful on your own screen, it looks too dark or bright, or that the colors look "off" on a friend or family member's computer. Unless you see the shifted color on several systems, the changes are the one displaying the differences is incorrectly calibrated. Your best bet is to work with a calibrated monitor on your own system and base your color decisions on that. Your graphics card manufacturer may offer a tool for color calibration.
Another place that computers try to make adjustments is in the software used or in the actual graphics file itself. When creating a file some software will attempt to embed a "color profile" which is a set of instructions intended to tell the next computer how to recreate the color as accurately as possible. In advanced graphics workflows, especially for professional printing, these profiles can be extremely valuable. For many people creating graphics for online display, these profiles can actually cause differences to appear, since some software supports the use of profiles, some software ignores, them, and still other software will read the profiles but interpret them incorrectly.
As an example, it would not be uncommon to create a document in Adobe Photoshop, and then save it for the web, only to find that Internet Explorer and Windows Picture Viewer both display the file differently from Photoshop and from each other*.
Effect on You: Although there is no sure-fire way of ensuring that everyone will see your graphics with identical color, using the right tools can go a long way toward reaching the most viewers possible with a consistent appearance. If color is a concern, we recommend using a quality tool such as Adobe Photoshop and following the tip below to minimize changes in color when saving your files.
*Tip Windows Picture and Fax Viewer has been seen by our staff to drastically misinterpret color in some files. We strongly advise that images for the web be previewed in a web browser such as Internet Explorer or FireFox.
An all too common experience for many Photoshop users is seeing the unexpected and sometimes dramatic change in color when saving your finished design for display on the web. This is generally caused by Photoshop's color management settings, and although there are several ways to address the issue, we recommend disabling color management for RGB (monitor) graphics files. To do so, follow the steps below (Phootoshop CS4)
1. Open the Color Settings Dialogue by choosing the "Edit > Color Settings…" menu item.
2. In the second group, "Color Management Policies" locate the setting for "RGB:" and change setting to "Off"
3. Create a new Photoshop document of any size and then choose the "File > Save for Web & Devices…" menu item.
4. Locate the "Optimize Menu" which is a small, almost hidden, arrow or triangle just to the right of the "Preset" pull down menu.
5. From the Optimize Menu uncheck the "Convert to sRGB" option and cancel the save for web.
It is important to set these options before beginning a new design. If you've already started a design and are seeing color shift when saving for the web, these settings will help, but you may find you need to modify some of your design's colors after making the above changes.
Tip: More information on color management can be found through online search or as a topic in many web design books in your local bookstore.
Version 1 • Last Updated 12/14/2009 1:27:07 PM
