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框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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
PHP4在Windows2000下的安装
2006/10/09 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
js实现筛选功能
2020/11/24 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
纪念建党演讲稿范文
2014/01/13 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
教师学期末个人总结
2015/02/13 职场文书
导游词之西安骊山
2019/12/03 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
利用js实现简单开关灯代码
2021/11/23 Javascript