Lesson 1: Understanding Color in CSS


In this lesson you will revisit color theory (which you learned about in an earlier lesson) and apply it when selecting an appropriate color scheme for websites.

The colors you select for a site should be suitable to the site's purpose. Your client may have an image or reputation they wish to project, and probably have a particular target audience in mind. Appropriately chosen color schemes can reinforce a desirable image and support the site's overall purpose.

Learner Outcomes

At the completion of this exercise:


  1. Browse the Web, looking for two example websites: one that you feel users color effectively, and one that you feel does not. Compare your two examples with those of other students in your class. As a class, discuss why you chose these particular examples. Do you agree with others' examples? Do other students agree with yours?
  2. Now, choose one of these fictitious clients:
    • kindergarten teacher
    • medical clinic
    • landscape architect
    • bank
    • online bookstore
    • city government
  3. Consider the image or reputation your client wants to promote, as well as their purpose (to welcome/ introduce, to sell, to gain customer confidence, to inform, etc.) Use either the Color Scheme Designer or ColorBlender to pick an entire color scheme for your client. These sites have many options and controls - explore them all, and watch how they effect your color scheme.
  4. When you feel that you've selected the perfect color scheme for your color, show it to your instructor, and explain why you feel this color scheme is right for your client.
  5. In the next lesson you will apply the colors you've selected to your portfolio website.

Handouts/Online Documents

All done?

Proceed to Lesson 2.