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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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 MemCached高级缓存配置图文教程
2010/08/05 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP防盗链代码实例
2014/08/27 PHP
php字符集转换
2017/01/23 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
不安全的常用的js写法
2009/09/15 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python如何爬取个性签名
2018/06/19 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python urllib和urllib3知识点总结
2021/02/08 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
安全生产目标责任书
2014/04/14 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
服务标语大全
2014/06/18 职场文书
上诉答辩状范文
2015/05/22 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL