Bits & Bytes

Colors in a computer are made up of three color channels: Red, Green, and Blue. These three channels are combined to form all colors. For example, when the three channels are at their maximum value, we get the color white. On the other hand, if all of the channels are set to zero, then we get the color black. We have several methods for setting a color in CSS.

RGB Values

For our first method of setting a color, we use the rgb() functional notation. Inside the parentheses, the three values are given as comma separated decimal integers that range between 0 and 255. Above, we have a div that we set with the values red = 255, green = 240, and blue = 200. Since all of the channels are close to their maximum value of 255, the color is close to white. However, is has an orange tint because the red and green channels are the largest.

RGB Percentage Values

Instead of the values 0 to 255, we can use percentages. The notation is similar to the prior RGB Values except that the values are given as percentages instead of integers: rgb(65%, 95%, 75%). So, the value 0% is is the same as 0, and the value 100% is the same as 255, in RGB Values. Percentages can be given as fractional numbers, since they will be mapped to the range of values 0 to 255. For example, the color above, rgb(65%, 95%, 75%), is the same as rgb(255*.65, 255*.95, 255*.75) = rgb(165.75, 242.25, 191.25). Of course, since the color values can only be integers, these values are rounded to integers before they can be displayed. The color above has a larger green component in it, so looks green.

Hexadecimal RGB

If you are wondering why the color values run from 0 to 255, then you might not be familiar with hexadecimal. However, you should learn it because it is a more convenient format for representing how computers store numbers. If you are not familiar with it I suggest watching our short videos on bits and bytes and binary, octal, and hexadecimal. These videos will go a long way toward clearing up this extremely important topic, which is likely to trouble you until you get it sorted out.

The hexadecimal RGB format uses a # sign to signal the hexadecimal format, which is then followed by three sets of two hexadecimal digits to represent the red, green, and blue channels:

   #f4cfe5.

These values convert to f4 = 244, cf = 207, and e5 = 229 in decimal. It takes some time to get used to hexadecimal. Once you do, however, it is more convenient to work with since the values from 0 to 255 can be represented with exactly two digits in hexadecimal. As you can see, the color above is a light purple because the red and blue channels are the largest.

Hexadecimal RGB Abbreviated

The abbreviated hexadecimal format is similar to the two digit hexadecimal format, except that it only uses one digit to represent two digits. It does this by repeating the single hexadecimal digit. So, the abbreviated hexadecimal value #adf is the same as #aaddff:

   #adf

The color above is greenish-blue because the blue channel is the largest followed by the green.

Color Names

In addition to the formats above, it is possible to specify a color by name. There are only 17 names that are standardized. First, there is orange, which is shown above and is equal to the color #ffa500 in hexadecimal. The other 16 names are shown below, along with their hexadecimal equivalents.

Other color designations are available in HTML 5. However, these formats are not supported in all browsers at this time.

Tags: block element, color, color channel, css, decimal, element, hexadecimal, html, percentage, rgb, specification, web, website

By: Michael Hall

This entry was posted on Wednesday, May 15th, 2013 at 8:41 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed.Both comments and pings are currently closed.