Color shift when going to the web?

Question

I spent 2 hours yesterday trying to get a graphic I had done in illustrator to export for use on the web. No matter what I did, the color always shifted - it looked like a gamma or lightening thing. The thing is, I'm not a noob to graphics or the web, I've been doing this professionally for over 10 years. But either CS3, or my recent move to the Mac, or something... has completely thrown a wrench in the works. The final response from Tech Support was that it was inevitable, and that was it. ?? What? That makes no sense.
Here's the lowdown: Illustrator document is set to RGB color space. I tried the standard color profile, and also tried setting it to unmanaged. I then tried both export and 'save for web'. I always get this shift. Everything is lighter. soo.. I then tried taking it over to Photoshop and saving from there. Strangely, it looked right in Photoshop, and then still wouldn't export without lightening everything.
Ultimately, nothing worked. What am I missing?

Answer 1

Here are a couple of good links about sRGB and color spaces in general.
http://www.color.org/sRGB.xalter
http://www.drycreekphoto.com/Learn/color_spaces.htm
The first one gets pretty technical after a few paragraphs; don't worry about the more technical aspects, just read the first part.
To make a long story short, the reason we create in or convert to sRGB before posting to the Web is that it has become a standard reference space for work that is intended to be displayed on monitors. No individual monitor behaves exactly as sRGB describes, but historically it was developed to be a good average color space that most monitors can achieve, or come close to.
When you go to choose a hex color for a web page, if you watch what you are doing, you will notice that the same color has a different hex code for every different color space you might try out. For instance, I have a client that uses PMS 109C in their logo and all their packaging. The only way I can select a hex color for that PMS color in a reproducible manner is to choose that color in a defined working space.
For the Web, we have all already agreed that working space should be sRGB. If I chose that color in my monitor's display space used as a working space, it would be different on every different machine I have available to me. I work on 4 different monitors, so I personally could potentially choose four different translations of that color. Which would be correct? None of them, because each monitor is different, each has a different profile, and so each would give me a different translation of the same color. So I need to make that translation while working in a standard working space. I can either select my color directly in sRGB, or I can select it in Adobe RGB (or another standardized working space that actually contains that color), and convert the entire file to sRGB before publishing to the web. Either approach works.
Since sRGB has the 2.2 gamma, you want to set your display to 2.2 so you won't see a lightening of the image when you view it without a profile.
why strip the profile? As far as I am concerned, you often do not have to, but under some circumstances will want to.
For photographs, illustrations, and paintings I leave the profile on jpegs, because color managed browsers will display them more accurately with the profile embedded. This is particularly true of Safari, for reasons I have already stated.
For graphics that need to match hex colors, I leave the profile off, because safari does not color manage hex colors. so Safari will set-up a mismatch between tagged jpegs and hex colors. If you need to match a graphic to hex colors on the page, it's better to leave the profile off.
If you are working on a page or a site with very large numbers of images, you may want to leave the profile off to save on disk space and download time as well. For me that is usually not a big consideration... but for some sites it may be.