Steve Steve - 1 year ago 339
CSS Question

Convert 8-digit hex colors to rgba colors?

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

clearly has an alpha value that's not 0 or 1.

Answer Source

I have made a quick JSfiddle form that allows you to convert from 8-digit hex code into CSS rgba values ;)

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>
    <input type="text" id="hex" value="#949494E8" />
<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') {

// Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,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.