Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

RGB Colors

The RGB color model may seem similar to the hexadecimal color model since both are based on red, green and blue, but there are two significant differences.

The first major difference is that the RGB color model does not have standardized values for red, green and blue, and because these base colors are not standardized, they can vary from model to model and platform to platform. Since the base colors are not standardized and can have variances, so can the rest of the colors since they are derived from the base colors.

In other words, there is a greater probability the colors you see in your browser may be slightly different from the colors seen in another brands browser.

Some companies have defined their own base colors to create a reproducible color model, but no industry standard has been defined. Each company’s own color model differs from the rest, so the RGB color palette is not consistently reproducible to an exacting degree, which is why I prefer using hexadecimal colors in most instances.

The second major difference is the RGB color model has an alpha channel, which makes setting a level of transparency possible. More on that later.

As with hex colors, the RGB color model also gives you the same 16,777,216 colors to work with, but they are enumerated differently and the code syntax is different. With the RGB color model, each color (red, green, and blue) can have a value ranging from 0-255.

Here's an example of the RGB syntax without using the alpha channel:

p.navy {color: rgb(11,83,172);}

With that in your style sheet, the color of text in paragraphs with a class named "navy" would render in the color you see in this paragraph . . . in your browser. It could be slightly different in another browser.

A couple things to note about using RGB color values. After rgb, the actual numerical color values are placed inside parentheses brackets. There should be no space between the last letter of rgb and the left parenthesis bracket. Each color within the parentheses has a value from 0-255, with each value separated by a comma and no spaces after the commas.

And now that you know about RGB colors, your toes must be all kinds of happy in your shoes. Wiggle them and see.

But wait, there’s more…

While RGB colors can have some inconsistency, there may well be times when you will want to use it. You see, you can add an alpha channel to have a degree of transparency. Check out the rest of the this tutorial to see how that works...

Transparency with RGBa

A color doesn’t have to be only transparent or non-transparent. We can also set various degrees of semi-transparency. You’ve probably seen that before with images that open with a semi-transparent overlay, only to have the full color revealed on a mouse-over event.

Now that you know how RGBa works in theory, it's probably much easier to use than it may sound. RBG determines the color, and the “a” part is simply how transparent the color is.

Yes, it’s really that simple. Here’s the syntax:

div {
background-color: rgba(205, 58, 110, 0.5);
}

All that is, is your standard RGB color, with a 0.5 tacked on at the end. That translates to 50 percent transparent. The number 0 is totally transparent, while 1 has no transparency. The levels in between are expressed with decimals: 0.1, 0.2, etc. 0.1 means only 10 percent of the color shows, 0.7 means 70 percent of the color shows.

Transparent colors are often used as an overlay over text or images. After all, using red over a white background color just means the color would be pink. You could just code in pink instead of red at 50% transparency and save your browser from having to do the calculation.

For those who have never seen a semi-transparent overlay, here are three before and after examples:

That ends this colorful tutorial. You might also be interested in the hexadecimal colors tutorial and the named colors tutorial.