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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma