A Guide to CSS RGBA Colors

Posted: 19 Nov 2014 02:00 AM PST

RGBA is a type of CSS color value that allows us to set a color and also its opacity/transparency.

Here’s an example of using the CSS rgba() notation to specify white with 50% opacity.

p {    color: rgba(255, 255, 255, 0.5);  }

RGBA is an extension of the RGB color model. The acronym stands for red green blue alpha. The alpha value represents the level of transparency/opacity of the color.

RGBA Syntax

The format of RGBA color notation is:

rgba(red, green, blue, alpha)

The first three values — red, green, blue — can either be integers between 0 and 255 or percentages between 0% and 100%. These values describe the amount of red, green, and blue in the desired color.

For example, if you want pure red for a background color, then you would want 100% red, 0% green, and 0% blue, which can be set as follows:

background-color: rgba(255, 0, 0, 1);

Result:

Or, using percentage values:

background-color: rgba(100%, 0%, 0%, 1);

Result:

The fourth value, alpha, specifies the color’s level of transparency/opacity and can be a value between 0.0 and 1.0.

(By the way, in case you’re wondering, in the CSS4 editor’s draft of the CSS Color Module, there is a specification to allow the use of percentages for RGBA alpha values but, at this time, browsers don’t support that option yet.)

Here’s how to specify yellow with 50% opacity:

color: rgba(255, 242, 0, 0.5);

Result:

Yellow

Converting Integers to Percentages

As stated before, using percentage values instead of integer values to represent the amount of red, green and blue results in the exact same thing. 0 is 0% and 255 is 100%. To get the percentage equivalent, simply divide the integer by 255 and then multiply by 100%.

Going off the previous example, if the RGBA color value is rgba(255, 242, 0, 0.5)then:

Red: (255/255) x 100% = 100%
Green: (242/255) x 100% = 94.9%
Blue: (0/255) x 100% = 0%
Alpha: 0.5 (can’t be a percentage unit under CSS3 specifications)

color: rgba(100%, 94.9%, 0%, 0.5);

Result:

Yellow

Converting Percentages to Integers

If you need to convert percentages to integer values, multiply the percentage value by 255 and then divide by 100%.

Let’s say our color is orange, which can be described as follows:

rgba(100%, 64.7%, 0%, 1)

Result:

Red: (100% x 255) / 100% = 255
Green: (64.7% x 255) / 100% = 165 (rounded to the closest integer)
Blue: (0% x 255) / 100% = 0
Alpha: 1

The orange color above when converted from percentage values to integer values is:

rgba(255, 165, 0, 1)

Result:

Explanation of the RGB Color Model

The RGB color model is simply a way to describe a color using the amount of red, green, and blue the color has. It’s like mixing watercolor paints or oil paints to get the actual color we want.

Imagine if you wanted to produce a pure blue color. To do this, you wouldn’t want to mix red and green into the color. So we set red and green to 0%, and blue to 100%.

rgb(0%, 0%, 100%)

Result:

But what if instead of blue you wanted fuchsia? We can create fuchsia by mixing 100% red with 100% blue.

rgb(100%, 0%, 100%)

Result:

From basic color theory, we know that the absence of any color results in black. So to get black we set red, green, and blue to 0%.

rgb(0%, 0%, 0%)

Result:

Determining RGB Colors

I’m no math whiz and I barely understand color theory, so I use tools to determine my RGB color values. I use Photoshop’s Color Picker feature to get the red, green, and blue values of a particular color, but there are free online tools such as Color Slider and The RGB Color Calculator that can help with the task.

How to deterine rgb color values with Photoshop. Getting RGB values using Photoshop’s Color Picker dialog

Fallback for RGBA Colors

Though the RGBA color value notation is well-supported in the popular modern browsers, it’s not a bad idea to specify solid (fully-opaque/non-transparent) fallback colors just in case, especially since it’s quite easy to do.

Let’s say we have a div that has a navy blue background color at 50% opacity and text that’s white at 30% opacity.

For our solid fallback colors, in case rgba() isn’t supported by the browser, we can use hexadecimal color notation or any other CSS color value notation. (In the following example, hexadecimal color notation was used.)

div {    background-color: #000080; /* Fallback: navy blue in hexadecimal notation */    color: #ffffff; /* Fallback: white in hexadecimal notation */    background-color: rgba(0, 0, 128, 0.5); /* navy blue with 50% opacity */    color: rgba(255, 255, 255, 0.3); /* white with 30% opacity */  }

Result:

Hello!

This is the appearance of our fallback colors if RGBA isn’t available in the browser:

Hello!

Browser Support

All major browsers support RGBA color notation. To put it in perspective, the CSS rgba()notation has been around since Internet Explorer 9 which was launched in 2011 (3 years ago).