常见颜色表示方式：
1.16进制颜色表示法分为两种：
- 以”0x“开头表示，这种表示方法才是标准的16进制的表示方法。例如 0x00ffffff 或 0xffffff
注意：以"0x"开头的，如果后面是六位，那么就没有透明度，如果是八位，那么“0x”后面的两位就是透明度值，范围是：FF ~ 00(不透明~透明)
- 2.以“#”开头表示，又叫HEX方式，是最常见的CSS颜色值。例 如“#FFFFFF”或“#FFF”。
注意：只有当一二位，三四位，五六位数字都一样时，才能采取缩写形式，如 '#FFFFFF' 缩写为 '#FFF'，'#44aadd' 缩写为 '#4ad'。
区别：其实也没啥区别，都是16进制的，常用的是“#”开头的。
2.RGB表示法
1.使用rgb表示，如白色“#FFFFFF”表示为 rgb(255,255,255)
r：红；g：绿；b：蓝，就是光的三原色，每个值的范围是0-255。2.使用rgba表示，如50%透明度的白色为 rgba(255,255,255, 0.5)
相比第一种在后面多了一个参数a，a 表示的是alpha(阿尔法)，表示透明度，取值范围是0-1，rgba可大写。
3.HSL
可以在CSS中利用hsl()函数和hsla()函数使用HSL(hue, saturation, lightness)值，hue、saturation、lightness分别表示色相、饱和度、亮度。其中色相的取值范围是 0 ~ 360，饱和度和亮度的取值范围是 0% ~ 100%。HSL 颜色可以通过以下方式来表示：
// css代码
color: hsl(0, 100%, 50%); /* 红色 */
color: hsl(120, 100%, 50%); /* 绿色 */
color: hsl(240, 100%, 50%); /* 蓝色 */
.my-element {
background-color: hsl(0deg, 100%, 20%); // dark red
}
.my-element {
background-color: hsl(0deg, 100%, 50%); // medium red
}
.my-element {
background-color: hsl(0deg, 100%, 80%); // light red
}
4.HWB
HWB (hue,whiteness and blackness）表示色相、白色浓度、黑色浓度。跟HSL一样，色相值可以是0-360度数，其他两个参数则是控制此色相中应该混合多少白色和黑色（白色浓度跟黑色浓度可以直接导致最后结果是全白还是全黑）。如果白色浓度跟黑色浓度的比例越接近，越会增加灰调。这跟调色一样，对于创建单色板特别管用。
rgb 颜色与 16进制颜色相互转换代码
/**
* 16 进制颜色转 rgb
* eg:
* hexToRgb('#1772f6') -> 'rgb(23, 114, 246)'
* hexToRgb('#ffffff') -> 'rgb(255, 255, 255)'
* hexToRgb('#4ad') -> 'rgb(68, 170, 221)'
*
* @param {object} hex 16进制颜色
* @param {number} opacity 透明度
* @return {string} rgb color
*/
function hexToRgb(hex = '', opacity = 1) {
if (!hex) return ''
//十六进制颜色值的正则表达式
// var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
hex = hex.replace("#", "");
if (hex.length === 3) { // 缩写 如 '4ad' 转为 '44aadd'
let str = "";
for (let i = 0; i < hex.length; i += 1) {
str += (hex[i] + hex[i]);
}
hex = str
}
// Split the hex string into three parts: red, green, and blue
let red = parseInt(hex.substr(0, 2), 16);
let green = parseInt(hex.substr(2, 2), 16);
let blue = parseInt(hex.substr(4, 2), 16);
return `rgba(${red}, ${green}, ${blue}, ${opacity})`
}
/**
* rgb 转 16 进制颜色
* eg:
*
* rgbToHex('rgb(68, 170, 221)') -> '#44aadd'
* rgbToHex('rgb(255, 255, 255)') -> '#ffffff'
*
* @param {object} rgbColor rgb颜色
* @return {string} 16 进制颜色
*/
function rgbToHex(rgbColor) {
if (/(rgba|RGBA)/.test(rgbColor)) {
console.warn('不支持rgba颜色转换')
return rgbColor
}
let arr = rgbColor.replace(/(\(|\)|rgb|RGB|\s)*/g, "").split(",");
let strHex = "#";
for (let i = 0; i < arr.length; i++) {
let hex = Number(arr[i]).toString(16);
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
return strHex
}
参考：
【css】为什么#fff和#ffffff是一样的？或者说#fff和#ffffff的区别
进制转换（二进制、八进制、十进制、十六进制）超详细版
常见颜色表示方式
基于RGB、HSL、HWB、LAB和LCH的CSS颜色指南
