js实现颜色转换hex转rgba

liu__software

已于 2022-11-04 11:14:18 修改

阅读量3.7k

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-11-04 11:13:06 首次发布

原文链接：https://blog.csdn.net/jarisMA/article/details/114386688

版权

javascript 专栏收录该内容

148 篇文章 7 订阅

订阅专栏

js实现颜色转换

一、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() + ")";
};

来自u-charts.js

来自u-charts.js
// hex 转 rgba
function hexToRgb(hexValue, opc) {
  var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  var hex = hexValue.replace(rgx, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });
  var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if(!rgb){
	  return hexValue;
  }
  var r = parseInt(rgb[1], 16);
  var g = parseInt(rgb[2], 16);
  var b = parseInt(rgb[3], 16);
  return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
}

二、十进制转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;
};

// 十进制转hex
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;
}

转载于：

https://blog.csdn.net/jarisMA/article/details/114386688