Web Design Color Scheme Assignment

Files to Download

In this assignment, you will experiment with creating color schemes. You will need to download several files to your folder for this assignment.

  1. Create a new folder inside your folder. Call it "Color Schemes".
  2. Save the files below in this new folder. To download, right-click the link below and select "Save Target As..." Be sure to save the files in your new Color Schemes folder.
Here are the files:

Directions

You are going to create four different versions of this html page. You will not change the html code at all in any of these pages, with one exception: In each page, you will add a link to a different css file.

Your four html pages will each have their own css files. They will illustrate four different types of color schemes: monochromatic, complementary, analogous, and triadic. Name them "color-mono.html" and "color-mono.css", "color-comp.html" and "color-comp.css", etc. Save them all in your new Color Schemes folder. You will have eight files when you are done (html and css for each of the four types).

Come up with a color scheme you would like to use for each of the four types. Important! The two jpgs in your page are part of the color scheme. You must include their colors in your scheme.

Then in your css files, create style rules that will apply those colors. In every css file, you should have style rules for

  • The page heading
  • The text
  • The links in all states (a:link, a:vitisted, etc.)
  • The image captions
  • The background
  • Borders (How you apply these is up to you.)

In addition to style rules for color, you need to have the following. The rules for the items below can be the same for all four versions if you like (but they don't have to be).

  • Float
  • Font-family
  • Font-size
  • Text-decoration:underline (for hyperlinks)
  • Margin and/or padding
  • Borders

Resources

Don't forget the color scheme resources I listed on the main class page. I'll list them again here:

A Friendly Reminder

Don't forget your other design principles. From now on, your work will be judged not only by its color scheme, but also by

  • Proximity
  • Alignment
  • Repetition
  • Contrast

Special Thanks

None of the artwork used in this lesson is under copyright. However, I am grateful to The Artchive for making it available. I would encourage anyone who has a use for art files to support their great website!