A fundamental aspect of color perception is that colors influence one another.

In the above graphic, the inner squares are the same color, though they appear different. This difference is caused by the influence of the larger surrounding squares.

Here is another example where the only influence is value–how light and how dark.

Here is a more subtle example where the only influence is chroma–a measure of pigment or saturation.

By clicking on any of the examples, you can alter the three areas of color. And adjust the areas by hue, chroma, and value. You’ll notice that some of the scales have gaps in colors. These gaps are colors that cannot be expressed in your browser¹.

The general idea behind this color influence is that each color adds some of its opposite to the other. In the above examples we’ve varied color by hue, chroma, and value. In hue, a color influences another by adding some of the hue that is 180 degrees around the color wheel. In chroma, a more saturated color influences another color to look less saturated. In value, a darker color makes another look lighter.

In the following example a gray background is chosen against a blue inner square. This gray varies only in chroma from the blue, which makes it a good candidate to minimally affect the blue. On the other hand, the red is nearly opposite in hue, maximising its effect on the blue. If you focus your gaze down the middle, the effect is more clear.

The interaction of colors (and this particular illusion) are the primary subject of Josef Albers’ Interaction of Color. It’s an enjoyable read and the source material for this post. Hope you enjoy playing with the examples :).