rgb(a)和16进制相互转换，rgbaToHex, hexToRgb.

最新推荐文章于 2025-06-04 14:19:58 发布

前端小白的江湖路

最新推荐文章于 2025-06-04 14:19:58 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 高级程序设计文章标签： js颜色转换 rgba转16进制 16进制转rgb

本文链接：https://blog.youkuaiyun.com/qq_21058391/article/details/89737586

JavaScript 高级程序设计专栏收录该内容

29 篇文章

订阅专栏

博主因工作需求记录相关内容，强调写正则表达式时表达清楚更重要。接下来将介绍16进制转rgb的实现，涉及JS颜色转换相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近工作有遇到，就记录一下。

其实在写正则表达式的时候，我认为表达清楚是最重要的，简洁反而是其次的。

/*
  rgba(100, 200, 80, 0.7);
*/

function rgbaToHex (rgba) {
  rgba = rgba.replace(/\s+/g, "");  // 先剪除字符中的空格，避免写正则时加入过多的\s*; 但是r  g  b(10, 2  0, 30) 也会判定为正确的表示颜色字符串。实际使用中也不会出现这种。
  let pattern = /^rgba?\((\d+),(\d+),(\d+),?(\d*\.\d+)?\)$/,
   result =  pattern.exec(rgba);
  if(!result) {
    throw new Error(`传入的${rgba}格式不正确`);
  }

  /* r:result[1], g:result[2], b:result[3], a: result[4] */
  let colors = [];
  for(var i=1, len=3; i<=len; ++i) {
    let str = Number(result[i]).toString(16);
    if(str.length == 1) {
      str = 0 + str;
    }
    colors.push(str);
  }

  return {
    color: "#" + colors.join(""),
    opacity: result[4] ? result[4] : "1",
  };
}

/*
  输出如下
  {color: "#010203", opacity: "1"}
  {color: "#64c850", opacity: "0.7"}
  {color: "#64c850", opacity: "1"}
*/

接下来，我们写一下16进制转rgb

function hexToRgb(hex) {
  /*
    hex: {String}, "#333", "#AF0382"
  */
  hex = hex.slice(1);
  if(hex.length == 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }

  return {
    r: Number.parseInt(hex.slice(0, 2), 16),
    g: Number.parseInt(hex.slice(2, 4), 16),
    b: Number.parseInt(hex.slice(4, 6), 16),
  }
}

console.log(hexToRgb("#555"));
console.log(hexToRgb("#AF3823"));

/*
  输出如下
  {r: 85, g: 85, b: 85}
  {r: 175, g: 56, b: 35}
*/