Colour profiles in imaging applications are a sticky issue at best. The path of least resistance when producing web graphics is turning them off entirely and ignoring the whole mess, which is pretty much what I’ve been doing for years.
The basic theory is this: a colour profile acts as an interpretation layer, and adjusts the colour values of the pixels you’re working with for consistency, richness, and other reasons. The net effect is that your RGB value of 255, 12, 12 might end up being rendered as something closer to 255, 0, 0 on-screen, while still being saved out with the original RGB values. That means if you don’t have the benefit of the original colour profile, your output ends up looking a bit different than your working copy; usually with duller colours and a lighter overall tone (or darker, depending on which profile you’re using).
This colour shift explains why turning off colour management is generally not a bad strategy when producing output for the web. No browser other than Safari supports colour profiles, so there’s no benefit to using them. Not to mention that in many cases you’ll find yourself matching RGB values between your image and your CSS, and because CSS isn’t profiled it’s a more difficult task if you have a colour profile to contend with. The closer you can get to actual RGB values, the saner you’ll stay
I’m bringing this up because I’ve been working off of two computers lately, and until recently I wasn’t paying much attention to the fact that the profiles were mismatched between them, thus affecting my source files. Unless I pay meticulous attention to the dialogues that pop up asking me what I want to do about the situation, when I save out graphics I end up with images sitting on top of slightly more vibrant background images, causing visible seams where there’s clearly a colour shift occuring.
Googling didn’t come up with any solid way to deal with this, so I’ve had to figure out a way to shift colours back from their profiled version to more accurate RGB values, and then make sure that information gets saved out when I’m creating my final GIFs & JPGs. Here’s what I came up with.
Figure: image with no assigned colour profile, saved to GIF format.
First, I’ve found some applications in particular (Illustrator, I’m looking your way) seem to have trouble remembering that a colour profile has been assigned. So if I’m working in sRGB space for example, every time I load that document I have to assign the sRGB profile. Annoying.
So that’s the first step, making sure that the profile is actually assigned. In most Adobe apps, the action should be found under Edit > Assign Profile. What you assign is up to you, the trick is to make sure that the current profile matches what the document was created with. I’m using sRGB here.
Figure: image with sRGB profile, saved directly to GIF format. It’s effectively identical to the previous image, which had no profile assigned.
Now if I were to just save them at this point, the GIFs and JPGs will have simply discarded the profile during the saving process and I’d end up with an identical result to previously, where I’d saved them without any profile information.
The key lies in conversion. Photoshop has the ability to convert between profiles, and keep colour levels relatively intact when doing so. What we need is to take the now properly-profiled sRGB file and convert it back to raw RGB values. Under Edit > Convert to Profile, you get a “Destination Space” dropdown that will allow you to choose between various profiles. What you want is your monitor’s working RGB profile (which is effectively the same as saying “no colour management at all”). On my iMac, the option I select is called “Working RGB - iMac”. If you don’t see an equivalent for your monitor, you could select “Generic RGB Profile”, but it’s probably best to first load up Photoshop’s global colour settings (Edit > Color Settings) and make sure your default RGB space is set to “Monitor RGB”. If it’s set as your default, your monitor’s profile ought to show up in the destination space dropdown.
After this step, you’ve now converted the profiled version of your document back to raw RGB, but kept the colour levels similar to what the profile enabled. Save the file, and now you’re free to save out to any image format without a colour profile. The result will be much closer to what you originally intended.
Figure: the top image is the same unprofiled example as above, while the bottom image was converted from sRGB to monitor colour and then saved to a GIF file. Note the slight colour difference.
That’s Photoshop, but what about Illustrator? No such luck. It allows you to assign a profile, but there’s no Convert option in the menu. Illustrator’s help file says that conversions can be performed in Photoshop or InDesign, but mentions nothing about doing it directly in Illustrator. The only fix I’ve found so far is saving out my Illustrator file as a PNG, then loading it in Photoshop and following all the steps above. Not ideal, but it gets me where I need to go in the end.
Note that this is all written while using Adobe’s CS2 suite; I’m not sure how CS3 changes things, but in particular, I’d certainly hope that Illustrator CS3 has taken a few steps forward in the way it handles colour profiles.
By Dave Shea
