TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
 Specialized Dev Zones Research Center eBook Library .NET Java C++ Web Dev Architecture Database Security Open Source Enterprise Mobile Special Reports 10-Minute Solutions DevXtra Blogs Slideshow

 Author Feedback Print Article Comment on this Article

# Using Web Color : Page 3

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

 by DEVX Staff
 Jan 1, 2000
 Page 3 of 4

### WEBINAR:On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning

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.

 Author Feedback Email Article Print Article Comment on this Article
Comment and Contribute

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

Thanks for your registration, follow us on our social networks to keep up-to-date