CSS Opacity VS Rgba: Which One Is Better

What is the difference between opacity and that through alpha channel (rgba)?

Opacity sets the opacity value for an element and all of its children;
While RGBA sets the opacity value only for a single declaration.

This is well explained here. http://www.css3.info/introduction-opacity-rgba/

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 are differences between RGB vs RGBA other than 'opacity'

RGB is a 3-channel format containing data for Red, Green, and Blue.
RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha.

There is no use to the Alpha channel other than making the color transparent/opaque (or partially transparent; translucent).

In CSS, rgb() had wide browser support for several years before rgba() received the same level of support. This is one reason you will find more rgb() in CSS than rgba(). The other reason is that translucency isn't something you typically use everywhere.

You might find an RGB value packed into 16 bits, with 5 bits for Blue and Red, and 6 bits for Green (green gets more bits because the eye is more discerning to shades of green). You might also find an RGBA value packed into 16 bits, with 5 bits for each color and 1 bit for alpha. With one bit, you can only make the color fully transparent or not transparent at all.

Typically nowadays, you'll find RGB and RGBA packed into 32 bit values, with 8 bits for each color, and 8 bits for alpha (or left blank for RGB).

In CSS, the designers decided to use values 0-255 (the range for an 8 bit value) for the Red, Green, and Blue, but they use a value between 0.0 and 1.0 for the Alpha channel. The actual byte format for the color is irrelevant to web developers.

In my experience, neither rgb() nor rgba() are used very often in CSS. Hex colors are way more dominant, and predated them by several more years.

HSL is actually a much better format for working with colors and is supported in CSS (IE9+, Firefox, Chrome, Safari, and in Opera 10+.).

http://www.w3schools.com/cssref/css_colors_legal.asp

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.

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.

Difference between hex colour, RGB, & RGBA and when should each they be used?

There's no differences between a RGB and hex color.

hex to decimal :

FF = 255

=> #FFFFFF = rgb(255,255,255)

When you break down the hexa color :

#FF  FF    FF
red green blue

But with rgba (alpha) you can add a alpha variable it add an opacity to your color.

You can use RGB and HEX it depends of your preferences

Examples :

div {
 width:100px;
 height:100px;
 border:solid 1px black;
 display:inline-block;
}

.rgb{
  background-color:rgb(124,220,50); /* to hexa = 7C, DC, 32 */
}

.hexa{
  background-color:#7CDC32;
}

.rgba{
  background-color:rgba(124,220,50,0.2); /* opacity = 20% */
}

<div class="rgb">rgb</div>
<div class="hexa">hexa</div>
<div class="rgba">rgba</div>

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

---

Related Topics