以下是我的看法:

function rgbToHex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hexToRgb(hex) {
  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (normal) return normal.slice(1).map(e => parseInt(e, 16));

  const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
  if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));

  return null;
}

hexToRgb的另一个版本:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

编辑:3/28/2017 这是另一种似乎更快的方法

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

编辑:8/11/2017 经过更多测试后，上面的新方法并没有更快:(。虽然这是一种有趣的替代方式。

注意:rgbToHex的两个版本都期望r, g和b为整数值，所以如果你有非整数值，你需要自己做四舍五入。

下面将做RGB到十六进制的转换，并添加任何所需的零填充:

函数componentToHex(c) { var hex = c.toString(16); 返回十六进制。长度== 1 ?“0”+ hex: hex; ｝ 函数rgbToHex(r, g, b) { 返回“#”+ componentToHex(r) + componentToHex(g) + componentToHex(b); ｝ alert(rgbToHex(0, 51,255));/ / # 0033 ff

另一种转换方式:

函数hexToRgb(hex) { var结果= / ^ # ? (f \ d {2}) (f \ d {2}) (f \ d{2}) /美元i.exec(十六进制); 返回结果?｛ r: parseInt(result[1]， 16)， g: parseInt(result[2]， 16)， b: parseInt(result[3]， 16) }: null; ｝ 警报(hexToRgb (# 0033 ff) .g);/ /“51”;

最后，rgbToHex()的另一个版本，正如@casablanca的回答中所讨论的，并在@cwolves的评论中建议:

函数rgbToHex(r, g, b) { 返回“#”+ (1 < < 24 | r < < 16 g | < < 8 | b) .toString (16) .slice (1); ｝ alert(rgbToHex(0, 51,255));/ / # 0033 ff

2012年12月3日更新

下面是hexToRgb()的一个版本，它也可以解析一个简化的十六进制三元组，例如“#03F”:

function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51"; alert(hexToRgb("#03f").g); // "51";

基于@ michazperzhaakowski的回答(EcmaScipt 6)和他基于Tim Down的回答的回答

我写了一个转换hexToRGB函数的修改版本，增加了安全检查r/g/b颜色组件是否在0-255之间，而且函数可以接受数字r/g/b参数或字符串r/g/b参数，如下所示:

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

    return '#' + [r, g, b].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex
    }).join('');
  }

为了安全地使用这个函数——你应该检查传递的字符串是否是真正的rbg字符串颜色——例如，一个非常简单的检查可以是:

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}

以下是我的看法:

function rgbToHex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hexToRgb(hex) {
  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (normal) return normal.slice(1).map(e => parseInt(e, 16));

  const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
  if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));

  return null;
}

当你在3D环境中工作时(webGL, ThreeJS)，你有时需要为网格的不同面创建3个值，基本的一个(主色)，一个浅一点的和一个深一点的:

material.color.set( 0x660000, 0xff0000, 0xff6666 ); // red cube

我们可以从主RBG颜色创建这3个值:255,0,0

function rgbToHex(rgb) { 
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
       hex = "0" + hex;
  }
  return hex;
};

function convertToHex(r,g,b) { 

    var fact = 100;  // contrast 
    var code = '0x';

    // main color
    var r_hexa = rgbToHex(r);
    var g_hexa = rgbToHex(g);
    var b_hexa = rgbToHex(b);

    // lighter
    var r_light = rgbToHex(Math.floor(r+((1-(r/255))*fact)));
    var g_light = rgbToHex(Math.floor(g+((1-(g/255))*fact)));
    var b_light = rgbToHex(Math.floor(b+((1-(b/255))*fact)));

    // darker
    var r_dark = rgbToHex(Math.floor(r-((r/255)*(fact*1.5)))); // increase contrast
    var g_dark = rgbToHex(Math.floor(g-((g/255)*(fact*1.5))));
    var b_dark = rgbToHex(Math.floor(b-((b/255)*(fact*1.5))));

    var hexa = code+r_hexa+g_hexa+b_hexa;
    var light = code+r_light+g_light+b_light;
    var dark = code+r_dark+g_dark+b_dark;

    console.log('HEXs -> '+dark+" + "+hexa+" + "+light)

    var colors = [dark, hexa, light]; 
    return colors;

}

在你的ThreeJS代码中简单地写:

var material = new THREE.MeshLambertMaterial();
var c = convertToHex(255,0,0); // red cube needed
material.color.set( Number(c[0]), Number(c[1]), Number(c[2]) );

结果:

//                                 dark      normal     light
convertToHex(255,255,255) HEXs -> 0x696969 + 0xffffff + 0xffffff
convertToHex(255,0,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(255,127,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(100,100,100) HEXs -> 0x292929 + 0x646464 + 0xa0a0a0
convertToHex(10,10,10) HEXs -> 0x040404 + 0x0a0a0a + 0x6a6a6a