javascript实现十六进制颜色值（HEX）和RGB格式相互转换

在日常开发中，经常会用到不同格式的颜色域值之间的相互转换，以下给出一种解决方法。

代码如下:

//十六进制颜色值的正则表达式
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();

赞 (0)

相关推荐

  • JavaScript获取图片像素颜色并转换为box-shadow显示

    JavaScript获取图片像素颜色并转换为box-shadow显示

    一.原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { va

  • JS实现颜色的10进制转化成rgba格式的方法

    本文实例讲述了JS实现颜色的10进制转化成rgba格式的方法.分享给大家供大家参考,具体如下: 当我们在已知一个整数如(0~256x256x256x256 之间的颜色值),想获得关于它的3原色加一个透明度时,即alpha, red, green, blue,可采用如下方法: 方法一: function getColor(number) { let color = number; const blue = parseInt(color % 0x100, 10); color = color >>

  • Javascript实现颜色rgb与16进制转换的方法

    本文实例讲述了Javascript实现颜色rgb与16进制转换的方法.分享给大家供大家参考.具体如下: 使用方法: Color(12,34,56); Color("#fff") Color("#defdcd") 实现代码: //颜色转换 var Color = function() { if (!(this instanceof Color)) { var color = new Color(); color._init.apply(color, arguments

  • js 翻转颜色实现代码

    复制代码 代码如下: function reverseColor(rgbColor) {//205,15,20 // console.log(rgbColor); rgbColor = rgbColor.replace(/\s/g, ""); var arrRGB = new Array(3); if (rgbColor.indexOf("rgb") > -1) { var colorReg = /\s*\d+,\s*\d+,\s*\d+/i; var t =

  • RGB颜色值转HTML十六进制(HEX)代码的JS函数

    复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the

  • JavaScript实现把rgb颜色转换成16进制颜色的方法

    本文实例讲述了JavaScript实现把rgb颜色转换成16进制颜色的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • Javascript实现Web颜色值转换

    Javascript实现Web颜色值转换

    最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜

  • 用js实现的十进制的颜色值转换成十六进制的代码

    function MyColor(name,r,g,b){ this.name=name; this.red=r; this.green=g; this.blue=b; } MyColor.prototype.hexValue=function(){ var hR=this.red.toString(16); var hG=this.green.toString(16); var hB=this.blue.toString(16); return "#"+(this.red [Ctrl

  • js实现九宫格的随机颜色跳转

    js实现九宫格的随机颜色跳转

    效果如下: 图(1)  初始图 图(2)  开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body

  • javascript实现rgb颜色转换成16进制格式

    自己试过很好用 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } function rgb2hex(rgb) { if (rgb.charAt(0) == '#') return rgb; var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) *

  • JS实现随机颜色的3种方法与颜色格式的转化

    前言 相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示.这三种都是不支持透明色的.所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果. 随机颜色 在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式: 十六进制格式(#000000-#FFFFFF) 第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然

随机推荐