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 #00000066. The format is #RRGGBBAA so you could use a format like #00ff001C.
You could also check the full table hex -> transparent colour here https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Answer from Tony Tin Nguyen on Stack OverflowVideos
Why use RGBA instead of HEX for transparency?
How is HEX converted to RGBA?
What is the difference between HEX and RGBA?
The CSS Color Module Level 4 will probably support 4 and 8-digit hexadecimal RGBA notation!
Three weeks ago (18th of December 2014) the CSS Color Module Level 4 editor's draft was submitted to the CSS W3C Working Group. Though in a state which is heavily susceptible to change, the current version of the document implies that in the somewhat near future CSS will support both the 4 and 8-digit hexadecimal RGBA notation.
Note: the following quote has irrelevant chunks cut out and the source may have been heavily modified by the time you read this (as mentioned above, it's an editor's draft and not a finalised document).
If things have heavily changed, please leave a comment letting me know so I can update this answer!
ยง 4.2. The RGB hexadecimal notations: #RRGGBB
The syntax of a
<hex-color>is a<hash-token>token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits0-9or lettersa-f(the case of the letters doesnโt matter -#00ff00is identical to#00FF00).8 digits
The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where
00represents a fully transparent color andffrepresent a fully opaque color.Example 3
In other words,#0000ffccrepresents the same color asrgba(0, 0, 100%, 80%)(a slightly-transparent blue).4 digits
This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where
0represents the minimum value andfrepresents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.
What does this mean for the future of CSS colours?
This means that assuming this isn't completely removed from the Level 4 document, we'll soon be able to define our RGBA colours (or HSLA colours, if you're one of those guys) in hexadecimal format in browsers which support the Color Module Level 4's syntax.
Example
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
When will I be able to use this in my client-facing products?

All jokes aside: it's currently only the start of 2015, so these will not be supported in any browser for quite some time yet - even if your product is only designed to work on the most up-to-date of browsers you'll probably not be seeing this in action in a production browser any time soon.
View current browser support for #RRGGBBAA color notation
However, that said, the way CSS works means that we can actually start using these today! If you really want to start using them right now, as long as you add a fall back any non-supporting browsers will simply ignore the new properties until they are deemed valid:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}
<figure>Hello, world!</figure>
As long as you're viewing this answer on a browser which supports the background and color properties in CSS, the <figure> element in result of the above snippet will look very similar to this:

Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure> element, we'll see the following:

The 6-digit hexadecimal fall back is overridden by the rgba() values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba() ones.
UPDATE 2018-07-04: Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).
I found the answer after posting the enhancement to the question. Sorry!
MS Excel helped!
simply add the Hex prefix to the hex colour value to add an alpha that has the equivalent opacity as the % value.
(in rbga the percentage opacity is expressed as a decimal as mentioned above)
Opacity % 255 Step 2 digit HEX prefix
0% 0.00 00
5% 12.75 0C
10% 25.50 19
15% 38.25 26
20% 51.00 33
25% 63.75 3F
30% 76.50 4C
35% 89.25 59
40% 102.00 66
45% 114.75 72
50% 127.50 7F
55% 140.25 8C
60% 153.00 99
65% 165.75 A5
70% 178.50 B2
75% 191.25 BF
80% 204.00 CC
85% 216.75 D8
90% 229.50 E5
95% 242.25 F2
100% 255.00 FF
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" */
There is a builtin mixin: transparentize($color, $amount);
background-color: transparentize(#F05353, .3);
The amount should be between 0 to 1;
Official Sass Documentation (Module: Sass::Script::Functions)
It depends on the background to which your transparent color will be applied. But if you know the color of the background (e.g. white), you can calculate the RGB color resulting of the RGBA color applied to the specific background.
It's just the weighted average between the color and the background, the weight being the alpha channel (from 0 to 1) :
Color = Color * alpha + Background * (1 - alpha);
For your transparent light blue rgba(0,129,255,.4) against white rgb(255,255,255) :
Red = 0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue = 255 * 0.4 + 255 * 0.6 = 255
Which gives rgb(153,205,255) or #99CDFF
function hexify(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3"
console.log(myHex);