Consider Color: Working With Color Theory In Web Design

August 8, 2013 General 0 Comments

Working With Color TheoryThere are more than 200 million websites on the Internet today. How can you make yours attract more viewers?

Content designer Dan Rajan believes that one simple solution is color. Creative and effective use of color can attract more users to your site and make your pages stand out.

We believe that you should consider color more often, so we have put together a quick overview of color theory for Web Design. Review the highlights and focus on incorporating these color-conscious tips into your user interface designs:

Complementation, Contrast, and Vibrancy

Programmer and designer Thomas Cannon says that color theory, on its most basic level, is “the interaction of colors in a design through complementation, contrast and vibrancy.”

He goes on to define each aspect of this interaction:

  • Complementation: Refers to the way we see colors – specifically in terms of their relationships with other colors. When colors from opposite ends of the spectrum are paired together, viewers consider them more appealing. They are called “complementary colors” because the eye is provided balance through the combination of these two opposites.
  • Contrast: Refers to a clear division of elements on a page, which reduces eyestrain and allows the viewer to focus their attention. Be conscious of how your background and text colors contrast. Cannon recommends that if you are ever in doubt of the readability of your page, you should use a light color for the background and a dark color for the text. Keeping it simple and legible is always effective.
  • Vibrancy: Refers to the way colors make your viewers feel. If you use brighter colors in your design, your viewers may feel more energetic. Darker colors, on the other hand, allow viewers to focus and appear more relaxing or serious.

Common Colors Defined

You should also familiarize yourself with the ways in which most colors are perceived. Six Revisions reporter Shannon Noack and Smashing Magazine reporter Cameron Chapman defines the most common colors and what they mean to Western audiences:

  • Red: Associated with energy, fire, power, excitement, passion and importance. Though it can be overwhelming if it’s used too much, red can be a powerful accent color.
  • Orange: Symbol of happiness, joy cheer, sunshine and childhood. May also be associated with ignorance and deceit. In Web Design, it can be used to command attention – without being as overpowering as red.
  • Yellow: Considered a very positive color. Associated with joy, intelligence, brightness, energy, optimism and happiness. Use bright hues to evoke these emotions. Use darker or gold-hued yellows to evoke a sense of permanence.
  • Green: Most commonly associated with nature and good health. Can also imply growth, harmony and safety. When creating a user interface, incorporate green to balance your page and harmonize your elements.
  • Blue: Implies peach, calm, stability and expertise. It’s the most commonly used color for corporate logos. Be very mindful of hues when using blue, as different hues might imply sadness, peace or even religious connotations.
  • Purple: Historically associated with royalty, making it a sophisticated and luxurious color. Can also be associated with creativity and feminine qualities.

These colors can evoke either negative or positive responses, depending on how they are used. Remember to be mindful of color use. Also, keep in mind that there is some debate about the influence of colors on audiences. Color theory may change from country to country – so, if you hope to design for companies abroad, you may want to continue researching.

Color Schemes

The most commonly accepted color scheme structures are:

  • Triadic: Refers to three colors on separate ends of the color spectrum. To find these colors, Cannon recommends using a color wheel. Choose your base color and then draw an equilateral triangle from that point – the three points of the triangle will be your three base colors. These three colors will always complement one another and be balanced.
  • Compound or Split Complementary: Based on a range of complementary colors, or two colors that are chosen from opposite ends of the color spectrum. These colors are more flexible than the triadic scheme, but have the potential to be just as visually appealing.
  • Analogous: Selection of colors from the same area of the spectrum. Cannon notes that these colors must be picked out and used carefully.

Rajan offers great examples of sites that are using colors schemes creatively. Review his list, consider their schemes and analyze how their choices work together to convey different messages.

If you are interested in more information about color theory, talk to your instructors or Web Design and Development degree program advisor.


What do you think?