24

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.

CJ Edgerton
  • 400
  • 3
  • 11
Steve
  • 14,401
  • 35
  • 125
  • 230
  • 1
    How do you intend to convert these? By hand? Using a preprocessor? Programmatically, using what language? – BoltClock Mar 17 '15 at 13:24
  • 1
    Also, your syntax appears to be incorrect. 8 digit hex typically follows the AARRGGBB ([ARGB](http://en.wikipedia.org/wiki/RGBA_color_space#ARGB)) format, i.e. the first two digits belong to the alpha channels. It seems like you are using the last two digits for the alpha channel. – Terry Mar 17 '15 at 13:24
  • http://bricss.net/post/12423845540/working-with-8-digit-hex-colors-argb-in-internet – Paulie_D Mar 17 '15 at 13:25
  • These are hex colors from a Textmate theme. I was trying to convert them to RGBA so I can update and port the theme to LESS. – Steve Mar 17 '15 at 13:25
  • 1
    @Terry: As that article states, not every implementation uses the same representation. I don't think there is a general notation that is either correct or incorrect - it depends entirely on the implementation. Interestingly, [CSS Color level 4 actually uses the RRGGBBAA format](http://dev.w3.org/csswg/css-color/#hex-notation). – BoltClock Mar 17 '15 at 13:28

2 Answers2

55

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.
Terry
  • 63,248
  • 15
  • 96
  • 118
  • I fixed it, the problem was on line 34, i changed from `c.unshift(c.pop())` to `c.push(c.shift())`. – Noitidart Mar 26 '18 at 06:17
  • 1
    @Noitidart Can't believe it has been broken for so long. Thanks for fixing it, updated it. – Terry Mar 26 '18 at 08:01
  • 1
    Heroes we need. – wscourge Jul 19 '19 at 12:12
  • 1
    Yes, I knew how to do this already, but take some karma for making such a nice time saving tool for the rest of us. Indeed, a hero. – JRad the Bad Aug 13 '19 at 00:08
  • Hi, I'm going over your script line-by-line to learn. I've been looking at the Docs to understand what: **var c = hex.match(/.{1,2}/g);** does. In particular the **'/.{1,2}/g'** parameter. So for I understand that the match method is using a RegExp() object to match the #hex input elements' value string against **'.{1,2}/g'** but what exactly is **'.{1,2}/g'**? and can someone explain to me what this line is doing. thanks. – LVX-001 Jan 28 '20 at 16:37
5

Here is a little tooltip for you :

In this case #DCDCDC8F the DC is alpha = 220,

Hex to Decimal [ DC ]:

  1. first place D = 13 * 16^1 = 208
  2. second place C = 12 * 16^0 = 12
  3. sum = 12 + 208 = 220

then 220 / 255 = 0.86 opacity.

enter image description here

The bytes are stored in memory on a little-endian machine in the order AABBGGRR

Check this : http://www.statman.info/conversions/hexadecimal.html

Community
  • 1
  • 1
Piotr Dajlido
  • 1,982
  • 15
  • 28