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;
background-color: #006600
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.

Free Business Web Hosting

If you are building a website for a business or organization, you can put it online for free at Microsoft® Office Live Small Business. You can create your website with HTML and upload it or use their tools and build it online. Take your business online with Microsoft® Office Live Small Business. Get started for FREE! Take the TOUR!

Create Web Sites without Learning Code

Create web sites online without learning any code using Yahoo's simple but powerful Site Solution builder.
Try the Site Solution Demo

Sitebuilder 2.6 is even better than previous versions of Yahoo's downloadable builder. Download it to your PC and create a web site with all the bells and whistles.

Start today and SAVE 25% on your first 3 months.

Get everything you need for a great web site with Yahoo! Web Hosting - 25% off

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: September 13, 2008

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites