Colors In Context

one color looks different on different backgrounds
The two center squares are both 60% grey.

Parts/Contexts:

Any graphical image, including printed and electronic pages, and computer software displays and GUIs (graphical user interfaces)

Keywords:

color theory, context, background, figure-ground relationships, color shift, fluting, ambient light, psychological associations

Predecessor Patterns

. . . effective use of color to help convey a message is described in Color Is Information, but colors change depending upon the context in which they are used.

Problem Summary

When the same color is used in different contexts the perception of that color can change radically.

Analysis

On Color Theory

Color is a deep subject. Artists and designers spend a long time mastering color theory. Perhaps the world's foremost master of color is Josef Albers, whose paintings are essentially case studies in color, demonstrating how the same color can look radically different (or even how two different colors can look the same) depending upon their contexts. We won't attempt a complete Albers color course here, but we can provide a few pointers about how color perception is contingent upon the context, including background and adjacent colors, ambient and reflected light, and psychological associations.

Everything we see consists of colors, including shades of grey, black and white. As an experiment cut black or white areas from magazine photos and place them together. Not only will one black appear dark grey against a "blacker black", but you will see that most of what we perceive as black is in fact dark blue, purple, green, red and so forth. Similarly, what we perceive as white is in fact a very light color.

Background Colors

A single color may look very different on different backgrounds. This effect is easiest to achieve with secondary colors placed on their constituent primaries: an orange will look more red on yellow, and more yellow on red. The effect can also be achieved by placing a low-saturation (greyish) color on background colors it is between within the color wheel.

grey swatch Consider this medium grey. We can change the color we perceive it to be by varying its context or background. To illustrate let's experiment with two other colors we wouldn't normally think "go together" with grey, colors we'll call "olive" and "lavender".

grey on olive and lavender If we place this grey in the middle of an olive and a lavender field, it appears to be two very different colors. Because the colors are of similar saturation and value, the grey on the olive looks almost like the lavender, and the grey on the lavender looks almost like the olive. This effect becomes stronger as one stares at the edge between the lavender and the olive.

Adjacent Colors

grey between olive and lavender If we place the grey between the olive and lavender it begins to "flute", that is, its right edge looks like the color on its left, and its left edge looks like the color on its right. The effect becomes more pronounced the more one stares at one edge of the grey, then shifts the stare to the other edge of the grey. Similar effects can be used to create illusions of transparency.

dark olive, olive, grey, lavender, bright lavender The fluting effect can be further extended if we place a darker olive on the left and a brighter lavender on the right. Notice how the original olive and lavender now also flute just like the original grey. Also notice that the effect is more pronounced on the lavender end of the spectrum because those colors are brighter.

dark olive, olive, grey, lavender, bright lavender If we place these same five colors together in a narrow band they begin to look like one continuous airbrush effect. This is because the colors of each adjacent pair are very close to each other, making the edges between them very soft. This can be used to an advantage. For example, a painting may utilize all sorts of colors for skin tones, including violets and greens, that blend together at a distance to appear quite realistic. On the other hand, this would be a poor choice for figure-ground relationships that require high definition, such as type on a background.

At the other extreme are highly contrasting colors that create hard edges. But certain contrasting colors placed together will create an edge that "vibrates" optically. Adjacent colors will vibrate if they are highly saturated (vivid) and roughly the same value (brightness or intensity). The effect is most pronounced with complementary hues (colors diametrically opposed to each other in the color wheel). While this may be effectively used for applications like op art, you (usually) don't want to force people to read vibrating text.

Lighting Conditions

Ambient and reflected light conditions also affect color. Take a close look at the shiny surface such as that of a car. It may actually contain a miriad of colors in the reflections, and change radically from day to night, yet we perceive it to be the same color. Photographers capitalize on this by "bouncing" different types of light onto their subjects. Even the color of your clothes can change the colors you perceive, or the complexion others perceive you to have.

Psychological Associations

People make all sorts of associations with certain colors, and artists and designers use them all the time, but these associations are highly contextual. For example, in one context a magenta may seem "happy" or "festive"; in another it may seem "fruity". Or consider associations with blue: feeling blue, a financial balance in the blue, cool blue water, blue suit executives, a blue corpse and blue movies have few connotations in common. Across cultures common associations with color are even more variable. Be careful of applying cliched meanings to colors.

Solution Summary

Therefore:

Use colors that are appropriate for the context. Consider how color perception changes depending upon the physical and psychological setting:

  1. Colors shift relative to their backgrounds: a green looks more yellow on blue, more blue on yellow.
  2. Similar colors next to each other will have soft edges that blur.
  3. Saturated complementary colors next to each other will have hard edges that vibrate.
  4. Ambient and reflected light alters color perception.
  5. Psychological associations with different colors are situation specific.
These effects can work for you or against you depending upon your intent.

Successor Patterns

When choosing a color palette consider Colors for the Colorblind. For Web page and other hypertext links use Consistent Link Colors. . . .


References/Sources

  1. Interaction of Color, Josef Albers, Yale University Press, New Haven, CT, 1975.
  2. Graphic Design for Electronic Documents and User Interfaces, chapter 4, Color, Aaron Marcus, ACM Press, 1992.
  3. Exploring Color in Interface Design, Subing, Falk & Johansen, Interactions magazine, July/August, 1996.

Author/Date

Gary Swift, 20 August 1996
This pattern was originated by the author at INTERACTIVE Systems, Corp. in 1989, for the CUI interface to the bootstrap of INTERACTIVE UNIX which was highly constrained by the 16-color PC/AT palette.
Last updated: Saturday, 22-Sep-2012 18:29:33 MDT

Sponsored by

http://www.DesignMatriX.com