将16进制颜色转换为RGB颜色的指南
最编程
2024-01-13 08:30:51
...
/**
* 16进制颜色转rgb颜色
* @param {string} val 16进制颜色值
* @param {number} opa 不透明度，取值0~1
* @return {string} 转换后的rgb或rgba颜色值字符串
*/
function colorToRGB(val, opa) {
const pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则
const flag = typeof opa == 'number'; //判断是否有设置不透明度
if (!pattern.test(val)) { //如果值不符合规则返回空字符
return '';
}
let v = val.replace(/#/, ''); //如果有#号先去除#号
let rgbArr = [];
let rgbStr = '';
for (let i=0; i<3; i++) {
let item = v.substring(i*2, i*2+2);
let num = parseInt(item, 16);
rgbArr.push(num);
}
rgbStr = rgbArr.join();
rgbStr = 'rgb' + (flag ? 'a': '') + '(' + rgbStr + (flag ? ',' + opa : '')+ ')';
return rgbStr;
}
/* 使用示例 */
const color1 = colorToRGB('#8C13FF');
const color2 = colorToRGB('#8C13FF', .8);
console.log(color1,color2);
//rgb(140,19,255)
//rgba(140,19,255,0.8)