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
about:config. [↩]
I disable color management in photoshop when designing for the web.
Taking Illustrator as an example here: if by ‘disabling’ you mean choosing “Don’t Color Manage This Document” in the “Assign Profile…” dialog from the Edit menu, this isn’t working for me.
Previously the color profile ‘sRGB IEC61966-2.1′ was assigned — which is the de facto standard for web work, as far as I know.
I still must be doing something wrong.
Well duh. Turns out I had my proof setup all wrong for some reason, so I was simply designing with the wrong colors. The chaps from Viget Labs will show you how it’s done.
Case closed!