RGB到十六进制，十六进制到RGB

Question

RGB到十六进制，十六进制到RGB如何将RGB格式的颜色转换为十六进制格式，反之亦然？例如，转换'#0080C0'到(0, 128, 192).

Answer 1

以下操作将对RGB进行十六进制转换，并添加任何所需的零填充：

function componentToHex(c) {

  var hex = c.toString(16);

  return hex.length == 1 ? "0" + hex : hex;

}

function rgbToHex(r, g, b) {

  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);

}

alert(rgbToHex(0, 51, 255)); // #0033ff

转换为另一种方式：

function hexToRgb(hex) {

  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";

最后，另一个版本是rgbToHex()中讨论的@卡萨布兰卡的答复并在“狼”的评论中指出：

function rgbToHex(r, g, b) {

  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

}

alert(rgbToHex(0, 51, 255)); // #0033ff

这里有一个版本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";

Answer 2

另一个版本的十六进制Rgb：

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;}

这里是另一种方法那似乎更快

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];}

以上新方法经过更多的测试后不会更快：(虽然这是另一种有趣的方式。

Answer 3

这是我的版本：

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

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }