js颜色进制之间的转换

十进制、十六进制、RGBA颜色值之间的相互转换

10进制转rgba

    // 10进制转rgba 
    function decToRgba(number) {
        const blue = number & 0xff;
        const green = number >> 8 & 0xff;
        const red = number >> 16 & 0xff;
        number = number >> 24 & 0xff;
        const alpha = (number / 0xff).toFixed(2);
        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
    }

rgb转16进制

    // rgb转16进制
    function rgbToHex(rgb) {
        const regexp = /[0-9]{0,3}/g;
        const re = rgb.match(regexp).filter(f => f).map(Number);
        let hexColor = '';
        const hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        for (let i = 0; i < re.length; i++) {
            let r = null, c = re[i], l = c;
            const hexAr = [];
            while (c > 16) {
                r = c % 16;
                c = (c / 16) >> 0;
                hexAr.push(hex[r]);
            } hexAr.push(hex[c]);
            if (l < 16) {
                hexAr.push(0);
            }
            hexColor += hexAr.reverse().join('');
        }
        return '#' + hexColor;
    }

16进制转10进制

    // 16进制转10进制
    function hexToDec(hexColor, alpha) {
        if (!hexColor.includes('#')) {
            return hexColor;
        }
        const hexColorArr = hexColor.slice(hexColor.indexOf('#') + 1).split('');
        let resultArr = [];
        for (let i = 0; i < hexColorArr.length; i += 2) {
            resultArr.push(hexColorArr.slice(i, i + 2));
        }
        let result = [];
        resultArr.forEach((res) => {
            let sum = 0;
            res.reverse().forEach((char, index) => {
                sum += charToNumber(char) * Math.pow(16, index);
            });
            result.push(sum);
        });
        const a = alpha ? Math.round(alpha * 0xff) : 0xff;
        return (result[0] << 16 | result[1] << 8 | result[2] | a << 24).toString(); // 235676553
    }
    
    function charToNumber(char) {
        switch (char) {
            case '0':
            case '1':
            case '2':
            case '3':
            case '4':
            case '5':
            case '6':
            case '7':
            case '8':
            case '9':
                return parseInt(char, 10);
            case 'a':
                return 10;
            case 'b':
                return 11;
            case 'c':
                return 12;
            case 'd':
                return 13;
            case 'e':
                return 14;
            case 'f':
                return 15;
            default:
                return 0;
        }
    }

完整代码链接: github.

示例截图