JS将RGB,RGBA颜色值转换成16进制的形式

赞赏 2017-06-06

有一个需求是将 rgb(255,255,255) 或 rgba(255,255,255),这样的颜色值转换成16进制(#FFFFFFF)的形式表示。
一开始以为有点难,后来发现一个toString() 函数就可以帮我们搞定!


代码如下:

/**
* 统一将颜色值使用16进制形式表示
* @name changeColor
* @grammar changeColor(value) => value
* @example
* rgb(255,255,255)  => "#ffffff"
*/ function changeColor(value) {        if (/rgba?/.test(value)) {            var array = value.split(",");            if (array.length > 3)                return "";            value = "#";            for (var i = 0, color; color = array[i++];) {                color = parseInt(color.replace(/[^\d]/gi, ''), 10).toString(16);                value += color.length == 1 ? "0" + color : color;            }            value = value.toUpperCase();        }        return  value;    }   // 函数调用    var  hexcolor1= changeColor('rgb(255,255,0)');    console.log(hexcolor1); //#FFFF00    var  hexcolor2= changeColor('rgba(255,255,0)');    console.log(hexcolor2); //#FFFF00


互转工具推荐 :http://tool.wode321.com/web/rgb2hex


更多:


十进制转其他 

number.toString(radix)

参数radix可选。规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。

  • 2 - 数字以二进制值显示
  • 8 - 数字以八进制值显示
  • 16 - 数字以十六进制值显示

其他转十进制:  

  • parseInt(x,2)  //二进制转10进制 

  • parseInt(x,8));  //八进制转10进制 

  • parseInt(x,16));   //十六进制转10进制 

其他转其他  

先用parseInt转成十进制再用toString转到目标进制

登陆后阅读全文
阅读 8036 赞赏 2 有用 9 没用 2 收藏 1 分享

   


作者声明:本篇文章系本人原创,欢迎分享,但未经许可,谢绝转载。

1 条留言

🍂WXW🐭的头像
但是我这个rgba是有4个数字的,我用了你这个没用,不知道是我写错了还是什么问题
18年1月26日

有料推荐

这世界欠我一个这样的老公!

高校学生模仿“世界名画”摆拍,可以说是戏精本精了

iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评

果然是高手!这次在日本,特朗普竹杠敲得不是一般狠

资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样

长一样的双胞胎也能识别?蚂蚁金服发布「眼纹识别」技术

苏联是怎么被阿富汗拖垮的?

美团或入局「分时租赁」共享汽车,王兴要大笔投入「泛出行」领域了? | 36氪独家

你或许被“一盘番茄炒蛋”刷屏了,但有人辛酸,有人质疑

iPhone X发售前夜,黄牛与苹果公司的不安

他的文章

@摩拜小程序为什么关锁后,还是那个开锁界面?

看片要当心了!色站不只掏空你,还可能掏空你的电脑 | 网页中可能包含JS挖矿机脚本!!!

Chrome 调试工具的一些高阶功能

前端 | 如何绕过面试题中的小坑

说说Javascript的闭包(Closure)是怎么回事?

ajax返回的http status是200 没有进success方法 却进入了error方法?

为umeditor增加引用功能

JS将RGB,RGBA颜色值转换成16进制的形式

umeditor 报错:Discontiguous selection is not supported

怎么禁用onbeforeunload()方法

手机扫一扫
分享文章