RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Design with Color : Page 2

Color is a wonderful tool in the Web design tool box. It can add navigational meaning, understanding, and mood and tone.


Color Perception
Our eyes translate colors in surprising ways. Most people share three common effects, demonstrated in this section.

Simultaneous contrast describes the way a color object seems to change size and intensity based on the colors nearby.

Chromatic induction describes the way adjacent colors alter the way the color itself is perceived.

Afterimage describes the way high contrast colors make you "see" their complementary colors after looking away.

Simultaneous Contrast
The same color can appear very different depending on its surroundings.

Because we cannot look at colors as isolated instances, the appearance of any color is affected by what surrounds it. Simultaneous contrast is the term that describes the effect.

For example, color areas tend to look darker and smaller against light backgrounds... and the exact same color area will appear lighter and larger against dark backgrounds.

The squares above are the same except for their background colors. Notice how the squares look darker and smaller against white, and lighter and larger against black.
This is also true for type. The letters of the black type seem thinner than the white type.

Chromatic Induction
The actual color of a color may appear to change based on its surrounding colors.

Surrounding colors can influence the way you see a color. They can give the color the appearance of being tinged with the complementary hue of the surrounding area. Colors that are the same may appear to be different, and colors that are different may appear the same. The effect is called chromatic induction.

The small green squares are the same color. Hold your hand to the screen and block out the adjacent blocks, showing only the two green square, and you'll see how dramatic the chromatic induction effect is.
These two brown shades are different colors—yet the square blocks appear to be the same shade of brown. It is only when your eye follows the line down that you see how different the shades are. Cover the bottom part of the illustration with your hand and look only at the brown boxes to see the way the chromatic induction effect impacts the way you see color.

While this can enrich the possibilities from the designers point of view, it can also cause the viewer to see colors differently from the way the designer intended them to be seen. What happens when that green logo is placed on a black page? On a yellow page? On a gray page?

Either avoid unwanted color perception by using a neutral gray background or be aware of the effect as you design and think about how elements will be placed in relation to each other and to different backgrounds.

Strong colors stay in your perception after you look away.

Areas of strong color and high contrast can produce ongoing images when the viewer looks away. The color of the afterimage is the screen color's complementary tones—remember how those green monitors had you seeing bright pink images after you'd been working on them for hours? This effect is called after-image.

After-image results from strong colors and high contrast. Strong/high combos also result in visual stress with prolonged viewing. Consider this effect on your readers eyes as you make color selections.

Stare at this red square for a full minute and then, keeping your eyes open, look away at a white wall. You will see an afterimage of a turquoise-greenish square. The after-image lasts for 5 or 10 seconds, depending on your eyes.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date