At OAO, how do I get a hex of color?

Question

Using JSColor, after the user selects the color, how do I get the "six"?

$("input#colorpicker").css('background-color') => this returns background-color: rgb(107, 132, 255);

But not hex.

Answer 1

I assume jQuery.css returns the value that was set. Try the following function to convert RGB to HEX:

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

colorToHex('rgb(120, 120, 240)')

Answer 2

Actually it depends on the browser that it returns in rgb or hex, anyway, check these topics, there is good discussion about this, and there are many solutions.

Background color scheme for JavaScript variable

and

How to get hex color value, not RGB value?

and

jQuery.css( "backgroundColor" ) ?

jquery css RGB?

Answer 3

Exchange event available:

$("input#colorpicker").change(function() {
    console.log(this.color);
});