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