1. Computing

Discuss in my forum

What is RGBa?

Adding Transparency to Your Colors

By

Two boxes with different RGBa values for transparency

The top box is 100% opaque. The bottom box is 70% opaque.

Screen shot by J Kyrnin
Mostly Transparent Text

This text uses white with 30% opacity RGBa color.

Screen shot by J Kyrnin
Transparent Text with Outline, Is This Transparent?

Two ways to try and get an outline around transparent text, one seems to work and one doesn't.

Screen shot by J Kyrnin

There are many ways to define colors on web pages. But my favorite way is with RGBa. This uses the color model of RGB with additional alpha channel information to define the opacity. You define the color in the RGB space, with values between 0 and 255 for red (R), green (G), and blue (B). But what differentiates this color is by adding a fourth value between 0 and 1 (in other words, 0 and 100%) for opacity.

See-Through Boxes Using RGBa

You can define colors in RGBa that look exactly as they would look in RGB. For example, the SVG color darkgoldenrod is defined in RGB as rgb(184,134,11) and hexadecimal color code: #b8860b. To use that color with RGBa, you would need to define it as 100% opaque or rgba(184,134,11,1). You may wonder what the point is to using the RGBa value if it looks the same as the RGB value. Well, that fourth number makes a big difference. The top image on this page shows a DIV element with a background image of a ripe red tomato. But you can't see most of the tomato because it's completely covered by a dark goldenrod colored box. In the image below it I changed the opacity of the box to be slightly transparent: rgba(184,134,11,0.7) and now the tomato shows through the goldenrod box. If I were to add text to that box, it would be completely opaque, unless I specified an RGBa value for the text as well.

The first box: background-color: rgba(184,134,11,1);
The second box: background-color: rgba(184,134,11,0.7);

See-Through Text Using RGBa

Anything you can give a color you can make transparent, so that the color or image below it shows through. As you can see from the “Mostly Transparent Text” image, this can lead to some pretty illegible words. So I recommend using it sparingly for text. To get that image, I used the same tomato image as before on the background and then put an H1 element with the style:

color: rgba(255, 255, 255, 0.3);

My first thought was to create transparent text and then stroke that text to make it more legible. Here are two ways you might be able do this.

The first way uses two CSS properties that have not been added to the CSS specification. They are currently only supported in Webkit browsers (Chrome, Safari, iOS, and Android). They are the -webkit-text-stroke and -webkit-text-fill-color properties. You define the fill color as transparent and then add a stroke around the letters. Here's a sample class you could use:

.transparent-stroked {
  color: rgba(255, 255, 255, 0.3);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
}

I also included an RGBa color for the text for browsers that don't support these two properties. Since the -webkit-text-fill-color comes after the RGBa color, it will take precedence because of the cascade.

But there are a couple problems with using these properties:

  • There is no official CSS style property to stroke text (yet!)
  • The browser prefixed property (-webkit-text-stroke) only works in Webkit browsers

The second method attempts to use the text-shadow property to fake a border around the text, as I demonstrated in this article: How to Use Text-Shadows to Make More Interesting Text. But as you can see from the screen shot, the shadows interact with the transparent colored text in ways you might not expect, as you can see from the “Is This Transparent?” screen shot. For that screen shot I used the following HTML overy my tomato image:

<h1 style="color: rgba(255, 255, 255, 0.3);
           text-shadow: 1px 0 0 #000,
                  0 1px 0 #000,
                  -1px 0 0 #000,
                  0 -1px 0 #000;">Is This Transparent?</h1>

You might expect the text to be that same faintly white, see-through text as in the “Mostly Transparent Text” image because of the color: rgba(255, 255, 255, 0.3);. But it's not, it's a dark gray and not really transparent at all. By changing the color of the text shadows to RGBa as well, you can affect how the text looks, but it never goes fully transparent. This is because the text-shadow inherits the opacity from the text itself. In fact, in some older browser versions, the shadow would not appear on text that was transparent, because transparent text would not cast a shadow.

If you absolutely must have transparent text with a stroke around the letters that displays in all browsers, your best bet is to keep using images.

Don't Forget Fallback Colors for Older Browsers That Don't Support RGBa

While all the modern browsers (including Internet Explorer 9 and up) support RGBa colors, if you have to support older browsers, you should include a fallback color option. The easiest way is to define a non-RGBa color in your styles first and then the RGBa color second. Browsers that support RGBa will use the cascade and settle on the final color in the style sheet. Browsers that don't will ignore the RGBa color. For example, using my 70% opaque darkgoldenrod example from above:

.golden-background {
  background-color: rgb(184,134,11);
  background-color: rgb(184,134,11,0.7);
}

You can also force older versions of IE to use alpha transparency with filters. It's best to surround these styles with conditional comments, so that only the browsers that can use them see them. For example:

<!--[if lt IE 9]>
<style>
  .golden-background {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#46b8860b,endColorstr=#46b8860b);
    zoom: 1;
  }
</style>
<![endif]-->

You might notice that the colors are not listed in RGB at all, but rather in hexadecimal. And instead of three hex pairs, there are four startColorstr=#46b8860b. The four pairs are the transparency (in hexadecimal 70% is 46) and the three other pairs are the red, green, and blue values that match the darkgoldenrod hex code: #b8860b.

By setting up fallback options for older browsers, you can be sure that your RGBa colors appear where they can, but that where they can't, you get a color that still works for your site rather than whatever the browser decides to interpret as your intention.

Now you understand how to use RGBa colors to enhance your web pages and set the colors exactly as you want them set.

©2014 About.com. All rights reserved.