Color’s off when viewed on the web? It could be Browser Gamma Correction, not Expression Design

I’ve seen a few posts from people saying their colors did not match from Expression Design version 1 or 2 to when they were viewed on the web. And when I say “did not match” I’m talking a fairly significant difference in hue. I happened upon an odd little color “bug” myself a couple of weeks ago that, at first, I thought was Expression Design’s fault. However, all is not as it appears on the surface. Further investigation led to a nasty little bug that not only clears Expression Design of any wrong doing, it is also a well-known problem and apparently not yet fixed.

I first noticed an issue myself when compiling a blog using Expression Design and Windows Live Writer, a very good tool by Microsoft used for writing and composing blogs. The issue came to my attention when I created a small alien entity in  Expression Design that I decided to add to a blog (see image to the left). Instead of exporting the image as a transparent PNG so that the little blue guy would appear over any surface and the black area would be transparent, I decided to color-match the black area to the background of the web page on which my blog would be displayed. The background color is the same as the background color of this page and happens to be the hex color #333333, a dark gray color. Life probably would have been so much easier had I chosen to simply go with a transparent image, but no, I had made the decision to color-match the background with another color and, silly me, I expected the color-matching to be precise.

Now remember, when writing a blog in Windows Live Writer, you have the option to write the blog using the blog’s current theme setting, meaning you can write with the blog theme’s colors imposed so you get an idea of how it’s going to look. So to get the background color of the blog, all I did was take a screen capture using the PrtScn button, then I pasted the contents of the clipboard into a new document in Expression Design 2. To do this, I clicked File > New and the width and height are automatically set to the dimensions of the size of my screenshot, which is also the monitor resolution. From there, I used the eyedropper tool to get the background color’s hex code which is #333333.

Note: Incidentally, you don’t have to go to all this trouble. All you have to do is drag the eye dropper tool off the Expression Design 2 or 3 application it will let you color-match anything you hover the eye dropper over.

So imagine how surprised I was when I color matched the background layer of the alien guy in Expression Design 2, exported the image as a PNG, and then imported the image into Live Writer and found that the background around the alien no longer matched the background of the blog! When I checked the color around the alien, it was now #2A2A2A! That’s still a gray color but the Red, Green and Blue values are all 9 points off from where they should be. I  toggled all of the settings in Expression Design 2 that I could think of that might affect color, exported the image and imported to Live Writer again, to no avail. Publishing the blog also confirmed that the color was off when I viewed the blog in a browser.

So I was pretty sure that Live Writer had a color bug in it and I was about to ping the Live Writer developer team when an idea was thrown at me like a brick – try viewing the blog in another browser. At first I scoffed at the idea but did it just for the sake of galactic peace. But what do you know! Firefox displayed the color correctly! Well, at least MORE correctly. The color was just a hint of a shade off. Not nearly as noticeable as the difference when displayed with Internet Explorer. So then, mind racing, I began to piece it together. Live Writer might be using Internet Explorer to render the blog content for the web, which would explain why the color difference would show up in both Live Writer and Internet Explorer, but not so much in Firefox.

The next business day, I confirmed those suspicions with the Windows Live Writer developer team. They pointed me to the following article: The Sad Story of PNG Gamma "Correction". Apparently Safari suffers from the same gamma correction problem to the extent that IE does.

In short, the article denounces the use of PNG files for color matching when the intent is internet use. And sure enough, when I tested further I found that I could have avoided the problem by exporting the art as a JPG file the whole time. Now if I had wanted to maintain a transparent layer around the blue alien and then color-match the blue alien itself to something else, THEN I might have a legitimate problem. And in that case there are browser gamma test pages like this one from Sourceforge which can help test your browser’s gamma compatibility.

Now that doesn’t mean you should steer clear of PNG usage altogether. When color matching isn’t an issue PNG files remain a highly useful file type, especially when a transparency layer is needed. But when the color of your web artwork must be precise, you might think twice about PNG files.

- Will Buffington