RGB到十六进制和十六进制到RGB

如何将RGB格式的颜色转换为十六进制格式，反之亦然？

例如，将'#0080C0'转换为(0, 128, 192) '#0080C0' (0, 128, 192) 。

---

#1楼

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

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

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经过更多测试后，上述新方法并不快:(。虽然这是一种有趣的替代方法。

---

#2楼

此代码接受#fff和#ffffff变体和不透明度。

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}

---

#3楼

如果需要比较两个颜色值（指定为RGB，名称颜色或十六进制值）或转换为十六进制，请使用HTML5 canvas对象。

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "someColor";

alert(ctx.fillStyle == temp);

---

#4楼

@ Tim，添加到您的答案中（将其添加为注释有点尴尬）。

如所写，我发现rgbToHex函数在该点之后返回一个包含元素的字符串，它要求r，g，b值都在0-255范围内。

我相信这对大多数人来说似乎是显而易见的，但是我花了两个小时才弄清楚，到那时我意识到问题出在其他地方之前，原始方法已经膨胀到了7行。 因此，为了节省其他人的时间和麻烦，下面是我经过稍微修改的代码，该代码检查先决条件并修剪字符串的多余部分。

function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}

---

#5楼

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3159605