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

【问题标题】：In JSColor, how do I get the hex of the color?在 JSColor 中，如何获取颜色的十六进制？
【发布时间】：2012-02-10 17:01:08
【问题描述】：

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

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

但不是十六进制。

【问题讨论】：

JSColor 不是将颜色 HEX 值作为值放入对应的输入吗？我的意思是$("input#colorpicker").val()。
@dfsq 不，它没有。 val() 什么都不返回。
请分享你的输出方式。我正在运行颜色选择器，但无法输出值

标签： javascript jquery css jscolor

【解决方案1】：

实际上，这在一定程度上取决于它以 rgb 或 hex 返回的浏览器，无论如何，请查看这个线程，那里有很好的讨论，也有很多解决方案。

Background-color hex to JavaScript variable

和

How to get hex color value rather than RGB value?

和

Can I force jQuery.css("backgroundColor") returns on hexadecimal format?

和

jquery css color value returns RGB?

【讨论】：

【解决方案2】：

有可用的 onchange 事件：

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

【讨论】：

【解决方案3】：

我假设 jQuery.css 返回设置的值。尝试以下函数将 RGB 转换为 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)')

【讨论】：