在JSColor中，如何获取颜色的十六进制？

Question

使用JSColor，在用户选择颜色之后，如何获得“十六进制”？

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

但不是十六进制。

Answer 1

我假设jQuery.css返回设置的值。 尝试以下功能将RGB转换为十六进制：

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

实际上，在某种程度上取决于它以rgb或hex返回的浏览器，无论如何查看该线程，都有关于它的精彩讨论，也有许多解决方案。

背景色十六进制到JavaScript变量

和

如何获取十六进制颜色值而不是RGB值？

和

我可以强制jQuery.css（“ backgroundColor”）以十六进制格式返回吗？

和

jQuery的CSS颜色值返回RGB？

Answer 3

有可用的onchange事件：

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