Colors without a profile

I learned something new about trying to match CSS colors with images this week. It turns out that Chrome, Firefox, and Safari differ in how they reproduce the colors of images. If you are trying to match an RGB color defined in CSS to the color of a particular image, this difference may haunt you.

Chrome (9.0.597.84) appears to automatically apply a color profile matching the device displaying the image to images without a color profile while Safari (5.0.3) and Firefox (3.6.8) appear to display such images with a generic profile. If you want colors in an image to match RGB colors you define in CSS, you must assign the image a color profile matching the device on which you are doing the designing.

Yeah, I know, hard to visualize. I’ve set up a color experiment page to show this effect. Enjoy!