Color by Number
When you write valid XHTML colors you have to use a code called a hexadecimal code or hexadecimal triplet. This means:
- triplet
Each color is defined as the amount of saturation in three color chanels:- Red (R)
- Green (G)
- Blue (B)
RGB color channels have a saturation ranging from 0 (no saturation) through 255 (fully saturated). So, to define a color using RGB, you indicate how much saturation in each of the color channels, for example:
- Red (255,0,0)
- Green (0,255,0)
- Blue (0,0,255)
- White (255,255,255)
- Black (0,0,0)
- hexadecimal
Once you have figured out the RGB values of the color you would like to use, you need to convert it to base 16 or hexadecimal.
The easiest way to convert an RGB value to hexadecimal is to use a program.
This is a nice one.
You can also use the standard calculators on Windows or Macintosh computers:
How to on Macintosh
How to on Windows
- Red #ff0000
- Green #00ff00
- Blue #0000ff
- White #ffffff
- Black #000000
Combine your three RGB numbers into a six digit hexadecimal number preceded by a pound-sign (#).
What Items Can You Color?
In Web design, nearly everything has a color from the images you post on the page to the background of the page to the actual text on the page. But for the purposes of this article, we're going to talk about two primary items:
- text - the color of the letters
- backgrounds
It's easy to change the color of text, simply use the style property, color:
color : #ffcc66;
More on the color property.
Backgrounds are just as easy with the style property background-color:
background-color : #ffcc66;
More on the background-color property.
But backgrounds are tricky because you must ask "The background of what?". There are many things you can change the background color to, such as:
- change the text color background:
Use the style property on a span, div, or p element. - change a table background:
Use the style property on a td, th, tr, or table element. - change the entire page's background:
Use the style property on the body element.
Using color is vital for Web pages. And these hints and instructions should help you to use color as effectively as possible.
