Преобразование строк rgb в hex в Javascript

Ответ 1

Я бы сначала отрезал части CSS:

var a = "rgb(255,255,255)".split("(")[1].split(")")[0];

Затем разделите его на отдельные числа:

a = a.split(",");

Преобразование одиночных чисел в шестнадцатеричный

var b = a.map(function(x){             //For each array element
    x = parseInt(x).toString(16);      //Convert to a base16 string
    return (x.length==1) ? "0"+x : x;  //Add zero if we get only one character
})

И склейте его вместе:

b = "0x"+b.join("");

Ответ 2

Ниже приведена адаптация из класса Colour, который я написал и использовал, но может быть излишним для ваших нужд, поскольку он обрабатывает проценты и отрицательные числа.

Демо: http://jsfiddle.net/5ryxx/1/

код:

function componentFromStr(numStr, percent) {
    var num = Math.max(0, parseInt(numStr, 10));
    return percent ?
        Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}

function rgbToHex(rgb) {
    var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
    var result, r, g, b, hex = "";
    if ( (result = rgbRegex.exec(rgb)) ) {
        r = componentFromStr(result[1], result[2]);
        g = componentFromStr(result[3], result[4]);
        b = componentFromStr(result[5], result[6]);

        hex = "0x" + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    return hex;
}

Ответ 3

Это то, что я сделал.

String.prototype.toRGB = function() {

  var rgb = this.split( ',' ) ;
  this.r=parseInt( rgb[0].substring(4) ) ; // skip rgb(
  this.g=parseInt( rgb[1] ) ; // this is just g
  this.b=parseInt( rgb[2] ) ; // parseInt scraps trailing )

}

После запуска 'rgb(125,181,215)'.toRGB() вы получите значения свойств .r, .g и .b (с правильными целыми значениями) в том же строковом объекте.

Чтобы получить значение hex, просто используйте yourNumber.toString(16);

Ответ 4

function parseColor(color) {
    var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
    return {
        hex: "#" + arr.slice(0, 3).map(toHex).join(""),
        opacity: arr.length == 4 ? arr[3] : 1
    };
}
function toHex(int) {
    var hex = int.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

parseColor("rgb(210, 10, 10)");  // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)");  // {"hex":"#d2","opacity":1}

Ответ 5

Подкожный подход:

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');

Теперь запуск h("rgb(255, 60, 60)") вернет #ff3c3c.

Вы можете заменить '#' на '0x', чтобы получить выходы в форме 0xff3c3c.

EXTRA: как это работает.

h, объявленный как функция стрелки (новый в ES6), принимает значение RGB (строка) и сохраняет его в x. Затем все экземпляры чисел в x найдены с помощью уравнения регулярных выражений /\d+/g и используются далее как массив (возвращаемый match, используемый map).

map обрабатывают все элементы возвращаемого массива с помощью функции y. Функция принимает значение (которое хранилось в массиве как строка), поскольку z преобразует его в число (+z), проверяет, меньше ли оно (16), т.е. Шестнадцатеричное представление имеет одна цифра), и если true, добавляет '0' к началу элемента.

Затем он преобразует его в строку базы 16 (hex, by .toString(16)) и возвращает ее в map. Таким образом, все десятичные строки в массиве теперь меняются на шестнадцатеричные строки.

Наконец, элементы массива соединены вместе (join('')), без разделителя и '#' добавляется в начало строки.

Примечание. Если в коде указано значение больше 255, выход будет содержать более шести шестнадцатеричных цифр. Например, вывод для rgb(256, 0, 0) будет #1000000.

Чтобы ограничить значение до 255, это будет код:

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + ((+z > 255)?255:+z).toString(16)).join('');

Ответ 6

RGBToHex = function(r,g,b){
    var bin = r << 16 | g << 8 | b;
    return (function(h){
        return new Array(7-h.length).join("0")+h
    })(bin.toString(16).toUpperCase())
}

https://gist.github.com/lrvick/2080648

Отредактировано:

cnvrtRGBClrToHex('255,145,20')

function cnvrtRGBClrToHex(rgbClr){
    var rgbClr = rgbClr.split(',');
    var r = rgbClr[0];
    var g = rgbClr[1];
    var b = rgbClr[2];
    return (r << 16 | g << 8 | b).toString(16).toUpperCase()
}

Ответ 7

rgb2Hex = s => s.match(/[0-9]+/g).reduce((a, b) => a+(b|256).toString(16).slice(1), '0x')

console.log(rgb2Hex('rgb(10, 11, 12)'), rgb2Hex('rgb(255, 256, 257)'))