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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

：这两个版本的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 = /^#?([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()讨论并在@cwolves的评论中建议使用的替代版本：

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

以上是 JavaScript RGB到十六进制和十六进制到RGB 的全部内容， 来源链接： utcz.com/qa/410959.html

回到顶部