[SOLVED] JavaScript convert RGB integers to Hexadecimal

JavaScript convert RGB integers to Hexadecimal

I'm using Vivagraph JS library to render some graphs.

I would like to change the color of the node like this

nodeUI.color = 0xFFA500FF;

^ This is a random example. Not the corresponding hexadecimal value for RGB below

I get from server RGB values as an array like this

rgb = [229,64,51]

How do i convert RGB to the Hexadecimal type value metioned above?

Thanks

Solution

According to the comments in code here: https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/webglCustomNode.html

The value 0xFFA500FF is a 32 bit value that includes an alpha channel, so ignoring the alpha channel it's equivalent to rgb(255,165,0).

Some functions to convert from 32 bit hex to 24 bit rgb and back are below, the comments should suffice to explain how they work.

/*  @param {number} v - value to convert to RGB values
**  @returns {Array}  - three values for equivalent RGB triplet
**                      alpha channel is ingored
**
**  e.g. from32toRGB(0xaec7e8) // 255,165,0
*/
function from32toRGB(v) {
  var rgb = ('0000000' + v.toString(16))  // Convert to hex string with leading zeros
             .slice(-8)     // Get last 8 characters
             .match(/../g)  // Split into array of character pairs
             .splice(0,3)   // Get first three pairs only
             .map(function(v) {return parseInt(v,16)}); // Convert each value to decimal
  return rgb;
}

/*  @param {Array} rgbArr - array of RGB values
**  @returns {string}     - Hex value for equivalent 32 bit color
**                          Alpha is always 1 (FF)
**
**  e.g. fromRGBto32([255,165,0]) // aec7e8FF
**
**  Each value is converted to a 2 digit hex string and concatenated
**  to the previous value, with ff (alpha) appended to the end
*/
function fromRGBto32(rgbArr) {
  return rgbArr.reduce(function(s, v) {
    return s + ('0' + v.toString(16)).slice(-2);
  },'') + 'ff'
}

//  Tests for from32toRGB
  [0xFFA500FF, 0xaec7e8ff,0,0xffffffff].forEach(function(v) {
    document.write(v.toString(16) + ' : ' + from32toRGB(v) + '<br>')
  });

document.write('<br>');

// Tests for fromRGBto32
  [[255,165,0],[174,199,232], [0,0,0], [255,255,255]].forEach(function(rgbArr) {
    document.write(rgbArr + ' : ' + fromRGBto32(rgbArr) + '<br>');
  });

Note that in the assignment:

odeUI.color = 0xFFA500FF

the hex value 0xFFA500FF is immediately converted to decimal 11454440. To convert the result of fromRGBto32 to a number that can be assigned to odeUI.color, use parseInt:

parseInt(fromRGBto32([229,64,51]), 16);

or if you want to hard code it, just add '0x' in front.

If you have a string like 'rgb(229,64,51)', you can convert it to a hex value by getting the numbers, converting to hex strings and concatenating:

var s = 'rgb = [229,64,51]';
var hex = s.match(/\d+/g);

if (hex) {
  hex = hex.reduce(function(acc, value) {
    return acc + ('0' + (+value).toString(16)).slice(-2);
  }, '#')
}

document.write(hex + '<br>');

// Append FF to make 32 bit and convert to decimal
// equivalent to 0xe54033ff
document.write(parseInt(hex.slice(-6) + 'ff', 16)); // 0xe54033ff -> 3846190079