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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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与C#的值类型指向区别的详解
2013/05/21 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python是编译运行的验证方法
2015/01/30 Python
python绘制多个曲线的折线图
2020/03/23 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Django 再谈一谈json序列化
2020/03/16 Python
python爬取代理ip的示例
2020/12/18 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
户外婚礼策划方案
2014/02/08 职场文书
支部鉴定材料
2014/06/02 职场文书
优秀应届生求职信
2014/06/16 职场文书
视光学专业自荐信
2014/06/24 职场文书
2014年环保工作总结
2014/11/26 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python