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颜色转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 纯JavaScript实现的完美渐变弹出层效果代码

    纯JavaScript实现的完美渐变弹出层效果代码

    对于Web项目开发尤其是前台UI的设计而言,用户体验至关重要,因为它直接关系到项目的成败,简洁,平滑,优雅的设计永远能够受到用户的青睐。
    2010-04-04
  • js函数和this用法实例分析

    js函数和this用法实例分析

    这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • 基于javascript实现图片滑动效果

    基于javascript实现图片滑动效果

    这篇文章主要为大家详细介绍了基于javascript实现图片滑动效果的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • 几个比较实用的JavaScript 测试及效验工具

    几个比较实用的JavaScript 测试及效验工具

    JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。
    2010-04-04
  • js词法作用域与this实例详解

    js词法作用域与this实例详解

    作用域值一个变量的作用饿范围,下面这篇文章主要给大家介绍了关于js词法作用域与this的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 手把手教你用JS实现回车评论功能

    手把手教你用JS实现回车评论功能

    最近在写一个问答功能,类似于评论,下面这篇文章主要给大家介绍了关于如何用JS实现回车评论功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 控制文字内容的显示与隐藏示例

    控制文字内容的显示与隐藏示例

    控制某id或class的地div显示与隐藏是比较容易实现的,但若控制文字内容的显示与隐藏该如何做到呢?下面有个示例,大家可以参考下
    2014-06-06
  • 跟我学习javascript的基本类型和引用类型

    跟我学习javascript的基本类型和引用类型

    跟我学习javascript的基本类型和引用类型,利用图解的方式,告诉大家javascript的基本类型和引用类型的区别和联系,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Layui数据表格判断编辑输入的值,是否为我需要的类型详解

    Layui数据表格判断编辑输入的值,是否为我需要的类型详解

    今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 灵活使用数组制作图片切换js实现

    灵活使用数组制作图片切换js实现

    这篇文章主要介绍了灵活使用数组制作图片切换效果,js实现图片切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论