Js：将颜色的十六进制形式转为 rgba 形式

原创已于 2025-01-03 18:00:24 修改 · 798 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2021-08-04 14:06:25 首次发布

Js+Ts 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种将十六进制颜色代码转换为RGBA格式的方法，并允许设置颜色的不透明度。通过简单的JavaScript函数实现，方便应用于前端开发中。

有时候需要对颜色的 `不透明度`进行变换，所以用到了这个方法：

/**
 * 将十六进制的颜色转为rgba
 * @param hex 颜色的十六进制
 * @param opacity 颜色的不透明度
*/
export const bgColor = (hex, opacity = 0.1) => {
  if (hex) {
    return (
      'rgba(' +
      parseInt('0x' + hex.slice(1, 3)) +
      ',' +
      parseInt('0x' + hex.slice(3, 5)) +
      ',' +
      parseInt('0x' + hex.slice(5, 7)) +
      ',' +
      opacity +
      ')'
    )
  } else {
    return 'rgba(0,0,0,0.1)'
  }
}