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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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
漂亮但不安全的CTB
2006/10/09 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
javascript中this指向详解
2016/04/23 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python破解zip加密文件的方法
2018/05/31 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Django中使用Celery的方法示例
2018/11/29 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
学校消防演习方案
2014/02/19 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
毕业生评语大全
2015/01/04 职场文书
通知书大全
2015/04/27 职场文书
员工年度工作总结2015
2015/05/18 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python