You have already used colors in your web page design. HTML-Kit (and all other HTML editors) do all the hard work for you. But it is a good idea to know the theory behind color syntax.
Some computers are capable of showing 16,777,216 colors, others only as few as 256. All computers will try to show whatever color you designate, and if not able, will show the closest choice.
There are 16 basic colors that started the color revolution in computing. In alphabetical order, they are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. All computers will show these colors, although slightly differently.
There are names for many more colors, but not all 16+ million. Click here to learn more about color names recognized by most browsers.
There are two other popular methods to define specific colors using numbers, the hexadecimal number method and the rgb method (also called the decimal method).
Hexadecimal Colors Hexadecimal means 16. The 16 characters 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e and f are used. The syntax is "# * * * * * *" where * is one of the 16 characters. Since there are six places for 16 characters, you have 166 = 16,777,216 possible colors.
The first two places are for shades of red, the second two are for shades of green and the third two are for shades of blue. Thus there are 16 X 16 = 256 shades of each of the three colors. The larger the number, the lighter the shade of that color. #ff0000 is 100% red shading, 0% green shading and 0% blue shading, so it shows as pure red. Similarly, #00ff00 shows as pure green and #0000ff shows as pure blue. #000000 is a lack of any color, which shows as black. #808080 is 50% shading of all three colors, which shows as a medium gray. #ffffff is 100% of all three colors, which shows as white.
RGB Colors As the name implies, rgb colors define the amount of red, green and blue to be used. The syntax is "rgb(rr,gg,bb)" where rr is the amount of red, gg is the amount of green and bb is the amount of blue. As with hexadecimal colors, there are 256 shades of each, numbered 0-255. RGB(255,0,0) is red, rgb(0,255,0) is green and rgb(0,0,255) is blue. RGB(0,0,0) is black. RGB(128,128,128) is 50% of all three colors, which shows as a medium gray. RGB(255,255,255) is white.
You can also replace the rr, gg and bb with percentages. An example of the syntax would be "rgb(50.3%,27%,89%)". Try all methods.
Here is a handy color picking tool. Most web editors have color-picking tools within (I know HTML-Kit does).
Here's another fun little color tool.
Black | #000000 | |
Gray | #808080 | |
Silver | #c0c0c0 | |
White | #ffffff | |
Navy | #000080 | |
Blue | #0000ff | |
Green | #008000 | |
Lime | #00ff00 | |
Maroon | #800000 | |
Red | #ff0000 | |
Teal | #008080 | |
Aqua | #00ffff | |
Olive | #808000 | |
Yellow | #ffff00 | |
Purple | #800080 | |
Fuchsia | #ff00ff |
If you use hexadecimal notation a lot in your pages, you will begin to recognize what the hexadecimal code is for some of the more popular colors. For instance, for the 16 basic colors, the codes are shown at left.
Can you see a pattern? With the exception of Silver, all colors listed above use only 0, 8 and f characters. Navy and Blue have no red or green in them. Green and Lime have no blue or red in them. Maroon and Red have no blue or green in them. Combinations of blue and green yield shades of marine colors. Combinations of red and green yield shades of yellow. Combinations of blue and red yield shades of purple. Silver and Gray are just lighter shades of Black.
There are newer and more powerful ways to add color to your web page, but here is how it was first done. Open sample.htm. Put comment start/end tags around the <basefont> tag. The browser will think it is a comment, and ignore it. This allows you to still have it available for review later, but not affect your page now. Now locate the Body tag. Add the following attributes to the Body tag and check the results:
By now, your sample.htm file should look like this.