- Home
- Blog
- Web Design A Guide to CSS RGBA Colors
A Guide to CSS RGBA Colors
- 4 min. read
-
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
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.
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).
Related Content
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator