One of the most important aspects of a Web site is the color scheme. You may remember using color codes in your previous year of Web design, but do you understand them?
Web designers tend to use hexadecimal RGB codes to indicate color choices. "Hexadecimal" means base-16. That is, each digit of the code is one of 16 values. These values are indicated by 0-9 and A-F. A is the next value up from 9 (like 10 but with only one digit), B is next, then C and so on to F. "RGB" means that there are three components to each color: Red, Green and Blue. The code is formed with two digits of Red, two digits of Green, and two digits of Blue.
Thus, the six-digit code #FA368B has a value of FA for Red, 36 for Green, and 8B for blue.
But what do these numbers really mean? Each two-digit color value represents and amount of colored light. The range is: 00, 01, 02, ... FC, FD, FE, FF. The beginning of the range, 00, is no light, and FF is full light.
Below is a summary of some common color codes. Notice how the Red, Green, and Blue components combine to make the colors.
| Color Sample | Hex Code |
|---|---|
| #000000 (black) | |
| #888888 (medium gray) | |
| #FFFFFF(white) | |
| #FF0000 (red) | |
| #00FF00 (green) | |
| #0000FF (blue) | |
| #FF00FF (purple) | |
| #FFFF00 (yellow) | |
| #FF6600 (orange red) | |
| #FFEFD5 (papayawhip) |
Go to the Visibone Colorlab at http://visibone.com/colorlab. Click on a color from the upper left corner. This site is a great resource for finding color codes and looking at what colors go well together. Click around and find at least 3 colors that you think will go well together.
View the source of this Web page and examine how I used inline styles (with the style attribute of the element) to apply background colors. In the next activity, you will use an external style sheet so that you can apply the same background to as many pages as you like.