Color management for web designers and developers

Sunday September 30, 2007 - 7 months ago

Posted by James Ellis / Filed under Design, Web

Color management is great, but it’s a point of confusion for many web designers and developers. Should I use a color profile? What is sRGB? Why do colors look different in Photoshop vs. my web browser?

With color profiles being fully integrated within the Mac operating system, its usage is unavoidable. It’s important that web designers and developers understand how color management relates to the web. This article is designed to solve the riddle for those struggling with color management.

Update:

I wrote a follow-up article addressing some of the differences in the way Photoshop CS3 handles profiles, particularly in the Save For Web & Devices tool.

Article scope

First, this article only pertains to color management in web design and development. Discussions on color management in print (CMYK, Pantone, etc.) are outside the scope of this article.

This article assumes an understanding of RGB, Photoshop, and a basic familiarity with color profiles.

What is color management? Why does it exist?

From Wikipedia:

The primary goal of color management is to obtain a good match across color devices; for example, a video which should appear the same color on a computer LCD monitor, a plasma TV screen, and on a printed frame of video. Color management helps to achieve the same appearance on all of these devices, provided the devices are capable of delivering the needed color intensities.

This is a good description, but you can tell that it’s really about keeping colors consistent across various devices/media, not managing color on the web. So while print designers and graphics professionals have been using color management to solve problems, web designers have been struggling with a technology that seems to get in the way.

How color profiles work

Color management relies on the use of profiles that provide an interpretive layer on top of an image’s color values. Profiles are generally embedded within images (JPG, TIFF, PNG, etc.), or applied to an entire working space (Photoshop Working Space, Color Settings on OS X, etc.).

An image starts with a master RGB value, and then, if the image is using a color profile, the profile instructs the monitor to display the colors in a different way, thereby changing the RGB value when displayed. This point is confusing, so let’s take a look at what happens.

My monitor’s preferred color profile interprets RGB in a way that increases an image’s overall brightness and color saturation. Without the profile, the image appears a bit dull and dark. The following image compares two photos, each with comparisons between the standard sRGB profile (no profile) with my monitor’s preferred profile.

Cat comparison
(Click for enlarged version)

The differences may seem minor until you compare the color swatches side by side. Both color chips represent the exact same RGB values, only interpreted in different ways due to the usage of a color profile. The difference is surprising.

Why web designers can’t ignore color management

For years I was confused about color management/profiles, always chose to ignore them, and chose the “Don’t Color Manage This Document” option in Photoshop. I figured that it didn’t apply to what I was doing. And even after I began to understand how color management worked, I resisted using it — I would force my monitor to use the sRGB IEC61966-2.1 profile, thereby eliminating the conflict between my monitor profile and actual working space.

This can work, and it’s exactly how I operated for years. However, this approach ignores a basic and important aspect of color management: the monitor/display color profile.

Operating systems, especially Macs, rely on global color profiles to adjust RGB for the user’s monitor. Monitors are all different, requiring slightly different color profiles to adjust RGB for the respective displays. And many new monitors (Apple Cinema Displays, the new Dell 30”, etc.) no longer include controls for adjusting color, as this is managed by the color profile, not the user fooling with the monitor’s controls. Now users plug in their monitor, and the OS assigns the appropriate profile. The idea is that users don’t need to adjust their monitor’s settings, and if they do need to, they should adjust the color profile (software), not the actual monitor (hardware).

In OS X it’s easy to change the monitor’s color profile to sRGB and eliminate any difference between your working space and the standard RGB settings. While this does clear up the profile issue, it requires you to use sRGB despite what your monitor might prefer. Again, on my Dell 30” sRGB looks dull and dark, whereas the appropriate color profile looks great.

Ultimately it’s unessesary to force the use of sRGB once you understand how to make color management work for you.

The turning point

I always knew that there was something unnatural about having to constantly disregard color profiles within documents and disregard preferred monitor profiles. And I had a feeling that it was due to a lack of knowledge.

The turning point was when I purchased a Dell 30” monitor. Like all monitors you plug into OS X, it pulled up its own color profile. The first thing I did was switch this to sRGB. I was immediately struck by how terrible the display looked in sRGB — everything was dark and desaturated. I tried to correct the issue with the monitor’s controls only to realize that Dell did away with the adjustment menus in favor of a simple brightness control. I couldn’t stand the thought of not being able to properly enjoy my new 30” display just because I didn’t know how to get control over color management.

A couple realizations:

  • Using my monitor’s preferred color profile effected color globally — all colors in all applications were reinterpreted for my monitor. To be clear, this global color profile did not change the actual RGB values of images, it only effected the way my monitor interpreted the color.
  • Almost all of my problems with color management were happening in Photoshop.

Photoshop

I have Photoshop open all day, every day. Photoshop is useful if you do any work on the web. During development I’ll often jump into PS to grab a color’s hex value, chop up a graphic, resize something, etc.

One major frustration I had with Photoshop was having colors interpreted in unexpected/unintuitive ways due to color management. I would be trying to eyedrop a specific color to grab its hex value (for Flash, CSS, etc.) only to have the RGB be off due to color profile re-interpretation. It was maddening. Again, for years my solution was to force my monitor to use the sRGB profile in order to eliminate any conflict between my monitor’s profile and Photoshop’s working space.

The solution is in adjusting PS’s global Color Settings menu:

The Color Settings menu is the key to establishing a web-friendly color space. By default, PS sets your RGB working space profile to your Monitor RGB setting, which is whatever profile you are using for monitor. If you have forced your monitor to use sRGB IEC61966-2.1 Photoshop will already be using the sRGB color space. But, what if, like me and my Dell monitor, you want to use your monitor’s preferred profile?

You can use your whatever monitor profile you like, you just need to be sure to set Photoshop’s RGB working space to sRGB IEC61966-2.1.

This is the key. By instructing PS to use sRGB IEC61966-2.1 as the RGB working space, you are telling PS to use the standard web profile as a starting point.

Now that we’ve set our working space, we can begin working with documents in PS. The first thing you will notice is that Photoshop documents that aren’t being color-managed will be displayed on your monitor without color management. So, on my Dell monitor, the colors go back to being dull and dark. Now, for the first time, you will actually need to assign a color profile. How exciting!

Assigning a color profile is easy. In PS, goto Image > Mode > Assign Profile.

Assigning a profile simply adds the profile’s interpretive layer to the document’s actual RGB colors. My document’s colors remain standard sRGB, but by assigning the appropriate color profile, I can instruct my monitor to interpret the colors in whatever way.

Now when I eyedrop a color, PS grabs the correct sRGB version of the color, regardless of whatever color profile you may have assigned. This is because your RGB working space was set to sRGB IEC61966-2.1. When I take these hex values to Flash, CSS, etc. they match up across all systems. No more disconnect. Whew!

My web-friendly, color-managed Photoshop workflow

  • Photoshop always runs with the RGB working space set to sRGB IEC61966-2.1.
  • Documents are always assigned my monitor’s color profile.
  • When opening PS documents on different machines (laptop vs. desktop), I just switch the color profile to that machine’s preferred profile.
  • When outputting images for the web, use “Save for Web” and remove any embedded color profiles.

Preparing images for web

Now that you have your Photoshop color space set up correctly, it’s easy to output images for the web without having colors shift due to inconsistency between color profiles.

The best way to output images for the web is to use Photoshop’s “Save for Web” tool. If you are generating a JPG, be sure that you don’t select the option for including the image’s ICC profile (the color profile you are using). While most web browsers ignore color profiles anyway, Apple’s Safari does apply any embedded color profiles. Given the overall goal of achieving color consistency, your final product should be a raw sRGB image.

Getting used to color management in Photoshop

This approach to color management in Photoshop is definitely more hands-on than simply letting PS use whatever RGB working space it wants (your monitor’s color profile). With this new model, you will need to manually assign your monitor’s color profile to each document you open. To make this easier, I created a hot-key enabled Action to assign the appropriate profile.

Also, you can assign a profile when creating new documents.

Conclusion

Color management provides a level abstraction that many designers find uncomfortable. I certainly did. Designers are responsible for all things WYSIWYG, with Photoshop being the ultimate WYSIWYG app. However, by its very nature, color management is somewhat a departure from this convention. By shifting a document’s colors, the original RGB values are subverted in favor of what your hardware considers a better interpretation. This duality can be frustrating.

Despite the learning curve, color management can be quite useful. Rather than thinking of color management as a tool for maintaining consistent color across a variety of devices, I consider color management a tool for interpreting color according to your display — my laptop display, Apple Cinema display, Dell display, etc.

Research and notes

While writing this article I dug through the Mezzoblue archives to find the following articles I recalled reading in the past:

And I remembered a few entries from the SmugMug blog:

Some of these references are a bit dated, and at the time they reinforced my old position of ignoring color management. They’re an interesting read in that they expand on the frustrations of web designers struggling with color management.

Questions? Comments? Contact James via email - .