Webwork
/
Predefined and Hexadecimal Colors

There are several ways to specify color in HTML. The easiest is by color name. The most common is by hexadecimal number.

The 16 "predefined" HTML colors that can be specified by name

       
Black Silver Gray White
       
Maroon Red Purple Fuchsia
       
Green Lime Olive Yellow
       
Navy Blue Teal Aqua

Example:

Source:
body {
background-color: teal;
}
Web page:
 

Obviously, 16 colors make a very limited palette and, if you want to greatly expand it, you'll quickly run out of color names. ("Sort of gray with a little greenish yellow" doesn't cut it when you're writing code.)

To expand the available pallette, colors are specified using hexadecimal numbers.

Hexadecimal Numbers

The hexadecimal system for specifying colors is widely used in computer programing. Hexadecimal numbers are a base-16 number system which means the "numbers" are:

0 1 2 3 4 5 6 7 8 9 a b c d e f
« minumum maximum »

To design Web pages, you don't really need to have a full understanding of this. To write computer programs, you do. At this point, all you need to remember is that 0 is minimum and f is maximum.

RGB Colors

There are several ways to mix primary colors to create other colors.

When mixing paint, we're used to combining various amounts of red, yellow and blue to create other colors.

Designers who work in print are used to thinking in terms of CMYK - cyan, magenta, yellow and black inks.

Color photographers think of color as either additive (red/green/blue) or subtractive (yellow/magenta/cyan) depending on what they're doing.

Computer programmers and Web designers think of color as various amounts of Red, Green and Blue.

To specify color in computer code, you are using the additive system so you specify the amount of red, green and blue using hexadecimal code.

The basic formula:

  Red Green Blue

The color red specified with hex code:

# ff 00 00

The color yellow specified with hex code:

# ff ff 00
 

The color blue specified with hex code: #0000ff (no red + no green + max blue)

The color cyan specified with hex code: #00ffff (no red + max green + max blue)

The color white [white] specified with hex code: #ffffff (max red + max green + max blue)

The color black specified with hex code: #000000 (no red + no green + no blue)

The color gray specified with hex code: #666666 (med red + med green + med blue)

Hex colors are always preceded by: # (called the "pound sign," "number sign," "hash tag" or "octothorpe")

Sample color tags:

Source:
body {
background-color: #996666;
}
Web page:
 
Source:
body {
background-color: #99cc99;
}
Web page:
 
Previous | Webwork Table of Contents | Next >