如何使用javascript将RGBA转换为Hex颜色代码

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

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表示法,因此您可能更喜欢使用其他方法来转换您的值,具体取决于您要对其执行的操作.

Answer 2

尝试这个：

\n

\n
• \xe2\x9c\x93 适用于 alphargba(255, 255, 255, 0) => #ffffff00
\n
• \xe2\x9c\x93 适用于单位数字rgba(0, 0, 0, 0) => #00000000
\n
• \xe2\x9c\x93 也适用于 RGBrgb(124, 255, 3) => #7cff03
\n
• \xe2\x9c\x93 您可以将 alpha 通道切开rgba(255, 255, 255, 0) => #ffffff
\n

\n

\r\n

\r\n

function RGBAToHexA(rgba, forceRemoveAlpha = false) {\n  return "#" + rgba.replace(/^rgba?\\(|\\s+|\\)$/g, \'\') // Get\'s rgba / rgb string values\n    .split(\',\') // splits them at ","\n    .filter((string, index) => !forceRemoveAlpha || index !== 3)\n    .map(string => parseFloat(string)) // Converts them to numbers\n    .map((number, index) => index === 3 ? Math.round(number * 255) : number) // Converts alpha to 255 number\n    .map(number => number.toString(16)) // Converts numbers to hex\n    .map(string => string.length === 1 ? "0" + string : string) // Adds 0 when length of one number is 1\n    .join("") // Puts the array to togehter to a string\n}\n\n//\n// Only tests below! Click "Run code snippet" to see results\n//\n\n// RGBA with Alpha value\nexpect(RGBAToHexA("rgba(255, 255, 255, 0)"), "#ffffff00")\nexpect(RGBAToHexA("rgba(0, 0, 0, 0)"), "#00000000")\nexpect(RGBAToHexA("rgba(124, 255, 3, 0.5)"), "#7cff0380")\nexpect(RGBAToHexA("rgba(124, 255, 3, 1)"), "#7cff03ff")\n\n// RGB value \nexpect(RGBAToHexA("rgba(255, 255, 255)"), "#ffffff")\nexpect(RGBAToHexA("rgba(0, 0, 0)"), "#000000")\nexpect(RGBAToHexA("rgba(124, 255, 3)"), "#7cff03")\n\n// RGBA without Alpha value\nexpect(RGBAToHexA("rgba(255, 255, 255, 0)", true), "#ffffff")\nexpect(RGBAToHexA("rgba(0, 0, 0, 0)", true), "#000000")\nexpect(RGBAToHexA("rgba(124, 255, 3, 0.5)", true), "#7cff03")\nexpect(RGBAToHexA("rgba(124, 255, 3, 1)", true), "#7cff03")\n\nfunction expect(result, expectation) {\n  console.log(result === expectation ? "\xe2\x9c\x93" : "X", result, expectation)\n}

\r\n

\r\n

\r\n

\n

代码构建基于：

\n

\n
• https://css-tricks.com/converting-color-spaces-in-javascript/
\n

\n

Answer 3

我的解决方案。希望有用。

const rgbaToHex = (color: string): string => {
  if (/^rgb/.test(color)) {
    const rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(',');

    // rgb to hex
    // eslint-disable-next-line no-bitwise
    let hex = `#${((1 << 24) + (parseInt(rgba[0], 10) << 16) + (parseInt(rgba[1], 10) << 8) + parseInt(rgba[2], 10))
      .toString(16)
      .slice(1)}`;

    // added alpha param if exists
    if (rgba[4]) {
      const alpha = Math.round(0o1 * 255);
      const hexAlpha = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
      hex += hexAlpha;
    }

    return hex;
  }
  return color;
};