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".
color: salmon:.5;
)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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With