Color Experiment

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. Note that this is not a webkit issue since both Safari and Chrome use webkit but behave differently in this respect. I would say that the Safari and Firefox treatment of images without profiles seems more correct; but really, its hard to fault anyone here since an image without a color profile is, by definition, open to interpretation.

Here's an example of the problem. The plum background of this page was designed in CSS to exactly match the color of the four boxes below (#3F283A). The only thing changing among those boxes is the color profile applied to those images as they were saved. Notice that you can't see the outline of some of these boxes. If you are looking at this page on an iMac using in Chrome, both the "iMac" and the "no profile" boxes will fade into the background, if you are using Safari and Firefox only the "iMac" box will match the background.

generic RGB profile
sRGB profile
iMac profile
no profile

The images in the boxes were all created on an iMac, so the behavior of the "no profile" box might differ on other devices and with other browsers. Regardless, though, a well behaved browser should recognize the "iMac" profile of the thrid box image and that box should fade away. In other words, 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.

Feel free to send comments to my blog post on this topic.

Have fun!

...Eric

5 February 2011