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 相关文章推荐
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js中this的用法实例分析
Jan 10 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue获取form表单的值示例
Oct 29 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
php中explode与split的区别介绍
2012/10/03 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Python之多进程与多线程的使用
2021/02/23 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
大型晚会策划方案
2014/02/06 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
品牌推广策划方案
2014/05/28 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
交通安全主题班会
2015/08/12 职场文书
2016年寒假家长评语
2015/10/10 职场文书
教师听课学习心得体会
2016/01/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
电频谱管理的原则是什么
2022/02/18 无线电
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技