Tips for Managing Web Color in Photoshop

Do your images shift colors once you save for the Web and view in a browser? No more! Here's how to achieve a "no surprises" Photoshop-to-Web-image workflow.

You spend hours in Photoshop creating the perfect background image (or button, or photograph) for a client's Web site. From the native .psd file, which you were careful to keep in RGB mode, you use Save for Web (from the File menu) to create a .jpeg, .gif, or .png version of it.

But when you view your saved-for-Web artwork in a browser, ack! A significant color shift washed out the intensity of your colors and reduced the contrast overall. Yet when you open that .gif or .jpeg or .png in Photoshop, the colors shift back to what the original .psd file looked like. Dang!

Sound familiar? If you've driven yourself crazy trying to figure out what's going on here, this article's for you.

What's Going On Here
The most common cause is that you're using Photoshop in a way that's meant for print work, not Web work. You're probably using Photoshop for both, right? And figured, since all Web artwork is RGB, as long as you keep the Photoshop file as an RGB image, what you see in Photoshop will be what you get when you open the RGB image in a browser.

But there are actually two types of RGB you can use in Photoshop. The one for print is called "Adobe RGB (1998)" and is what you're using if your Color Settings (in the Edit menu) are using any Presets with "Prepress" in the title. Look at the first dropdown menu called RGB Working Space and you'll see that Adobe RGB (1998) is active.

The other type of RGB is called "sRGB [bunch of numbers here]" and is the default color space of every Web browser known to mankind. If your Color Settings are using a Preset with "Internet" in the title, that's what your Working Space RGB is set to -- sRGB. But if it was, then you wouldn't be reading this article.

The key here is that when you choose Save for Web, Photoshop automatically converts your image to sRGB. Or to put it another way, it's stripping the Adobe RGB (1998) profile attached to the image, since GIFs and PNGs don't support profiles.

Browsers also ignore profiles and assume every image is in sRGB, which is what Save for Web is showing you. (JPEGs can optionally embed a color profile, but only Safari recognizes them. If you want a JPEG with an Adobe RGB profile, you have to use Save As, not Save for Web. And hope all your site visitors are using Safari.)

You can see the sRGB color shift happen right there in the Save for Web dialog box, but it's easy to fool yourself into thinking it's just a "crappy preview in a dialog box" thing. Nope, it's actually showing you the image as it will be seen in a browser, without a profile, a naked sRGB image. You can click the little globe icon at the bottom of the dialog box to open a preview of the artwork in a real browser and confirm it.

So why, when you open that sRGB Web artwork in Photoshop, does the image look almost exactly like the original PSD file -- no color shift? Probably because Photoshop defaults to assigning your current RGB Working Space -- Adobe RGB (1998) -- to images with a different or missing profile while you have it open. This can happen without you even being aware of it if you've turned off the "Missing Profiles: Ask When Opening" option in your Color Settings.

How to See What You'll Get
There are two parts to achieving a "no surprises" Photoshop-to-Web-image workflow.

First, pre-empt Save for Web's color shenanigans by converting your image to sRGB before it gets there. If you change Photoshop's color management settings (Edit > Color Settings) to the Web/Internet preset, or just choose sRGB as your RGB Working Space, all new files you create will use sRGB from the start. It's a good habit to get into before sitting down to a Web graphics session in Photoshop. (Don't forget to switch back to a print-centric preset, or switch back to Adobe RGB, when you're done.)

The new color settings will not affect existing images with embedded Adobe RGB profiles. To change an existing image, open it and go to Edit > Convert to Profile (not Assign to Profile). Choose sRGB for the image's Destination Space and click OK. If you open the Convert to Profile dialog box again, you'll see that both the Source and the Destination spaces have changed to sRGB.

The best part about converting to sRGB in the main program (instead of letting Save for Web do it for you) is that the colors are actually mapped to the new color space while maintaining the existing colors as much as possible. It's often difficult to detect any significant color shift at all in the move from Adobe RGB to sRGB. But they are most definitely sRGB, so when you use Save for Web, the colors are maintained, within the limits of the file format you choose.

The second task of the no-surprises workflow is especially important for Mac designers. You probably know that monitor settings in Windows have a higher gamma (2.2) than Macs (1.8) ... and if you don't know nothin' 'bout gamma numbers, Miz Scarlett, just know that all monitor colors are darker on Windows. Since Web images are viewed on a monitor, all your Web images will appear significantly darker to the vast majority (like, 90%) of people viewing the Web site on a PC than they do on your Mac.

It's surprisingly easy to set up Photoshop on either platform so that images appear as they would in the other's browser. If you're on a Mac, first go to the View > Proof Setup fly-out menu and choose Windows RGB. Second, press Command-Y (Ctrl-Y on a PC). Third... there is no third. Command/Ctrl-Y toggles View > Proof Colors on and off. When it's on, the image in Photoshop looks just as it would in a PC browser.

If you're a PC-based Web designer and you want to see how something will look to a Mac user, set the Proof Setup fly-out menu to Macintosh RGB before turning on Proof Colors.

Web Features in the Info Palette
You may already know that if you choose Palette Options from Photoshop's Info palette menu, you can choose two color readouts that the Info palette dynamically updates as you move your cursor around the image.

Savvy print designers like to set the first color readout to RGB (because they're working in RGB, the most flexible color space) and the second color readout to CMYK, because when they're done with the image they'll be converting it to CMYK from the Image > Mode menu. So as they work on the RGB image, they can get an inkling of how various areas will translate to CMYK mixes without actually converting.

If you're creating an image for an existing Web site and you have to match colors there -- which are usually supplied to you in Hexadecimal code, such as C6C6C6 -- you might want to choose Web Color as your second readout in the palette. Web color shows you the Hex code for RGB colors in the right side of the palette. That way you can hover over any part of your image and confirm that it's the exact color you want to match.

More Web-friendly goodies are hiding in the Info Palette Options dialog box. When I'm working on a Web project in Photoshop, I like to change the Mouse Coordinates to Pixels -- it's all about the pixels, baby. And in Status Information, I turn on Document Profile (you know why) and Document Dimensions, which saves me from having to obsessively check Image > Image Size to assure myself yes, I specced my file correctly, so the button I'm working on is exactly the size I need.