The web is littered with forum posts and blog messages from people unfamiliar with color profiles, wondering how their vibrant mock-up ends up with washed out colors. Or about images that don’t match the HEX color values you get from Photoshop. I have to admit that I as well haven’t mastered this subject as much as I would like.
Over the years I figured out that your artwork in apps like Illustrator and Photoshop is assigned a color profile. And that when you save a JPG with ‘save for web’ you have the option to include that color profile, so that the end result looks exactly the same in your browser. If that browser is Safari, because that’s the only browser with support for color profiles.1 That’s a big “if”, as other browsers display those washed colors anyway. Color management on the web sucks.
When saving PNG and GIF files in Illustrator or Photoshop there isn’t even a checkbox to include the color profile, leaving you scratching your head when you get those dull results again. Fellow designers have shared tips of bumping saturation and contrast before saving, but these solutions are pesky guesswork at best. So, at the risk of sounding like newbie, how do you cope with situations like these?
- I’m not counting Firefox 3 here, because its support for color profiles is off by default — you have to enable it in