CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:
I have a graphical question about my test site. The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown looks completely different between the header and body creating a seam where they meet. Do you have any idea on how I can avoid these differences in safari?
I opened his site in both Safari and Firefox and indeed, I saw the same problem. Here is a screenshot of them side by side:
See the color clash below the photographs and before the first post? Yikes. My first thought is to find both of the images and take a closer look at them in Photoshop. Here is the header image and here is the body image. Check out what happens when I drop the body image square on top of the header image:
On the lower right there, you can see the body image square plain as day. That explains what is going on in Safari. The images clearly have different shades of that tan color so the clash makes sense. So what the heck is happening in Firefox?! Does it have some kind of super-genius color-matching abilities?
Norm offered to send me the original file that he created both the header and the body images from. I thought I would compare the live graphic files to this to see if that would uncover any information. I opened this original file and placed the body background square over this, and…
It matches perfectly! Hmmm… So it seems like if both of the files were originally created from this original file, then something happened while exporting the top header image that is changing the tone of it somehow. Right away I considered color indexing. Since the top image has a much wider variety of colors it is dealing with, if the images were color indexed the top image would have much less colors to dedicate to the tans which could explain a tone variation. Since both the images are JPG’s, and color indexing only happens with GIF and PNG, this is not the case.
Then it struck me…
Ah ha, it’s color profiles!
I really should have thought of this right away, but sometimes simple answers are the most elusive. I remembered that Safari is one of the only browsers that actually supports color profiles of images. A quick “Get Info” glance at the two images reveals the true problem:
The top image indeed was exported differently, it’s using a “Calibrated RGB Colorspace” while the body background image was using “sRGB”. This is likely caused by saving the images from Photoshop in different ways. If you “Save As…” from the file menu, you will have the opportunity to save your color profile along with the image. If you “Save for Web & Devices…” the “sRGB” (best for the web) color profile will be automatically applied (in CS3 anyway).
So there you have it. It wasn’t Firefox being super-smart, it was actually being dumb and just looking smart. Like Reese Witherspoon.
The purpose of these color profiles is something I could into another time, but the important thing to remember to avoid problems like Norm’s is to make sure all your images were exported in the same way and so they either don’t have a color profile or all have the same color profile. This will ensure that the site, at least color-wise, renders the same from browser to browser.
To check whether your browser honors color profiles (and how well), check out the ICC page on the subject.