Convert 8-digit hex colors to rgba colors?

Question

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 color such as #949494E8 or #DCDCDC8F clearly has an alpha value that's not 0 or 1.

Answer 1

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:

• Converting the RGB channels in hex, into decimal values. This is done by using parseInt(hexValue, 16).
• Converting the alpha channel in hex, into percentage ratio. This is done by simply converting it to decimal values (see above point), and calculating its relative value to 255.