JavaScript将RGB整数转换为十六进制

Question

我正在使用Vivagraph JS库来渲染一些图形。

我想要像这样改变节点的颜色： nodeUI.color = 0xFFA500FF; ^ 这只是一个随机示例，不是下面RGB对应的十六进制值。

我从服务器获取RGB值作为这样的数组： rgb = [229,64,51] 如何将RGB转换为上述十六进制类型的值？

谢谢

- adsun

---

0xFFA500FF这个值是什么意思，你是如何从rgb(229,64,51)中获取它的，因为它的hex值是#E54033。 - void

如果您需要的是这个（<-链接）, 那么在在这里提问之前真的应该先尝试谷歌搜索。如果不是，那么您尝试过什么？ - Roope

@Roope - 如果你愿意，你可以将其标记为重复。 - RobG

@RobG 当然，问题在于如果你不明确指出，人们似乎永远学不会。 - Roope

你真正想要的是什么？RGB 值有 3 个组成部分，当转换为十六进制时，每个部分都有两个数字，总共有 6 个数字。你发布的示例有 8 个数字，那么它如何表示为 RGB 值呢？是否有额外的组件，例如 alpha 通道？如果您实际上想要的是真实的示例，那就更好了。 - RobG

Answer 1

根据代码中的注释：https://github.com/anvaka/VivaGraphJS/blob/master/demos/other/webglCustomNode.html，数值0xFFA500FF是一个包含alpha通道的32位值，因此忽略alpha通道后，它相当于rgb(255,165,0)。

以下是一些将32位十六进制转换为24位rgb和反向转换的函数，注释应足以解释其工作原理。

/*  @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>');
  });

请注意，在这个任务中：

odeUI.color = 0xFFA500FF

十六进制值0xFFA500FF立即转换为十进制11454440。要将fromRGBto32的结果转换为可分配给odeUI.color的数字，请使用parseInt：

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

如果您想硬编码它，只需在前面添加“0x”。

如果您有一个字符串，例如“rgb（229,64,51）”，则可以通过获取数字，将其转换为十六进制字符串并连接来将其转换为十六进制值：

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

- RobG