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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
Puppet的一些技巧
Sep 17 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 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
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
PyQt5实现登录页面
2020/05/30 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python基于template实现字符串替换
2020/11/27 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
干部作风建设工作总结
2014/10/29 职场文书
煤矿安全保证书
2015/02/27 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
百年校庆感言
2015/08/01 职场文书
礼仪培训心得体会
2016/01/22 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python