Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Using Web Color : Page 3

There are two ways to bring color into your Web site—through graphics or through code.


advertisement

Specifying Color Using Hex Values
Another way to specify color is using hexadecimal values.

Hexadecimal (hex) representation of colors using a numerical system to describe the red, green, and blue values. Instead of using a 0 to 255 scale, the hex system converts the values to base 16 where counting is done 0-9 then A-F. The result is a six character value, ranging from #000000 (black) to #ffffff (white).

The chart below show how these hex values relate to our familiar base 10 system:

Base 10 0 1 10 12 15 16 17 26 31 32 153 159 160 189 204 255
Hexadecimal 0 1 A C F 10 11 1A 1F 20 99 9F A0 BD CC FF


Hex colors are represented by a 2 digit value for each primary. It is possible to create the same millions of combinations of RGB using hex values.

A color that would be specified at R=0, G=85, B=210 is written in hexadecimal as 0055D2. The first two digits are the red value, the third and forth digits are the green value, and the last digits are the blue value.

You specify hex values by typing a # and the six digit value:

{color: #rrggbb}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and hex values:

<td style="color: #00ffff; background-color:#000000">This is table cell element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.

This is a td element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.

 

Using RGB Values
Another way to specify color is by the percentage of red, green, and blue it contains or by the numerical values of red, green, and blue it contains.

You can use either percentage values or numerical values of the red, green, and blue components to specify color. RGB values work with CSS, but will not work with the (soon to be obsolete anyway) font tag.

Fireworks image editing software converts the 0 to 255 values of raw RGB models into a scale of 0-100%, where 100% is equal to 255.

You specify RGB percentage values by typing the letters rgb, an open parenthesis, the three percentages, and a close parenthesis:

{color: rgb(0%, 10%, 60%)}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and RGB percentages:

<td style="color:rgb(0%,100%,100%); background-color:rgb(0%,0%,0%);">This is table cell element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.

This is a td element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.

You can also specify RGB values as a decimal number. PhotoShop describes color as a decimal number. To use a decimal number value, type the letters rgb, an open parenthesis, the three numbers separated with a comma, and a close parenthesis, like this:

{color: rgb(255, 0, 0)}

For example, this code sets the foreground and background color for a table cell using inline CSS styles and RGB decimal values:

<td style="color:rgb(0,255,255); background-color:rgb(0,0,0)";>This is table cell element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.

This is a td element with color and background colors set via CSS. If you don't see the effect, your browser isn't CSS-compliant.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap