Lesson 7 - Colors

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:

<body bgcolor="navy" text="yellow">

By now, your sample.htm file should look like this.

Lesson 6C Meta Tags/DTD   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 8 Inline Style

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,941 different visits in the last 30 days.
435,416 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson07.php
This page was last modified on our server on 26 Sep 2013
and last refreshed on our server at 12:20 pm, MST
This file took 0.00936 seconds to process.