Everything I\'ve found on this subject simply converts the hex to rgb and then adds an alpha of 1. I want to get the intended alpha from the hex digits as well.
A c
Here is a little tooltip for you :
In this case #DCDCDC8F
the DC
is alpha
= 220,
Hex to Decimal [ DC ]:
then 220 / 255 = 0.86 opacity.
The bytes are stored in memory on a little-endian machine in the order AABBGGRR
Check this : http://www.statman.info/conversions/hexadecimal.html
I have made a quick JSfiddle form that allows you to convert from 8-digit hex code into CSS rgba values ;)
https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/
The basis is rather simple — to split the string you have provided into parts of 2-digits, and perform conversion into percentage ratios for the alpha channel, and to decimals for the RGB channels. The markup is as follow:
<form action="">
<select id="format">
<option value="rgba">RGBa: RRGGBBAA</option>
<option value="argb">aRGB: AARRGGBB</option>
</select>
<input type="text" id="hex" value="#949494E8" />
<button>Convert</button>
</form>
<p id="rgba"></p>
The logic:
// Remove hash
var hex = $('#hex').val().slice(1);
// Split to four channels
var c = hex.match(/.{1,2}/g);
// Function: to decimals (for RGB)
var d = function(v) {
return parseInt(v, 16);
};
// Function: to percentage (for alpha), to 3 decimals
var p = function(v) {
return parseFloat(parseInt((parseInt(v, 16)/255)*1000)/1000);
};
// Check format: if it's argb, pop the alpha value from the end and move it to front
var a, rgb=[];
if($('#format').val() === 'argb') {
c.push(c.shift());
}
// Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,v) {
rgb.push(d(v));
});
The gist of conversion is as follow:
parseInt(hexValue, 16)
.