JavaScript中16进制颜色与rgb颜色互相转换的示例代码

 更新时间:2024年01月31日 10:45:18   作者:瓜月半  
这篇文章主要介绍了JavaScript中16进制颜色与rgb颜色互相转换的示例代码,通过示例代码介绍了JS 颜色16进制、rgba相互转换问题,感兴趣的朋友一起看看吧

JavaScript中16进制颜色与rgb颜色互相转换

16进制转 rgb

function hexToRgba(hex, opacity) {
    if (!hex) hex = '#ededed';
    let rgba = 'rgba(' + parseInt('0x' + hex.slice(1,3)) + ',' +
        parseInt('0x' + hex.slice(3,5)) + ',' +
        parseInt('0x' + hex.slice(5,7)) + ',' +
        (opacity || "1") + ')'
    return rgba
}

rgb 转 16进制

function RGBToHex(rgb) {
  if (!rgb) rgb = 'rgb(237,237,237)'  
  var regexp = /[0-9]{0,3}/g
  var res = rgb.match(regexp) // 利用正则表达式去掉多余的部分,将rgb中的数字提取
  var hexRes = '#'
  var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
  var hexArr = []
  for (let i = 0; i < res.length; i++) {
    if (res[i]) {
      if (res[i] > 16) {
        let leftIndex = (res[i] / 16) >> 0 // 向下取整
        let rightIndex = +res[i] % 16
        hexArr.push(hex[leftIndex])
        hexArr.push(hex[rightIndex])
      } else {
        hexArr.push(0)
        hexArr.push(hex[res[i]])
      }
    }
  }
  return hexRes += hexArr.join('')  // #EDEDED
}

补充:

JS 颜色16进制、rgba相互转换

1、16进制转rgba

16进制颜色模版

 转换代码

function hexToRgba(hex){
        const rgba = [];
        hex = hex.replace('#', '').padEnd(8, 'F');
        for (let i = 0; i < hex.length; i+=2) {
            rgba.push(parseInt(hex.slice(i, i+2), 16))
        }
        return rgba;
    }

2、rgba转16进制

function rgbaToHex(rgba){
    let hex = '#';
    for (const i of rgba) {
        hex += i.toString(16).padStart(2, '0');
    }
    return hex;
}

到此这篇关于JavaScript中16进制颜色与rgb颜色互相转换的文章就介绍到这了,更多相关js 16进制颜色与rgb颜色转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现时间轴自动播放

    JS实现时间轴自动播放

    这篇文章主要为大家详细介绍了JS实现时间轴自动播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • swiper自定义分页器使用方法详解

    swiper自定义分页器使用方法详解

    这篇文章主要为大家详细介绍了swiper自定义分页器的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • JavaScript中的splice方法用法详解

    JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等。这篇文章主要介绍了JavaScript中的splice方法用法详解的相关资料,需要的朋友可以参考下
    2016-07-07
  • JS 使用for循环遍历子节点查找元素

    JS 使用for循环遍历子节点查找元素

    这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素,经测试,效果不错,需要的朋友可以看看
    2014-09-09
  • Javascript的原型和原型链你了解吗

    Javascript的原型和原型链你了解吗

    这篇文章主要为大家详细介绍了Javascript的原型和原型链,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • js获取select标签的值且兼容IE与firefox

    js获取select标签的值且兼容IE与firefox

    本篇文章主要介绍了js获取select标签的值且兼容IE与firefox。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 微信小程序使用蓝牙小插件

    微信小程序使用蓝牙小插件

    这篇文章主要为大家详细介绍了微信小程序使用蓝牙小插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS解密入门之凭直觉解

    JS解密入门之凭直觉解

    什么叫直觉解?根据目前流行的免杀方法,有这么几种初级加密方法。进制加密,URLEncode加密,加花
    2008-06-06
  • JavaScript中的prototype使用说明

    JavaScript中的prototype使用说明

    在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。
    2010-04-04
  • js控制浏览器全屏示例代码

    js控制浏览器全屏示例代码

    控制浏览器全屏的方法有很多,下面为大家介绍下js是如何做到的
    2014-02-02

最新评论