Adding Color to a Web Page

When adding color to your web page, don't go crazy. Don't use more than 2 or 3 colors in the basic design of your page.

Always use colors that are related in some way. Some common color relationships are: complementary or contrasting, neighboring and monolithic.

We're using three colors to develop this website. The first 2 are complementary or contrasting colors. The third is related to the dark green.
#006600 #660000 #80ff80

The color definitions on our style sheet look like this:
color: #80FF80; (foreground )
background-color: #000000 ( body)
background-color: #006600 (divisions )
The foreground and background colors are expressed in hexidecimal code. Hexidecimal code allows you to be very precise in your color choices.

There are pages all over the internet that provide hexidecimal color codes.

I've provided a simple Hex code Color Chart to help when you start picking colors for your website.

I've also provided a Color Scheme Tool to help you learn about color relationships.

Take a short quiz on the information you just learned.

You've seen what the background color setting in our style sheet does. In this next lesson, we'll add a page heading and see what the foreground color setting does. Let's add a heading.