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

Question

Используя следующий jQuery, вы получите значение RGB цвета фона элемента:

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

Есть ли способ получить шестнадцатеричное значение, а не RGB?

Answer 1

Тот же ответ как @Jim F ответ , но ES6 синтаксис, так что меньше инструкций:

const rgb2hex = (rgb) => {
  if (rgb.search("rgb") === -1) return rgb;
  rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
  const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2);
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};

Answer 2

Функция, которая возвращает цвет фона элемента в шестнадцатеричном формате.

function getBgColorHex(elem){
    var color = elem.css('background-color')
    var hex;
    if(color.indexOf('#')>-1){
        //for IE
        hex = color;
    } else {
        var rgb = color.match(/\d+/g);
        hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
    }
    return hex;
}

пример использования:

$('#div1').click(function(){
   alert(getBgColorHex($(this));
}

jsfiddle

Answer 3

Поскольку вопрос касался использования JQuery, вот плагин JQuery, основанный на коде Даниэля Эллиота:

$.fn.cssAsHex = function(colorProp) {

    var hexDigits = '0123456789abcdef';

    function hex(x) {
        return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    };

    // Convert RGB color to Hex format
    function rgb2hex(rgb) {
        var rgbRegex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
    };

    return rgb2hex(this.css(colorProp));
};

Используйте это как:

var hexBackgroundColor = $('#myElement').cssAsHex('background-color');

Answer 4

Вот решение, которое я нашел, которое не выдает ошибки скриптинга в IE: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

Answer 5

Моё красивое нестандартное решение

HTML

<div id="selector" style="background-color:#f5b405"></div>

JQuery

$("#selector").attr("style").replace("background-color:", "");

Результат

#f5b405

Answer 6

Вот мое решение, также touppercase использует аргумент и проверяет другие возможные пробелы и заглавные буквы в предоставленной строке.

var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";

var rgbToHex = (function () {
    var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;

    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }

        return num;
    }

    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;

        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));

            if (uppercase === true) {
                hex = hex.toUpperCase();
            }

            return hex;
        }

        return;
    };
}());

console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));

Вкл. jsfiddle

Сравнение скорости на jsperf

Дальнейшее улучшение может быть trim() строка rgb

var rxArray = rgb.trim().match(rx),

Answer 7

Ответ Стивена Прибилинского отбрасывает первые нули, например # ff0000 становится # ff00.

Решение состоит в добавлении начального 0 и подстроки из последних 2 цифр.

var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);