js rgba颜色转换

// hex转rgba第一种
const hex2Rgb = (hexValue, alpha = 1) => {
  const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
  const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!rgb) {
    return hexValue;
  }
  const r = parseInt(rgb[1], 16),
    g = parseInt(rgb[2], 16),
    b = parseInt(rgb[3], 16);
  return `rgba(${r},${g},${b},${alpha})`;
};
// hex转rgba第二种
const hex2Rgba = (bgColor, alpha = 1) => {
  let color = bgColor.slice(1); // 去掉'#'号
  let rgba = [
    parseInt("0x" + color.slice(0, 2)),
    parseInt("0x" + color.slice(2, 4)),
    parseInt("0x" + color.slice(4, 6)),
    alpha
  ];
  return "rgba(" + rgba.toString() + ")";
};
//十进制转hex
const getred = (color) => {
  const red = (color & 0xff0000) >> 16;
  return red;
};

const getgreen = (color) => {
  const green = (color & 0x00ff00) >> 8;
  return green;
};

const getblue = (color) => {
  const blue = color & 0x0000ff;
  return blue;
};
const Rgb2Hex = (color) => {=
  const r = getred(color);
  const g = getgreen(color);
  const b = getblue(color);
  const hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  return hex;
}

改造成自己想用的函数

export const hex2Rgb = (hexValue, alpha = 1) => {
  const regex = /^#([0-9A-Fa-f]{6}),(?:\d+(?:\.\d*)?|\.\d+)$/;
  const match = regex.exec(hexValue);
  // console.log(match);
  if (match) (hexValue = `#${match[1]}`) && (alpha = match[0].split(",")[1]);

  const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
  const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!rgb) return hexValue;
  const r = parseInt(rgb[1], 16),
    g = parseInt(rgb[2], 16),
    b = parseInt(rgb[3], 16);
  return `rgba(${r},${g},${b},${alpha})`;
};

使用方法

hex2Rgb(`#FFFFFF,.5`)
//或者
hex2Rgb(`#FFFFFF`,0.5)

 

参考：https://blog.csdn.net/a460550542/article/details/127685094