javascript实现十六进制颜色值(HEX)和RGB格式相互转换


Posted in Javascript onJune 20, 2014

在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法。

//十六进制颜色值的正则表达式

var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/*RGB颜色转换为16进制*/

String.prototype.colorHex = function(){

    var that = this;

    if(/^(rgb|RGB)/.test(that)){

        var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");

        var strHex = "#";

        for(var i=0; i<aColor.length; i++){

            var hex = Number(aColor).toString(16);

            if(hex === "0"){

                hex += hex;        

            }

            strHex += hex;

        }

        if(strHex.length !== 7){

            strHex = that;        

        }

        return strHex;

    }else if(reg.test(that)){

        var aNum = that.replace(/#/,"").split("");

        if(aNum.length === 6){

            return that;        

        }else if(aNum.length === 3){

            var numHex = "#";

            for(var i=0; i<aNum.length; i+=1){

                numHex += (aNum+aNum);

            }

            return numHex;

        }

    }else{

        return that;        

    }};

 /*16进制颜色转为RGB格式*/

 String.prototype.colorRgb = function(){

    var sColor = this.toLowerCase();

    if(sColor && reg.test(sColor)){

        if(sColor.length === 4){

            var sColorNew = "#";

                for(var i=1; i<4; i+=1){

                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));        

                }

                sColor = sColorNew;

        }

        //处理六位的颜色值

        var sColorChange = [];

        for(var i=1; i<7; i+=2){

            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));        

        }

        return "RGB(" + sColorChange.join(",") + ")";

    }else{

        return sColor;        

    }};

使用颜色转换方法:
ar sRgb = "RGB(23, 245, 56)" , sHex = "#34538b";

var sHexColor = sRgb.colorHex();

var sRgbColor = sHex.colorRgb();
Javascript 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
理解javascript async的用法
Aug 22 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
js常用数组操作方法简明总结
Jun 20 #Javascript
JS实现闪动的title消息提醒效果
Jun 20 #Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 #Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 #Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 #Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
You might like
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JS实现密码框效果
2020/09/10 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Flask框架web开发之零基础入门
2018/12/10 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
委托公证书范本
2014/04/03 职场文书
关于保护环境的标语
2014/06/09 职场文书
道德与公民自我评价
2015/03/09 职场文书
个人更名证明
2015/06/23 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL