What are differences between RGB vs RGBA other than 'opacity'

Question

I have moved beyond using standard colors in CSS by declaring them orange, blue, aquamarine, etc..., and have been using rgb() like so for the same colors respectively, rgb(255,165,0), rgb(0,0,255) and rgb(127,255,212) (thanks to the ColorHighlighter package in ST3).

Upon altering a gradient for bootstrap .btn I came across rgba(). Quick research explains that a stands for alpha, and theres a whole bunch of integral math attributed to Catmull and Smith. It is also somewhat easy to find that the alpha channel is used for "alpha compositing", which can mostly be associated as "opacity".

• Are there differences between the two other than opacity?
• Why isn't it convention to use RGBA.(I'm assuming this since I am just now stumbling onto this)
• Are there other limitations that should be know when using rgba() for the web?
• Is there a shortcut to declare opacity beside a color shortcut? (ie color: salmon:.5;)
• From a web developer standpoint, do I need to worry about the differences between ARGB, RGBA, BGRA byte order for different machines INFO?
• Other important information?

Answer 1

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

Answer 2

RGB is standard rgb colors, you already understand this.

RGBa is standard rgb colors, but with the alpha/opacity also.

Other than that there isn't any difference, colors still code the same.

Problem with using this and other CSS3 color styles is that it isn't always supported. Here is a link I found that tells you which versions of browsers support it.

Declaring alpha in CSS would look like this rgba(0, 0, 0, .3) with the alpha being a decimal or integer from 1 to 0. 1 being opaque and 0 being completely transparent.

Answer 3

rgb is standard rgb values (red, green, blue)

rgba is standard rgb values (red, green, blue + Alpha (aka opacity))

You will not find any color variations. RGBA is a css3 color property.

As older browser support may be limited, you may want to use a fallback color as such:

CSS:

div {
    background-color: rgb(200, 54, 54); /* The Fallback */
    background-color: rgba(200, 54, 54, 0.5); 
}