Color Theory

This module provides an introduction to color theory and helps to teach and reinforce basic color principles. The importance of this module stems from the fact that color choice plays an important role in visitors’ initial reactions to websites and should therefore be taken very seriously. This is also an early opportunity to discuss accessibility: People perceive color differently. Some colors don’t translate well across browsers. Some people (such as those with color blindness) may be unable to perceive color at all. It’s important for websites to be accessible to all of these individuals.

Lesson 1: Color Theory in Web Design

The purpose of this lesson is to gain a general understanding of the concepts of color use in effective web design.
Learner Outcomes

At the completion of this exercise:

you will have a better understanding of effective use of color on the web.
you will be aware of some excllent color-related resources.


Read both of the resources in the Resources section below.
Reading Check: Respond to the following questions. Have your instructor review your answers.
What are the three basic colors that monitors transmit?
How many colors can be referenced by name (e.g., “red”) in HTML 4.01?
How many different colors are there in the web-safe palette?
Are the majority of people we refer to as color blind unable to see any color at all? Explain.
According to the WebAIM site, what is the key to designing sites that are accessible to people who are color blind?

Lesson 2: Selecting a Color Scheme

The purpose of this lesson is to apply knowledge learned in Lesson 1 toward color selection for a website.
Learner Outcomes

At the completion of this exercise:

you will have a better understanding of effective use of color on the web.
you will be aware of some excellent color-related resources.


Color theory consists of some very basic principles. Once you know these principles, working with colors will be demystified. The basic color principles are listed below, along with websites for you to investigate. Visit the sites and read the information carefully, because you will be expected to apply the concepts by the end of this lesson.
Primary, secondary and tertiary colors Color Wheel and Color Theory
or Color Theory
Monochromatic, complimentary, triadic (color triads), analogous color schemes Color Theory Basics
or Color Theory
or Color Combinations
Contrast Color & Contrast
The colors you select for a site should be suitable to the site’s purpose. Also, your client may have an image or reputation she or he wishes to project. Appropriately chosen color schemes can support the site’s overall purpose and reinforce a desirable image. From the list below choose one of these fictitious clients. Consider the image or reputation the client wants to promote, as well as their purpose (to welcome/ introduce, to sell, to gain customer confidence, to inform, etc.) Use the Color Scheme Designer to pick an entire color scheme for one client.
kindergarten teacher
medical clinic
lanscape architect
Either write or type the list of colors you chose. Be sure to list the following:
text color
background color
main color in the banner and other key images
navigation color
Also state what type of color scheme you chose (monochromatic, analogous, etc.) and why you felt it was appropriate for that client.


Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s