В JSColor, как я могу получить гекс цвета?

Question

Используя JSColor, после того, как пользователь выбирает цвет, как я могу получить "hex"?

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

Но не гекс.

Answer 1

Я предполагаю, что 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)')

Answer 2

На самом деле, в какой-то степени это зависит от того, какой браузер возвращает в rgb или в шестнадцатеричном формате. В любом случае, проверьте эти темы, есть хорошие дискуссии по этому поводу и есть много решений.

Переменный цвет фона в JavaScript для переменной

и

Как получить шестнадцатеричное значение цвета вместо значения RGB?

и

Могу ли я принудительно вернуть jQuery.css ("backgroundColor") в шестнадцатеричном формате?

и

Значение цвета jquery css возвращает RGB?

Answer 3

Доступно событие onchange:

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