Should You Use Rgba(0, 0, 0, 0) or Rgba(255, 255, 255, 0) for Transparency in CSS

Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?

The last parameter to the rgba() function is the "alpha" or "opacity" parameter. If you set it to 0 it will mean "completely transparent", and the first three parameters (the red, green, and blue channels) won't matter because you won't be able to see the color anyway.

With that in mind, I would choose rgba(0, 0, 0, 0) because:

1. it's less typing,
2. it keeps a few extra bytes out of your CSS file, and
3. you will see an obvious problem if the alpha value changes to something undesirable.

You could avoid the rgba model altogether and use the transparent keyword instead, which according to w3.org, is equivalent to "transparent black" and should compute to rgba(0, 0, 0, 0). For example:

h1 {
    background-color: transparent;
}

This saves you yet another couple bytes while your intentions of using transparency are obvious (in case one is unfamiliar with RGBA).

As of CSS3, you can use the transparent keyword for any CSS property that accepts a color.

Transparent color vs rgba(0,0,0,0)

Behaviour is exactly the same, but transparent is compatible also with IE8.
RGBA is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.

For example, it could be very quick to set

background-color: rgba(0,0,0,0.1);

Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:

background-color: transparent;
background-color: rgba(0,0,0,0);

Or, more useful, in case of alreasy cited almost transparent backgrounds, you can write:

background-color: transparent;
background-color: rgba(0,0,0,0.1);

New browsers will set rgba(0,0,0,0.1) as background, overriding previous transparent declaration, but IE8 will set transparent as background, because it will ignore unrecognized rgba() value, so a slightly different result but in according to Graceful Degradation principle.

What is the difference between rgb() and rgba() opacity?

Answer as requested:

I'm going to go out on a limb and say it's the browser translating what is essentially an "incorrect" value set in rgb with an opacity value.

If you look in the browser dev tools under the computed tab, you'll notice that the rgb values are computed to rgba (at least in Firefox).

I'm thinking that any browser that supports CSS3 will "fix" the property.

Also I was told by a coworker that rgba value will only work for background colors: Your coworker is wrong.

rgb has been there longer so browser compatibility I suppose is better? I wouldn't say that. You'll never notice a performance hit, but you'll make your browser do less work if it doesn't have to "fix" your incorrect values being passed to the rgb set. Update: rgba is an alias for rgb, so it's really not fixing anything, it's simply passing to rgb anyway.

Here is some documentation on rgb and rgba - specifically the aliasing of the functions:

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_colors

What happens in Safari with the transparent color?

I don't know of any drawbacks of using RGBA(255, 255, 255, 0) and if that's working for you, I think you should use it. That's the better method, because it doesn't rely on the browser to determine which is the color with 0 opacity like the transparent keyword does.

The problem, which you're experiencing, is due to the fact that the latest version of Safari thinks that the color meant by transparent is gray and the other big browsers think it's the same as the background color of the element, which in your case is white.

To prevent unexpected behavior, such as in gradients, the current W3C spec states that transparent should be calculated in the alpha-premultiplied color space. However, be aware that some older browsers may treat it as black with an alpha value of 0 and apparently the latest version of Safari does something similar.

To answer the OP's comment:

There is no such thing as colorless transparency and the example with gradients shows this perfectly.

For example, Mozilla's MDN Web Docs says:

The transparent keyword represents a fully transparent color. This
makes the background completely visible. Technically, transparent is a
shortcut for rgba(0,0,0,0).

The keyword represents a color, although a fully transparent one, but still a color.

Trying to set opacity for 1px line

If you set the opacity it will affect the entire element, whereas using rgba() will apply to the specific property you set it to.

In rgb, #00b4f5 equals to rgb(0, 180, 245), so with opacity: .8 your code will be:

.element {
    border-bottom: 1px solid rgba(0, 180, 245, .8);
}

---

Note: Here is a nice website to use to make your hex2rgb conversions in the future.

Color of stacked semi-transparent boxes depends on order?

Simply because in both cases the combination of colors is not the same due to how opacity of the top layer affect the color of the bottom layer.

For the first case, you see 50% of blue and 50% of transparent in the top layer. Through the transparent part, you see 50% of red color in the bottom layer (so we only see 25% of red in total). Same logic for the second case (50% of red and 25% of blue); thus you will see different colors because for both cases we don't have the same proportion.

To avoid this you need to have the same proportion for both your colors.

Here is an example to better illustrate and show how we can obtain same color:

In the top layer (the inner span) we have 0.25 of opacity (so we have 25% of the first color and 75% of transparent) then for the bottom layer (the outer span) we have 0.333 opacity (so we have 1/3 of 75% = 25% of the color and the remaining is transparent). We have the same proportion in both layers (25%) so we see the same color even if we reverse the order of layers.

.a {  background-color: rgba(255, 0, 0, 0.333)}
.b {  background-color: rgba(0, 0, 255, 0.333)}
.a > .b {  background-color: rgba(0, 0, 255, 0.25)}.b > .a {  background-color: rgba(255, 0, 0, 0.25)}

<span class="a"><span class="b">          Color 1</span></span><span class="b"><span class="a">Different Color 2</span></span>

Why is there only ten increments for alpha in css rgba();?

If you are looking for finer grained opacity settings you may use Alpha values with more than one decimal place. For example RGBA(255,255,255,0.05) will yield the expected results as a very light tint of White.
The answer was given here: Html rgba color opacity?

---

Related Topics