How to get hex color value rather than RGB value?

前端 未结 19 3147
猫巷女王i
猫巷女王i 2020-11-21 23:06

Using the following jQuery will get the RGB value of an element\'s background color:

$(\'#selector\').css(\'backgroundColor\');

Is there a

相关标签:
19条回答
  • 2020-11-21 23:37

    color class taken from bootstrap color picker

    // Color object
    var Color = function(val) {
        this.value = {
            h: 1,
            s: 1,
            b: 1,
            a: 1
        };
        this.setColor(val);
    };
    
    Color.prototype = {
        constructor: Color,
    
        //parse a string to HSB
        setColor: function(val){
            val = val.toLowerCase();
            var that = this;
            $.each( CPGlobal.stringParsers, function( i, parser ) {
                var match = parser.re.exec( val ),
                values = match && parser.parse( match ),
                space = parser.space||'rgba';
                if ( values ) {
                    if (space === 'hsla') {
                        that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
                    } else {
                        that.value = CPGlobal.RGBtoHSB.apply(null, values);
                    }
                    return false;
                }
            });
        },
    
        setHue: function(h) {
            this.value.h = 1- h;
        },
    
        setSaturation: function(s) {
            this.value.s = s;
        },
    
        setLightness: function(b) {
            this.value.b = 1- b;
        },
    
        setAlpha: function(a) {
            this.value.a = parseInt((1 - a)*100, 10)/100;
        },
    
        // HSBtoRGB from RaphaelJS
        // https://github.com/DmitryBaranovskiy/raphael/
        toRGB: function(h, s, b, a) {
            if (!h) {
                h = this.value.h;
                s = this.value.s;
                b = this.value.b;
            }
            h *= 360;
            var R, G, B, X, C;
            h = (h % 360) / 60;
            C = b * s;
            X = C * (1 - Math.abs(h % 2 - 1));
            R = G = B = b - C;
    
            h = ~~h;
            R += [C, X, 0, 0, X, C][h];
            G += [X, C, C, X, 0, 0][h];
            B += [0, 0, X, C, C, X][h];
            return {
                r: Math.round(R*255),
                g: Math.round(G*255),
                b: Math.round(B*255),
                a: a||this.value.a
            };
        },
    
        toHex: function(h, s, b, a){
            var rgb = this.toRGB(h, s, b, a);
            return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
        },
    
        toHSL: function(h, s, b, a){
            if (!h) {
                h = this.value.h;
                s = this.value.s;
                b = this.value.b;
            }
            var H = h,
            L = (2 - s) * b,
            S = s * b;
            if (L > 0 && L <= 1) {
                S /= L;
            } else {
                S /= 2 - L;
            }
            L /= 2;
            if (S > 1) {
                S = 1;
            }
            return {
                h: H,
                s: S,
                l: L,
                a: a||this.value.a
            };
        }
    };
    

    how to use

    var color = new Color("RGB(0,5,5)");
    color.toHex()
    
    0 讨论(0)
提交回复
热议问题