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.

5
  • 1
    How do you intend to convert these? By hand? Using a preprocessor? Programmatically, using what language?
    – BoltClock
    Commented Mar 17, 2015 at 13:24
  • 1
    Also, your syntax appears to be incorrect. 8 digit hex typically follows the AARRGGBB (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
    Commented Mar 17, 2015 at 13:24
  • bricss.net/post/12423845540/…
    – Paulie_D
    Commented Mar 17, 2015 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
    Commented Mar 17, 2015 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.
    – BoltClock
    Commented Mar 17, 2015 at 13:28

2 Answers 2

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.
5
  • I fixed it, the problem was on line 34, i changed from c.unshift(c.pop()) to c.push(c.shift()).
    – Noitidart
    Commented Mar 26, 2018 at 6:17
  • 1
    @Noitidart Can't believe it has been broken for so long. Thanks for fixing it, updated it.
    – Terry
    Commented Mar 26, 2018 at 8:01
  • 1
    Heroes we need.
    – wscourge
    Commented Jul 19, 2019 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. Commented Aug 13, 2019 at 0: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
    Commented Jan 28, 2020 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

5
  • I believe these numbers (from Textmate themes) are RRGGBBAA. If I use #F5AA00 which is "selection color", I get the correct orange rgba(245, 170, 0, 1.0). But I need the alpha of 91, from the original F5AA0091.
    – Steve
    Commented Mar 17, 2015 at 13:31
  • what math gets you the alpha value for the 2-character hex?
    – Steve
    Commented Mar 17, 2015 at 13:31
  • Do you want the math formula?? Commented Mar 17, 2015 at 13:38
  • 1
    I found this... tedious, but it works. Then I assume I divide by 255. palmantics.com/html/hexadecimal
    – Steve
    Commented Mar 17, 2015 at 13:40
  • I have extended my answer a bit to provide better insight into problem. Commented Mar 17, 2015 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.