See For Yourself The Effects of Misinterpreted Color Data
In the introduction, we saw an exaggerated (but real) example of how colors turn out wrong when the color space is misinterpreted. Luckily, common digital-image color spaces are all close enough so that even when misinterpreted, they're generally in the right ballpark. More or less. Sort of. Maybe.
In the box below, mouseover the buttons under the large image to see what that image looks like when its color data has been encoded in the named color space: the orange buttons on the first row bring up images without embedded color profiles, while the turquoise buttons on the middle row bring up images containing embedded color profiles. Does your browser recognize and respect them? The purple buttons (third row) are explained a bit later on this page.
Note: only the first images have the turquoise and purple rows of buttons; continue reading below the test box for more on how to interpret what you see.
Use all three sets of buttons (for images that provide them) to determine how colormetrically advanced your browser is, as described below. The other pictures (which have the orange buttons only) are provided so that you can see the practical effects of misinterpreted color spaces with a variety of real-world images.
The tests show images encoded with six different color spaces.
7 ORANGE BUTTONS — Without an embedded color profile
The data has been written as per the button colorspace, but without an embedded color profile, so an application has no other choice but to apply its default color handling. For virtually all browsers, the default handling is “no color management,” which means to assume that the image data was written for the current monitor (which is pretty much guaranteed to be the wrong assumption, unless you built the image yourself with this odd intent built in). This sad state of browser color-handling is discussed on the next page.
7 AQUA BUTTONS — With an embedded color profile
The appropriate color profile is embedded into each image, so if your browser respects embedded color profiles, all aqua-button images should look the same (except, perhaps, for mild artifacts from the aggressive image compression I used in trying to keep the size of this web page reasonable). Color-managed browsers do this properly (Safari and modern versions of Firefox on Mac/PC, and a smattering of other minor Mac browsers).
If your browser does not honor an embedded color profile (as most don't, unfortunately), you should see the same wrong-color results as with the no-profile set of orange buttons.
2 PURPLE BUTTONS — Tagged color space
The Exif and DCF standards allows an image's color space to be noted as being “sRGB,” “Adobe RGB,” or “something else.” Advanced image-processing software like Photoshop understands these tags, but I don't know of any browser that does. Still, I've put this row so that you can test your browser.
By the way, I took all these pictures (except the one with me in it, which my wife took). I have blog posts about some of them: autumn leaves / firemen's boots / autumn house / shrine lanterns / silly slide.
In looking at the real-world tests, it's clear that when a color space is misinterpreted, the result can appear wrong — usually dull and muted. It's not as bad as the green skin of the funky color space I made up for the Page-1 example, but it can certainly be quite noticeable.
To really understand the meaning of these tests and what the results mean in a practical way, we must talk of not only color spaces, but of the larger picture of color management.
Continued on the Next Page