js 颜色的几种表示方式？附 rgb 颜色与 16进制颜色相互转

常见颜色表示方式：

1.16进制颜色表示法分为两种：

• 1. 以”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颜色指南