js将十六进制颜色转rgb以及加深减淡颜色值

十六进制颜色值转rgb
JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

十六进制转换为十进制相对容易些，核心代码如下示例：parseInt(“0xFF”)，其结果就是255，”0x”就表明当前是16进制，由于parseInt后面无参数，默认就是转换为10进制了。

十进制转换为16进制，核心代码如下：var num=255; num.toString(16);，其结果是FF。”16″表示数值转换为16进制字符串。

function colorRgba(str,n){
	//十六进制颜色值的正则表达式
	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	var sColor = str.toLowerCase();
	n= n||1;
	//十六进制颜色转换为RGB格式
    if(sColor && reg.test(sColor)){
        let sColorChange=getRgbNum(sColor);
		return "rgba(" + sColorChange.join(",") + ","+n+")";
    }else{
        return sColor;
    }
}
function getRgbNum(sColor){
	if(sColor.length === 4){
       var sColorNew = "#";
       for(var i=1; i<4; i+=1){  //补全颜色值 例如：#eee,#fff等
           sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
       }
       sColor = sColorNew;
    }
    //处理六位颜色值
    var sColorChange = [];
    for(var i=1; i<7; i+=2){
    //核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制
      sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
    }
    return sColorChange;
}

颜色加深或者颜色减淡
原理是通过对rgb数字进行加减来实现，因为rgb的r、g、b三个数的值越大，颜色越浅，最大为255，此时为白色，值越小，颜色越深，最小值为0，此时为黑色，所以若是颜色值为rgb可以直接加减，若为十六进制颜色值，则先转为rgb,再加减

function LightDarkenColor(color, num) {
   let colorArr = getRgbNum(color);
   let sColorChange = [];
   for(var i=0;i<colorArr.length;i++){
   		let  val = colorArr[i]+num;
	    if(val<0){
	       val = 0;
	    }
	    if(val>255){
	    	val=255;
	    }
   		sColorChange.push(val)
   }
   return "rgba(" + sColorChange.join(",") + ",1)";
}

事实上colorRgba方法也具有颜色减淡功能，通过传递第二个参数（透明度）来侧面实现颜色减淡效果。但不具备颜色加深效果