如何使用javascript将RGBA转换为十六进制颜色代码

Question

我试图将 rgba 转换为十六进制颜色代码，但无法隐藏我能够转换的剩余颜色的不透明度值，

下面是我的代码

 var colorcode = "rgba(0, 0, 0, 0.74)";

var finalCode = rgba2hex(colorcode)

function rgba2hex(orig) {
    var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

    if (alpha !== "") { a = alpha; }
    else { a = 01; }
    hex = hex + a;

    return hex;
}

console.log(finalCode)

在这里我需要 alpha 值也转换为十六进制代码。

请建议如何转换

输出

期望：000000bd

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

Answer 1

由于 rgba() 符号中的 alpha 通道表示为 0 ~ 1 值，因此在尝试将其转换为 HEX 形式之前需要将其乘以 255：

 var colorcode = "rgba(0, 0, 0, 0.74)";

var finalCode = rgba2hex(colorcode)

function rgba2hex(orig) {
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function test(colorcode) {
  console.log(colorcode, rgba2hex(colorcode));
}

test("rgba(0, 0, 0, 0.74)");
test("rgba(0, 0, 0, 1)");
test("rgba(0, 0, 0, 0)");
test("rgba(0, 255, 0, 0.5)");

但请注意，这只是 rgba 符号之一，并且它会失败，例如基于百分比的符号。

另请注意，并非所有浏览器都支持 RGBA HEX 表示法，因此您可能更喜欢使用其他方法来转换您的值，具体取决于您要使用它做什么。

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