JavaScript 颜色操作工具

最新推荐文章于 2024-04-23 17:09:12 发布

早晨阳光一般暖

最新推荐文章于 2024-04-23 17:09:12 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： rgb 色阶颜色工具 color tool

本文链接：https://blog.csdn.net/LZY_1993/article/details/80467847

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、转换为RGB颜色

var rgb1 = ColorTool.toRGB("#ffffff");

var rgb2 = ColorTool.toRGB("blue");

2、转换为16进制颜色

var hex1 = ColorTool.toHEX("rgb(24,35,34)");

var hex2 = ColorTool.toHEX("red");

3、以值取色

假如，上面颜色渐变(绿橙红)表示 125~2357 这个范围。请问，1246 这个值代表那个颜色？869呢？

var min = 125;
var max = 2357;

var range = ColorTool.createRange("green,orange,red", min, max);
var rgb1 = range.getRGB(1246);
var rgb2 = range.getRGB(869);

注意：该工具不支持rgba颜色

4、源码

    // 颜色操作工具
    window.ColorTool = new function () {
        var _EN_COLOR = JSON.parse('{"aliceblue":"f0f8ff","antiquewhite":"faebd7","aqua":"00ffff","aquamarine":"7fffd4","azure":"f0ffff","beige":"f5f5dc","bisque":"ffe4c4","black":"000000","blanchedalmond":"ffebcd","blue":"0000ff","blueviolet":"8a2be2","brown":"a52a2a","burlywood":"deb887","cadetblue":"5f9ea0","chartreuse":"7fff00","chocolate":"d2691e","coral":"ff7f50","cornflowerblue":"6495ed","cornsilk":"fff8dc","crimson":"dc143c","cyan":"00ffff","darkblue":"00008b","darkcyan":"008b8b","darkgoldenrod":"b886b","darkgray":"a9a9a9","darkgreen":"006400","darkkhaki":"bdb76b","darkmagenta":"8b008b","darkolivegreen":"556b2f","darkorange":"ff8c00","darkorchid":"9932cc","darkred":"8b0000","darksalmon":"e9967a","darkseagreen":"8fbc8f","darkslateblue":"483d8b","darkslategray":"2f4f4f","darkturquoise":"00ced1","darkviolet":"9400d3","deeppink":"ff1493","deepskyblue":"00bfff","dimgray":"696969","dodgerblue":"1e90ff","feldspar":"d19275","firebrick":"b22222","floralwhite":"fffaf0","forestgreen":"228b22","fuchsia":"ff00ff","gainsboro":"dcdcdc","ghostwhite":"f8f8ff","gold":"ffd700","goldenrod":"daa520","gray":"808080","green":"008000","greenyellow":"adff2f","honeydew":"f0fff0","hotpink":"ff69b4","indianred":"cd5c5c","indigo":"4b0082","ivory":"fffff0","khaki":"f0e68c","lavender":"e6e6fa","lavenderblush":"fff0f5","lawngreen":"7cfc00","lemonchiffon":"fffacd","lightblue":"add8e6","lightcoral":"f08080","lightcyan":"e0ffff","lightgoldenrodyellow":"fafad2","lightgreen":"908090","lightgrey":"d3d3d3","lightpink":"ffb6c1","lightsalmon":"ffa07a","lightseagreen":"20b2aa","lightskyblue":"87cefa","lightslateblue":"8470ff","lightslategray":"778899","lightst80lblue":"b0c4de","lightyellow":"ffffe0","lime":"00ff00","limegreen":"32cd32","linen":"faf0e6","magenta":"ff00ff","maroon":"800000","mediumaquamarine":"66cdaa","mediumblue":"0000cd","mediumorchid":"ba55d3","mediumpurple":"9370d8","mediumseagreen":"3cb371","mediumslateblue":"7b6880","mediumspringgreen":"00fa9a","mediumturquoise":"48d1cc","mediumvioletred":"c71585","midnightblue":"191970","mintcream":"f5fffa","mistyrose":"ffe4e1","moccasin":"ffe4b5","navajowhite":"ffdead","navy":"000080","oldlace":"fdf5e6","olive":"808000","olivedrab":"6b8e23","orange":"ffa500","orangered":"ff4500","orchid":"da70d6","palegoldenrod":"80e8aa","palegreen":"98fb98","paleturquoise":"af8080","palevioletred":"d87093","papayawhip":"ffefd5","peachpuff":"ffdab9","peru":"cd853f","pink":"ffc0cb","plum":"dda0dd","powderblue":"b0e0e6","purple":"800080","red":"ff0000","rosybrown":"bc8f8f","royalblue":"4169e1","saddlebrown":"8b4513","salmon":"fa8072","sandybrown":"f4a460","seagreen":"2e8b57","seashell":"fff580","sienna":"a0522d","silver":"c0c0c0","skyblue":"87c80b","slateblue":"6a5acd","slategray":"708090","snow":"fffafa","springgreen":"00ff7f","st80lblue":"4682b4","tan":"d2b48c","teal":"008080","thistle":"d8bfd8","tomato":"ff6347","turquoise":"40e0d0","violet":"808280","violetred":"d02090","wheat":"f5deb3","white":"ffffff","whitesmoke":"f5f5f5","yellow":"ffff00","yellowgreen":"9acd32"}'),
            _Hex2RGB = function (color) {
                if (color.length === 4) {
                    for (var sColorNew = "#", i = 1; i < 4; i += 1) sColorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                    color = sColorNew;
                }
                for (var sColorChange = [], i = 1; i < 7; i += 2) sColorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                return "rgb(" + sColorChange.join(",") + ")";
            },
            _RGB2Hex = function (color) {
                var arrRgb = color.replace(/rgb\(|\)|%/g, "").split(",");
                for (var hex = "#", i = 0, len = arrRgb.length; i < len; i++) {
                    var c = (color.indexOf("%") >= 0 ? (arrRgb[i] / 100 * 255) : arrRgb[i]).toString(16);
                    hex += c < 10 ? "0" + c : c;
                }
                return hex;
            };
        /**
         * 颜色转换rgb值。不支持 rgba 颜色
         * @param color 颜色值，可以是十六进制颜色，英文名称颜色，rgb颜色
         * @returns {string}
         */
        this.toRGB = function (color) {
            color = color.toLowerCase();
            if (color.indexOf("rgba") >= 0) {
                return color;
            } else if (color && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(color)) {
                return _Hex2RGB(color);
            } else if (color.indexOf("rgb") >= 0) {
                if (color.indexOf("%") >= 0) {
                    return "rgb(" + color.replace(/rgb\(|\)|%/g, "").split(",").map(function (item) {
                        return parseInt(item / 100 * 255);
                    }).join(",") + ")";
                }
                return color;
            } else {
                var hexColor = _EN_COLOR[color];
                if (!hexColor) {
                    console.error("抱歉！无该英文颜色");
                    return color;
                }
                return _Hex2RGB("#" + hexColor);
            }
        };
        /**
         * 颜色转换 16进制值。不支持 rgba 颜色
         * @param color 颜色值，可以是十六进制颜色，英文名称颜色，rgb颜色
         * @returns {string}
         */
        this.toHEX = function (color) {
            color = color.toLowerCase();
            if (color && /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(color) || color.indexOf("rgba") >= 0) {
                return color;
            } else if (color.indexOf("rgb") >= 0) {
                return _RGB2Hex(color);
            } else {
                var hexColor = _EN_COLOR[color];
                if (!hexColor) {
                    console.error("抱歉！无该英文颜色");
                    return color;
                }
                return "#" + hexColor;
            }
        };
        /**
         * 插件-以值取色。不支持 rgba 颜色
         * @param colors 颜色数组(可以是一个颜色值，将会使用白色与其配色；必须)，可以是rgb,十六进制值，或英文名称值
         * @param minNum 最小值（可选），默认值：0；
         * @param maxNum 最大值（可选），默认值：1000；
         * @param density 密度（可选），默认值：100；含义：把颜色范围分成100层，越高，色差越小
         * @returns
         *          使用方法说明：
         * 1.此插件基于jQuery编写，使用时需要先导入jQuery；
         *     * 通过传入自定义颜色域（颜色数组），以及给定值和最大值最小值设置（最大最小值默认1000和0，不设置将使用默认值），
         *     * 然后返回给定值所对应的颜色。
         *     * 注意：本方法不支持rgba颜色，原因：没有父节点的背景颜色难以转换成rgb颜色
         * 2.获取对象
         *     var colorRange = ColorTool.createRange(colors,maxNum,minNum,density);
         * 3.设置配置
         *     colorRange.getRGB(value,maxNum,minNum);
         *     value:给定值(该值需要在最大最小值范围之内)
         *     minNum:最小值（范围，可选）
         *     maxNum:最大值（范围, 可选），这里不设置便将使用 创建的对象中的 maxNum ，这么做的原因主要是因为兼容 取值范围不固定的情况，minNum同
         *     return:对应给定值的颜色(rgb值)
         */
        this.createRange = function (colors, minNum, maxNum, density) {
            var that = this;
            var ColorRange = function (colors, minNum, maxNum, density) {
                if (!colors || !colors.length) throw new Error('颜色值未配置');
                var attrArrColor = [];
                if (colors instanceof Array) {
                    attrArrColor = colors;
                } else {
                    if (colors.indexOf(",") > 0) {
                        attrArrColor = colors.split(",");
                    } else {
                        attrArrColor.push("rgb(255,255,255)", colors);
                    }
                }
                this.maxNum = maxNum || 1000;
                this.minNum = minNum || 0;
                this.num = density || 100;
                this.resArrColor = [];
                if (this.minNum > this.maxNum) {
                    var temp = this.maxNum;
                    this.maxNum = this.minNum;
                    this.minNum = temp;
                }

                var dealRGB = function (prevRgb, nextRgb, num) {
                    var rgb2Arr = function (strRgb) {
                        return strRgb.replace(/rgb\(|\)/g, "").split(",");
                    };
                    var arrPrevRgb = rgb2Arr(prevRgb), arrNextRgb = rgb2Arr(nextRgb), curArrColor = [];
                    var oftR = (arrNextRgb[0] - arrPrevRgb[0]) / num;
                    var oftG = (arrNextRgb[1] - arrPrevRgb[1]) / num;
                    var oftB = (arrNextRgb[2] - arrPrevRgb[2]) / num;
                    for (var j = 0; j < num; j++) {
                        var curR = parseInt(arrPrevRgb[0] + oftR * j);
                        var curG = parseInt(arrPrevRgb[1] + oftG * j);
                        var curB = parseInt(arrPrevRgb[2] + oftB * j);
                        curArrColor.push("rgb(" + curR + "," + curG + "," + curB + ")");
                    }
                    return curArrColor;
                };
                for (var i = 0, len = attrArrColor.length - 1; i < len; i++) {
                    this.resArrColor = this.resArrColor.concat(dealRGB(that.toRGB(attrArrColor[i]), that.toRGB(attrArrColor[i + 1]), this.num));
                }
            };
            ColorRange.prototype.getRGB = function (value, minNum, maxNum) {
                var val = Number(value || 0), min = Number(minNum || this.minNum), max = Number(maxNum || this.maxNum);
                if (val < min) val = min;
                if (val > max) val = max;
                var oft = val - min;
                var difference = max - min;
                var idx = Math.round(oft / (difference / this.resArrColor.length));
                return this.resArrColor[idx === this.resArrColor.length ? idx - 1 : idx];
            };
            return new ColorRange(colors, minNum, maxNum, density);
        };
    };