RGB转十六进制和十六进制转RGB

Question

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

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

原文由 Sindar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： rgbToHex 的两个版本都期望 r 、 g 和 b 的整数值，因此如果您有非整数值，则需要进行自己的舍入。

以下将对 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 = /^#?([af\d]{2})([af\d]{2})([af\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() 的替代版本，如@casablanca 的回答 中所讨论并在@cwolves 的评论中建议：

 function rgbToHex(r, g, b) {
 return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }

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

2012 年 12 月 3 日更新

这是 hexToRgb() 的一个版本，它还解析一个速记十六进制三元组，例如“#03F”：

 function hexToRgb(hex) {
 // Expand shorthand form (eg "03F") to full form (eg "0033FF")
 var shorthandRegex = /^#?([af\d])([af\d])([af\d])$/i;
 hex = hex.replace(shorthandRegex, function(m, r, g, b) {
 return r + r + g + g + b + b;
 });

 var result = /^#?([af\d]{2})([af\d]{2})([af\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";

原文由 Tim Down 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 David 发布，翻译遵循 CC BY-SA 3.0 许可协议