接触前端以来,知道的颜色一直都是RBG模式和十六进制模式(#FFF),但是今天奇葩UI提了个BUG,根据背景颜色的HSL值的L去决定字体颜色,懵逼良久...
百度后发现HSL模式是工业界的一种说法,HSL分别是色相(H)、饱和度(S)、明度(L);我们所熟知的十六进制模式也有另一个说法叫HEX模式。
查询后发现并没有HEX转HSL的代码,遂根据网上的方法先行转到RGB再转到HSL。当然,我只算了L值...
hexToHsl(val){
let sColor = val.toLowerCase();
//十六进制颜色值的正则表达式
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
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;
}
//处理六位的颜色值
let sColorChange = [];
for (var i=1; i<7; i+=2) {
sColorChange.push(parseInt("0x"+sColor.slice(i, i+2)));
}
// return "RGB(" + sColorChange.join(",") + ")";
let r = sColorChange[0] / 255, g = sColorChange[1] / 255, b = sColorChange[2] / 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let l = (max + min) / 2;
return l;
}
return 0;
}
别的模式转变后续也会整理出来。