前端开发·技术技巧：使用js将HSL颜色或十六进制颜色转换为RGB表示方式

代码如下：

function getRgbNum(sColor) {
    // rgb color
    // e.g. rgb(255, 155, 155) or Rgb(155, 200, 188)
    let rgbReg = /^rgb\(([0-9]{1,3}), *?([0-9]{1,3}), *?([0-9]{1,3})\)$/i;
    if (rgbReg.test(sColor)) {
        let result, R, G, B;
        [result, R, G, B] = rgbReg.exec(sColor);

        R = parseInt(R);
        G = parseInt(G);
        B = parseInt(B);
        return [R, G, B];
    }

    // hex color -> rgb color(Array)
    // e.g. #fff or #ffffff
    let hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if (hexReg.test(sColor)) {
        if (sColor.length === 4) {
            // #fff -> #ffffff
            let sColorNew = "#";
            for (let i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        let sColorChange = [];
        for (let i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }

        let [R, G, B] = sColorChange;
        return [R, G, B];
    }

    // hsl color -> rgb color(Array)
    // e.g. hsl(160, 30%, 100%) or HSL(240, 0, 20%)
    let hslReg = /^hsl\(([0-9]{1,3}), *?((?:[0-9]{1,2})%|100%|0), *?((?:[0-9]{1,2})%|100%|0)\)$/i;
    if (hslReg.test(sColor)) {
        let result, h, s, l;
        let percentReg = /([0-9]{1,3})%/;
        [result, h, s, l] = hslReg.exec(sColor);

        h = parseInt(h);
        s = (s === '0') ? 0 : parseInt(percentReg.exec(s)[1]) / 100;
        l = (l === '0') ? 0 : parseInt(percentReg.exec(l)[1]) / 100;

        let C = (1 - Math.abs(2 * l - 1)) * s;
        let X = C * (1 - Math.abs(((h / 60) % 2) - 1));
        let m = l - C / 2;

        let vr, vg, vb;

        if (h >= 0 && h < 60) {
            [vr, vg, vb] = [C, X, 0];
        } else if (h >= 60 && h < 120) {
            [vr, vg, vb] = [X, C, 0];
        } else if (h >= 120 && h < 180) {
            [vr, vg, vb] = [0, C, X];
        } else if (h >= 180 && h < 240) {
            [vr, vg, vb] = [0, X, C];
        } else if (h >= 240 && h < 300) {
            [vr, vg, vb] = [X, 0, C];
        } else if (h >= 300 && h < 360) {
            [vr, vg, vb] = [C, 0, X];
        }

        let R = Math.ceil(255 * (vr + m));
        let G = Math.ceil(255 * (vg + m));
        let B = Math.ceil(255 * (vb + m));

        return [R, G, B];
    }
}