5. The Use of Color

Companies often have a color associated with them. The company logo has a predominant color and this color is carried through their branding. Take the Green Bay Packers, the green and gold is nearly synonymous in the minds of football fans with The Pack. Their website uses the green and gold theme in the design of their website to good effect, with titles and fonts, highlights and backgrounds, adhering to the theme. The use of images that showcase the green and gold as well is a subtle but effective application of this principle.


Antivirus software apps follow the color theme of the company. Symantec and Norton products use gold and dark brown (or gold and black) in their website and in their app. Kaspersky uses green. Trend Micro augments this and uses red and white, with complementary colors to highlight.

Use colors that complement each other

If you have no sense of “color style,” use a color wheel to get complementary colors (ref: Color Theory)

Some people have no sense of color. You’ve seen them—images of guys who should let their wives choose their wardrobe spring readily to mind.

For the layman, there is a tool known as a “color wheel” that displays the spectrum of colors. Googling “color wheel” or “color theory” will bring up numerous references on how to use the color wheel to choose the correct that complement each other. Several references are listed at the end of this chapter and more can be easily found online.

The wheel on the left shows the 12 major colors, called hues. The wheel on the right shows the infinite gradations blending from color to color (hue to hue).

You can also have “flavors” of a color. Starting with the standard hues, going to lighter or darker colors is defined by the following:

  • A tint adds white to a color
  • A shade adds black to a color
  • A tone adds gray to a color

The wheel on the left shows the range of tints—amount of white—in a color, with gradations from pure white to the solid hue. The wheel on the right shows the twelve standard hues with the respective tints, shades and tones.

The Color Theory charts discussed in this write-up identify what combinations of colors can be used together. In addition, you can use tints, shades and tones of a hue with the pure hue with good effect.

Certain combinations of colors are pleasing to the eye. These combinations have been codified into rules, called relationships. These rules can be found by searching “Color Theory” and “Color Wheel.” Knowing and using these rules will yield color combinations that customers find pleasing. Combinations of colors that are different than the rules are jarring to the eye.

When you select a color and theme, follow the color wheel to select your complimentary colors.

Using colors in your app from the wrong combination(s) will produce a UI that, when viewed by customers, will not be accepted and even worse, rejected and not purchased or used.

Using colors with conflicting tints, shades or tones can also result in visual displeasure. For example, orange and blue are complementary, according to the chart. But a dark blue with a light orange isn’t quite as pleasing, or a dark orange with a light blue. When using tints, shades and tones, first match the colors according to Color Theory, and then use the same level of tint, shade or tone with all colors.

  • Seth Wilson has a couple of great charts on Color Theory. Google “Seth Wilson Color Theory” to find copies of his charts, as well as related references.
  • graf1x.com has interesting information on the history of the color wheel and sells posters.
  • inkfumes.blogspot.com also has information and a source for Color Theory posters as well.

The main point of this chapter is that COLOR is important, using color consistently throughout the app is important, and the various colors used need to be coordinated. Following Color Theory will help you coordinate your colors in a way that is pleasing.

This chapter is by no means a complete tutorial on Color Theory! It points you to Color Theory and emphasizes the importance of following it. It works.

©2017 Curt Larson. All Rights Reserved.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s