rgb与rgba
rgb(255,255,255)
rgb色彩模式是工业界的一种颜色标准，是通过对红?、绿(G)、蓝(B)三个颜色通道 的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统 之一。（摘自百度百科）
rgba(255,255,255,0.3)
rgba即在rgb的基础上新增最后一位代表透明度，范围为0 - 1，小数点后保留两位。
hex
#FFFFFF
简单来说hex就是将rgb或rgba的每位转化为对应的16进制来表示。
对于hex,平常最常见的就是3位和6位的，例如：#f1f #ff11ff ，两者表示同一种颜色.即3位是6位的缩写。
因此#ffffff就代表ff,ff,ff 即rgb(255,255,255)。
但其实hex还有4位以及8位的情况，用来表示rgba。例如：#RGBC #RRGGBBCC，
与表示rgb相同，4位hex是8位hex的缩写。比较特殊的一点就是最后1(2)位。用来代表rgba的最后一个值即透明度。以ff为1，00为0.进行百分比运算，因为透明度只支持两位小数。所以相邻的两个数代表同一个透明度。
如:
#7f11e0fd rgba(127, 17, 224, 0.99) rgb(127, 17, 224)
#7f11e0fc rgba(127, 17, 224, 0.99) rgb(127, 17, 224)
hex to rgba
知道两者的区别后，现在让我们来实现一个hexToRgba函数把hex格式转化为rgba格式吧。
/**
* @param {string} hex
* @return {string}
*/
function hexToRgba(hex) {
let len = hex.length - 1;
const validChar = /^#[a-fA-F\d]+$/.test(hex);
const validLength = [3, 4, 6, 8].includes(len);
if (!validChar || !validLength) {
throw Error('无效的hex')
}
//删掉#，将hex转换为数组
hex = hex.slice(1).split('');
function getColor() {
let digit = hex.shift();
digit += len > 4 ? (hex.shift()) : digit;
//通过parseInt转为10进制数
return parseInt(digit, 16)
}
const r = getColor();
const g = getColor();
const b = getColor();
const a = hex.length ? (round(getColor() / 255)) : 1;
return `rgba(${r},${g},${b},${a})`
}
function round(num) {
return Math.round(num * 100) / 100
}
