js rgb颜色和hex颜色互转

最新推荐文章于 2024-08-14 15:33:51 发布

原创最新推荐文章于 2024-08-14 15:33:51 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了两个JavaScript字符串原型上的方法，用于实现颜色值的转换。`HEXtoRGB`函数将16进制颜色代码转换为RGB格式，而`RGBtoHEX`则将RGB颜色值转换回16进制。这两个函数通过正则表达式验证输入，并确保转换的准确性。这对于前端开发中处理颜色样式时非常有用。

;!function (str) {
    str.HEXtoRGB = function () {
        var col = this.slice(1).split('');
        if (/^[0-9A-Fa-f]{6}$/.test(col.join('')) || /^[0-9A-Fa-f]{3}$/.test(col.join(''))) {
            (col.length === 3) && !function () {
                for (i = -3; i < 0; i++) {
                    col.splice(i, 0, '' + col.slice(i)[0])
                }
            } ();
            return "rgb(" + parseInt(col.slice(0, 2).join(''), 16) + "," + parseInt(col.slice(2, 4).join(''), 16) + "," + parseInt(col.slice(4, 6).join(''), 16) + ")";
        } else { return "rgb(0,0,0)" };
    };
    str.RGBtoHEX = function () {
        let self = this.replace(/\s+/g,""); //去掉空格
        var col = self.toUpperCase();
        col = col.replace(/^RGB\((\d{1,3}?)\,(\d{1,3}?)\,(\d{1,3}?)\)$/, function (core, $1, $2, $3) {
            var a = +$1, b = +$2, c = +$3, cache = "";
            // (a < 256 && b < 256 && c < 256) ? cache = '#' + a.toString(16) + b.toString(16) + c.toString(16) : cache = "#000"; //值为0要转为00
            var aTo16 = a.toString(16) < 10 ? '0' + a.toString(16) : a.toString(16),
            bTo16 = b.toString(16) < 10 ? '0' + b.toString(16) : b.toString(16),
            cTo16 = c.toString(16) < 10 ? '0' + c.toString(16) : c.toString(16);
            (a < 256 && b < 256 && c < 256) ? cache = '#' + aTo16 + bTo16 + cTo16 : cache = "#000";
            return cache;
        })
        return col;
    }
}(String.prototype)