RGB в Hex и Hex в RGB

Question

Как преобразовать цвета в формате RGB в шестнадцатеричный формат и наоборот?

Например, преобразовать '#0080C0' в (0, 128, 192).

Answer 1

Хотя этот ответ вряд ли идеально подходит к вопросу, тем не менее он может быть очень полезен.

1. Создать любой случайный элемент

var toRgb = document.createElement('div');

Установите любой допустимый стиль для цвета, который вы хотите преобразовать

toRg.style.color = "hsl(120, 60%, 70%)";

Снова вызовите свойство стиля

> toRgb.style.color;

< "rgb(133, 225, 133)" Ваш цвет был преобразован в Rgb

Работает для: Hsl, Hex

Не работает для: именованных цветов

Answer 2

Сокращенная версия, которая принимает строку:

function rgbToHex(a){
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write(rgbToHex("rgb(255,255,255)"));

Чтобы проверить, не является ли он уже шестнадцатеричным

function rgbToHex(a){
  if(~a.indexOf("#"))return a;
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- hex: "+rgbToHex("#e2e2e2"));

Answer 3

Учитывая, что многие ответы лишь частично отвечают на вопрос (от RGB до HEX или наоборот), я решил опубликовать свой частичный ответ.

У меня была похожая проблема, и я хотел сделать что-то вроде этого: ввести любой допустимый цвет CSS (HSL (a), RGB (a), HEX или имя цвета) и 1. иметь возможность добавлять или удалять альфа-значение , 2. вернуть объект rgb (a). Я написал плагин именно для этой цели. Его можно найти на GitHub (для этого требуется jQuery, но при желании вы можете его разветвить и сделать ванильную версию). Вот демонстрационная страница . Вы можете попробовать для себя и увидеть результат, сгенерированный на лету.

Я скопирую и вставлю параметры здесь:

RGB Generator принимает один аргумент, цвет и предоставляет три параметра: asObject, addAlpha и removeAlpha. Если три параметра не указаны, цвет RGB будет возвращен в виде строки.

$.rgbGenerator("white")
// Will return rgb(255,255,255)

Обратите внимание, что по умолчанию включены альфа-компоненты. Если входное значение содержит альфа-значение, вывод будет в формате RGBa.

$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

Вы можете отключить это поведение, установив для параметра removeAlpha значение true. Это удалит любое альфа-значение из исходного цвета HSLa или RGBa.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

Если, с другой стороны, вы хотите добавить альфа-канал, вы можете сделать это, установив для addAlpha любое значение в диапазоне от 0 до 1. Если вход имеет непрозрачный цвет, альфа-значение будет добавлено. Если он прозрачный, предоставленное значение перезапишет альфа-компонент ввода.

$.rgbGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)
$.rgbGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

Наконец, также возможно вывести цвет RGB (a) как объект. Он будет состоять из r, g, b и, необязательно, a.

$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.8
}
*/
$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255

Answer 4

function getRGB(color){
  if(color.length == 7){
    var r = parseInt(color.substr(1,2),16);
    var g = parseInt(color.substr(3,2),16);
    var b = parseInt(color.substr(5,2),16);    
    return 'rgb('+r+','+g+','+b+')' ;
  }    
  else
    console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
 a = 'Enter correct value'; 
}

a;

Answer 5

Мой пример =)

color: {
            toHex: function(num){
                var str = num.toString(16);
                return (str.length<6?'#00'+str:'#'+str);
            },
            toNum: function(hex){
                return parseInt(hex.replace('#',''), 16);
            },
            rgbToHex: function(color)
            {
                color = color.replace(/\s/g,"");
                var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
                if(aRGB)
                {
                    color = '';
                    for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
                }
                else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
                return '#'+color;
            }

Answer 6

Для конвертации напрямую из jQuery вы можете попробовать:

  function rgbToHex(color) {
    var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return     "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  }

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

Answer 7

Я нашел это, и потому что я думаю, что это довольно просто и имеет проверочные тесты и поддерживает альфа-значения (необязательно), это будет соответствовать случаю.

Просто закомментируйте строку регулярного выражения, если вы знаете, чтовы делаете, и это немного быстрее.

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}

Answer 8

Вместо копий и копирования фрагментов, найденных здесь и там, я бы рекомендовал использовать хорошо протестированную и поддерживаемую библиотеку: Colors.js (доступно для node.js и браузера)Это всего лишь 7 КБ (минимизировано, сжато еще меньше).

Answer 9

Лучший ответ от Tim Down обеспечивает лучшее решение, которое я вижу для преобразования в RGB.Мне больше нравится это решение для шестнадцатеричного преобразования, потому что оно обеспечивает самую краткую проверку границ и заполнение нулями для преобразования в шестнадцатеричное.

function RGBtoHex (red, green, blue) {
  red = Math.max(0, Math.min(~~this.red, 255));
  green = Math.max(0, Math.min(~~this.green, 255));
  blue = Math.max(0, Math.min(~~this.blue, 255));

  return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};

Использование сдвига влево «<<» и или «|»операторы тоже делают это забавным решением. </p>

Answer 10

Совершенно другой подход для преобразования шестнадцатеричного цветового кода в RGB без регулярных выражений

Он обрабатывает формат #FFF и #FFFFFF на основе длины строки. Он удаляет # из начала строки и делит каждый символ строки и преобразует его в base10 и добавляет его в соответствующий индекс на основе его позиции.

//Algorithm of hex to rgb conversion in ES5
function hex2rgbSimple(str){
  str = str.replace('#', '');
  return str.split('').reduce(function(result, char, index, array){
    var j = parseInt(index * 3/array.length);
    var number = parseInt(char, 16);
    result[j] = (array.length == 3? number :  result[j]) * 16 + number;
    return result;
  },[0,0,0]);
}

//Same code in ES6
hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]);

//hex to RGBA conversion
hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);

//hex to standard RGB conversion
hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`;


console.log(hex2rgb('#aebece'));
console.log(hex2rgbSimple('#aebece'));

console.log(hex2rgb('#aabbcc'));

console.log(hex2rgb('#abc'));

console.log(hex2rgba('#abc', 0.7));

console.log(hex2rgbStandard('#abc'));