Web Colors: Alpha Values - RGBA Colors

Most Web page builders and Web designers are familiar with the hexadecimal and RGB systems of specifying color. Both systems are recognized by current browsers. A relatively new color attribute has come on the scene with the advent of CSS3. Called the "alpha" channel it is added to the RGB system to specify opacity.

On this page we will examine how RGBA works and provide examples that should prove useful to you when you work on your Web projects.

About Hexadecimal & RGB

The hexadecimal and RGB systems are very similar. The primary difference is in the notation style of specifying the attributes. Both are based on values set for the primary colors of light, red, green, and blue.

Hexadecimal uses numerical values ranging from 0 to f. 0 represents the least amount of light (none), f represents the most amount possible. "Counting" in hexadecimal goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Determining the color of light involves specifying the red, green, blue values from 0 to f.

The hexadecimal system separates each color value by a comma (except when working with CSS). The full attribute for any color consists of two digits. This is harder to explain than to demonstration. Here is an example of what we consider to be true red on a Web page:

This color red is specified in hexadecimal as ff,00,00

In this example we are saying that the red value is ff, the green value is 00, and the blue value is 00.

Here are two more examples:

This color green is specified in hexadecimal as 00,ff,00
This color blue is specified in hexadecimal as 00,00,ff

You can see what happens when the color values vary beyond ff and 00:

This color yellows is specified in hexadecimal as ff,ff,00

The RGB color notation system uses values from 0 to 255. As with hexadecimal, the values are separated by commas (again, except when working with CSS). Here are the same colors specified with the RGB system:

This color red is specified in RGB as 255,0,0
This color green is specified in RGB as 0,255,0
This color blue is specified in RGB as 0,0,255
This color yellow is specified in RGB as 255,255,0

It is possible to use a shorthand notation for hexadecimal values. The shorthand is particularly popular with those who like to write lean code. Blue, 00,00,ff becomes 0,0,f while red is f,0,0 and so on. You have to be extremely careful because you cannot use shorthand for all possible colors. All three values must be matching pairs. Thus, colors such as 33,69,a0 and 66,99,37 cannot be reduced. It is important to note that these two examples are for non-Web safe colors and are relatively recent additions to the list of colors that can be used on Web sites. To learn more about Web safe colors visit our color chart page.

RGB colors can be specified in percent in addition to the 0-255 values. Here is an easy example:

This color red is specified in RGB percentages as 100%, 0%, 0%

In both hexadecimal and RGB each color value is called a "channel." Advanced users of certain image editing programs, such as Photoshop, are familiar with color channels as they are one of the many ways that color can be manipulated. Alpha is an additional channel that is added to the RGB system.

Applying the Alpha Value

The alpha channel is controlled by a value in much the same way as the red, green, and blue channels are controlled. It is represented by a fourth value in the notation system. Before we get into that, here are examples of how the alpha channel works:

This is a standard red background in full alpha
This is a standard red background with 1/2 alpha
This is a standard red background with NO alpha!

RGBA is specified with the red, green, and blue channels specified from 0-255. The A, alpha, channel is specified 0-1. 0 is no alpha, 1 is full alpha. Here are the RGBA specifications for the examples above:

RGBA 255,0,0,1
RGBA 255,0,0,0.5
RGBA 255,0,0,0

CSS3 and RGBA

The way that RGBA is specified in Cascading Style Sheets is a little different than what we have become used to with standard hexadecimal and RGB. Here are some divs with their correct CSS. The first one shows the hexidecimal values specifed in the standard manner:

.Blue_hex_div {
color: #ffffff;
background-color: #003366;
padding: 8px;
}

Here is the same colors specified in hexadecimal shorthand:

.Blue_hex_div {
color: #fff;
background-color: #036;
padding: 8px;
}

Compare the above CSS to that in this div that specifies color in RGB:

.Blue_alpha_div {
color: #FFF;
background-color: rgb(0,51,102) ;
padding: 8px;
}

Notice that in each of the three examples the alpha channel has not been specified, so the backgrounds are automatically at "full alpha."

Here is the same div, but this time with alpha channel specified as one-half.

.Blue_alpha_half_div {
color: #FFF;
background-color: rgba(0,51,102,0.5) ;
padding: 8px;
}

Breaking down the color and alpha channel specifications for div immediately above we see that the values are:

  • Red - 0
  • Blue - 51
  • Green - 102
  • Alpha - 0.5

There is one other significant difference between that div and the ones above. Did you spot it?

It is mandatory that you specify the color system. In the blue div without the alpha channel specification the background color is noted this way:

background-color: rgb(0,51,102) ;

In the div above the color system is specified as RGBA using this notation:

background-color: rgba(0,51,102) ;

If you do not specify rgba as shown in the sample above, the colors will not be displayed and you will almost certainly end up with black.

The RGBA color system is sure to catch on with Web designers as they discover what it has to offer.

NOTE: For information about another color system, HSL, visit our HSL Color page here. For a chart showing Web safe colors go to our Web Colors page here. The Interactive Media Center has an online tutorial for Color On The Web at this link.