十六进制颜色值转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方法也具有颜色减淡功能,通过传递第二个参数(透明度)来侧面实现颜色减淡效果。但不具备颜色加深效果