Home arrow HTML arrow Page 2 - Color Composition and HTML
HTML

Color Composition and HTML


The aim of this article is to make you understand the composition of colors and their relationship to HTML. You will learn how you can see a color and reproduce it using numbers.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 19, 2008
TABLE OF CONTENTS:
  1. · Color Composition and HTML
  2. · Possible Colors
  3. · Similarity in Colors
  4. · Making Colors Darker or Lighter

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Color Composition and HTML - Possible Colors
(Page 2 of 4 )


Possible Colors

The HTML specification requires browsers to be able to recognize the following 16 names of colors: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, and aqua.

This means that if you want the above cell to have a color of navy and a background color of fuchsia, you would type the following in the style sheet:

td#td1 {color: navy; background-color: Fuchsia }

Browsers can actually recognize more than these 16 names. However, if you design web pages by hand, you may not be able to remember more than these 16 colors. The next section shows you how to solve this problem.

Composition of Color

There are three fundamental colors. You know many colors, but each of the colors you know is made up of a combination of one or two or three of these fundamental colors. These three fundamental colors are red, green and blue.

HTML gives you 256 intensities (levels) of each of these three fundamental colors. The intensities are identified by the numbers 0 to 255 (not 1 to 256). This means that the red color can have any number from 0 to 255 (e.g. 0, 1, 2, 200, up to 255). This is also true for the green and blue colors. With this, the navy color is written as rgb(0,0,128), where rgb stands for red, green, and blue; the first number is for red intensity, the second number stands for green intensity, and the last number is for blue intensity. The three numbers are separated by commas in the expression. The fuchsia color is written as rgb(255,0,255). So the above line of code can be written as

td#td1 {color: rgb(0,0,128); background-color: rgb(255,0,255)}

where navy has been replaced by rgb(0,0,128) and fuchsia has been replaced by rgb(255,0,255).

The black color does not exist. You may be surprised to hear this, but it is true. The sensation of black is the absence of all three fundamental colors. This means that if you perceive a black color on an area of the screen, no color is actually emitted from that area of the screen. On the other hand, in HTML, white is a combination of the three fundamental colors, each at its maximum intensity. So the color black is written as rgb(0,0,0) and the color white is written as rgb(255,255,255).

The following table gives the Red-Green-Blue combination of the 16 colors mentioned above.


Color Name

RGB Equivalent

Black

rgb(0,0,0)

Green

rgb(0,128,0)

Silver

rgb(192,192,192)

Lime

rgb( r0,255,0)

Gray

rgb(128,128,128)

Olive

rgb(128,128,0)

White

rgb(255,255,255)

Yellow

rgb(255,255,0)

Maroon

rgb(128,0,0)

Navy

rgb(0,0,128)

Red

rgb(255,0,0)

Blue

rgb(0,0,255)

Purple

rgb(128,0,128)

Teal

rgb(0,128,128)

Fuchsia

rgb(255,0,255)

Aqua

rgb(0,255,255)

So instead of typing any of the above names in your CSS, you can type the equivalent RGB code. For example, instead of typing “purple,” you can type “rgb(128,0,128)”.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials