使用js将rgb颜色转换为HEX(十六进制颜色)或者将十六进制颜色(HEX)转化为rgb颜色

hex和rgb异同

hex的格式:#rrggbb
rgb的格式:reb(255,255,255)可以添加第四个参数用来调整透明度
10用a表示,11用b表示,12用c表示,13用d表示,14用e表示,15用f表示。(也可以用大写字母表示,这里用小写字母。)
十六进制数列:1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,…,aa,ab,ac,…,fc,fd,fe,ff。
对应的十进制数列:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,…,170,171,172,…,252,253,254,255。
如果我们想直接使用某一个颜色并且存在透明度参数的颜色,显而易见直接使用hex格式是办不到的,这时就会想到有没有什么办法将hex格式转换成rgb,使用rgb的第四个参数直接实现我们的需求。上代码

export const hexToRg = (hex: string, opacity?: number) => {
  // 当opacity存在说明要将hex -> rgba否则hex -> rgb
  if (hex) {
    const temp = `${parseInt(`0x${hex.slice(1, 3)}`)},${
      // eslint-disable-next-line radix
      parseInt(`0x${hex.slice(3, 5)}`)
      // eslint-disable-next-line radix
    },${parseInt(`0x${hex.slice(5, 7)}`)}`
    if (!opacity) {
      return `rgb(${temp})`
    }
    return `rgb(${temp},${opacity})`
  }
  return ''
}

生活就是不断的积累, 奥力给!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容