Colors Affect Colors

One bothersome complication for anyone trying to match colors is that colors actually change depending on the colors around them. Here's a quick test you can run to prove the point. Find a bright light source, like a bare bulb, and hold your arm out in a thumbs up gesture, with the thumb centered on the light source. You should see little or no detail in the thumb, and may see your thumb only as a silhouette against the light.

Then, while still looking at your thumb, slip something opaque between the thumb and light source. Your eye should adjust quickly, and let you see details of your thumb.

This change in appearance of a central area in your field of vision because of a change in another area is called simultaneous contrast. It affects not just how much detail you can see, but shades and color as well.

The images on this page may or may not illustrate this point on your screen. Whether they do or not depends on how well your screen replicates the colors as they were designed to be seen on the computer in which they were created. It also depends on your screen resolution and screen size, which will both affect the size of the different parts of the images.

If these images don't show what they are meant to on your screen, you may want to print them to see if the printed versions illustrate the point. I've included enough variations so that at least one or two should demonstrate what they are meant to on almost any screen or printer, and added links to a few other Web pages with equivalent images. (These are only a small sampling of what's available on the Web. If you want to see more, try searching for "Simultaneous Contrast" on your favorite search engine. A search on www.google.com turned up about 1500 hits with a good proportion of examples in the 50 or so that I looked at.) If all else fails, you can find these images in my book The Underground Guide to Color Printers, published by Addison-Wesley.

The smallest gray squares in this image are the same shade of gray. However, the one on the left should look darker than the one on the right, because of the surrounding squares. The one on the left should also look just a bit smaller, even though it's the same size as the one on the right.

This image is similar to the one above, but with more extreme contrasts. Here again, the smallest gray squares in this image are the same shade of gray. However, the one on the left should look darker than the one on the right, and it should look smaller, even though they are both the same size.(If you don't see the effect here, try http://www.yorku.ca/eye/simcont2.htm)

Simultaneous contrast also affects colors. The two green squares in this sample are both the same color, but the one on the left should look more of yellowish green, or lighter. The one on the right should be more of a bluish-green, or darker.

The two orange circles in this sample are, once again, identical. Depending on the particular colors your monitor or printer produces for this example, the orange circle on the left may appear noticeably darker than the one on the right. Or the one on the left may appear more orange, and the one on the right more red.

The filled-in circles on this sample are also the same color. Depending on how these colors map to your monitor or printer, the one on the left may look much lighter than the one on the right.

On the right printer or screen, this image can show a dramatic difference between the green areas on the top half and the ones on the bottom half. All the green areas are the same color, but the ones on top can look a lot darker than the ones on the bottom.

This example differs from the others. Every other example here is meant to show that the same color can look very different depending on the surrounding colors. This one is meant to show how two very different colors can look the same. Given the right interpretation of the colors by your monitor or printer, the two sets of diagonal lines in the image -- or two Xs if you prefer -- should look like the same color, or nearly the same. The two strips to the right side of the image show how different they actually are. (If you don't see the effect in this sample, try http://www.cs.umb.edu/~ram/courses/color/albers.htm)

If you don't see the effect in these samples, try http://www.yorku.ca/eye/thejoy.htm http://www.projectcool.com/developer/gzone/color/sim_contrast.html http://www.projectcool.com/developer/gzone/color/sim_contrast.html http://www.education.siggraph.org/materials/hypervis/vision/contrast.htm

Copyright © 2004 Ziff Davis Media Inc. All Rights Reserved. Originally appearing in ExtremeTech.