Css Hexadecimal Rgba

How to give opacity to a color with hex value in css?

You may use this way to convert the transparent for your current hex colour

For example, you want to set 40% alpha transparency to #000000 (black colour), you need to add 66 like this #66000000. The format is #AARRGGBB so you could use a format like #1C00ff00.

You could also check the full table hex -> transparent colour here
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Sass - Converting Hex to RGBa for background opacity

The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

How Can I change color hex code to rgba using only CSS?

Try:

 $wild-watermelon: #f55463;

 .container {
   background-color: rgba($wild-watermelon, 0.75 );
 }

If you want to change the color, just change the hex code of the variable.

I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.

Opacity in Hex colors of CSS

The hex representation of colors supports the alpha channel to set opacity.

so, take any color in hex e.g. #ffffff and append 00 to ff (in hexadecimal representation) for opacity, i.e. #ffffff00 - #ffffffff

for your color: #78909c33

20% implies 33 in hex

Here is a demo

Reference: Hexadecimal notation

Use HEX or RGBA

Both should be compatible with any standards-compliant browser.

Edit: There might be some buggy behavior in IE (suprise!): http://css-tricks.com/ie-background-rgb-bug/

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>