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. You can also use the standard calculators on Windows or Macintosh computers:
How to convert RGB to Hex on Macintosh
How to convert RGB to Hex 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 add color to two items on the page:
- text ‒ the color of the letters
- backgrounds ‒ the color behind the letters and images on a page
It's easy to change the color of text, simply use the style property, color.
color : #ffcc66;
Backgrounds are just as easy with the style property background-color.
background-color : #ffcc66;
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 tags. - change a table background:
Use the style property on a td, th, tr, or table tags. - change the entire page's background:
Use the style property on the body tag.
Using color is vital for web pages. And these hints and instructions should help you to use color as effectively as possible.
