RGB - Hex и Hex - RGB

Как преобразовать цвета в формате RGB в формат Hex и наоборот?

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

440
11 апр. '11 в 18:42
источник поделиться
44 ответов
  • 1
  • 2

Следующее будет делать для преобразования RGB в шестнадцатеричное и добавлять любое необходимое заполнение нулями:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

Преобразование другим способом:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";

Наконец, альтернативная версия rgbToHex(), как обсуждалось в ответе @casablanca и предложена в комментариях @cwolves:

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

Обновление 3 декабря 2012

Вот версия hexToRgb() которая также анализирует сокращенный шестнадцатеричный триплет, такой как "# 03F":

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";
1051
11 апр. '11 в 19:04
источник

Альтернативная версия hexToRgb:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

Редактировать: 3/28/2017 Вот еще один подход это кажется еще более быстрым

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

Редактировать: 8/11/2017 Новый подход выше после большего тестирования не быстрее :( Хотя это забавный альтернативный способ.

129
16 июля '12 в 19:06
источник

Здесь моя версия:

  function rgb2hex(red, green, blue) {
        var rgb = blue | (green << 8) | (red << 16);
        return '#' + (0x1000000 + rgb).toString(16).slice(1)
  }

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }
42
04 нояб. '13 в 13:04
источник

Версия ECMAScript 6 ответа Tim Down

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

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
  const hex = x.toString(16)
  return hex.length === 1 ? '0' + hex : hex
}).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

Преобразование hex в RGB

Возвращает массив [r, g, b]. Работает также с короткими шестнадцатеричными триплетами, такими как "#03F".

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

console.log(hexToRgb("#0033ff")) // [0, 51, 255]
console.log(hexToRgb("#03f")) // [0, 51, 255]

Бонус: RGB для hex с использованием padStart()

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

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

35
22 авг. '16 в 13:54
источник

Я предполагаю, что вы имеете в виду шестнадцатеричную нотацию в стиле HTML, т.е. #rrggbb. Ваш код почти правильный, за исключением того, что вы изменили порядок. Это должно быть:

var decColor = red * 65536 + green * 256 + blue;

Кроме того, использование бит-сдвигов может сделать его более легким для чтения:

var decColor = (red << 16) + (green << 8) + blue;
24
11 апр. '11 в 18:48
источник

Этот код принимает варианты #fff и #ffffff и непрозрачность.

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}
21
09 сент. '12 в 22:33
источник
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
17
31 дек. '13 в 15:12
источник

Это может быть использовано для получения цветов из вычисленных свойств стиля:

function rgbToHex(color) {
    color = ""+ color;
    if (!color || color.indexOf("rgb") < 0) {
        return;
    }

    if (color.charAt(0) == "#") {
        return color;
    }

    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
        r = parseInt(nums[2], 10).toString(16),
        g = parseInt(nums[3], 10).toString(16),
        b = parseInt(nums[4], 10).toString(16);

    return "#"+ (
        (r.length == 1 ? "0"+ r : r) +
        (g.length == 1 ? "0"+ g : g) +
        (b.length == 1 ? "0"+ b : b)
    );
}

// not computed 
<div style="color: #4d93bc; border: 1px solid red;">...</div> 
// computed 
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>

console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000

Ссылка: https://github.com/k-gun/so/blob/master/so_util.js

10
09 янв. '13 в 18:17
источник

Однострочный функциональный HEX для RGBA

Поддерживает короткие формы #fff и long #ffffff.
Поддерживает альфа-канал (непрозрачность).
Не имеет значения, если хэш указан или нет, работает в обоих случаях.

function hexToRGBA(hex, opacity) {
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}

примеры:

hexToRGBA('#fff')        ->  rgba(255,255,255,1)  
hexToRGBA('#ffffff')     ->  rgba(255,255,255,1)  
hexToRGBA('#fff', .2)    ->  rgba(255,255,255,0.2)  
hexToRGBA('#ffffff', .2) ->  rgba(255,255,255,0.2)  
hexToRGBA('fff', .2)     ->  rgba(255,255,255,0.2)  
hexToRGBA('ffffff', .2)  ->  rgba(255,255,255,0.2)  
9
28 марта '16 в 1:34
источник

@Тим, чтобы добавить к вашему ответу (его немного неудобно вписывается в комментарий).

Как написано, я обнаружил, что функция rgbToHex возвращает строку с элементами после точки и требует, чтобы значения r, g, b находились в диапазоне 0-255.

Я уверен, что это может показаться очевидным для большинства, но мне потребовалось два часа, чтобы разобраться, и к тому моменту первоначальный метод раздувался до 7 строк, прежде чем я понял, что моя проблема была в другом месте. Таким образом, в интересах экономии других времени и хлопот, здесь мой измененный код, который проверяет предварительные условия и обрезает посторонние биты строки.

function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}
6
19 дек. '12 в 2:53
источник

//Игнорируя нотацию hsl, значения цвета обычно выражаются как имена, rgb, rgba или hex -

//Hex может быть 3 значениями или 6.

//Rgb может быть как процентами, так и целыми значениями.

//Лучше всего учитывать все эти форматы, по крайней мере.

String.prototype.padZero= function(len, c){
    var s= this, c= c || "0", len= len || 2;
    while(s.length < len) s= c + s;
    return s;
}
var colors={
    colornames:{
        aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
        gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
        navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
        silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
    },
    toRgb: function(c){
        c= '0x'+colors.toHex(c).substring(1);
        c= [(c>> 16)&255, (c>> 8)&255, c&255];
        return 'rgb('+c.join(',')+')';
    },
    toHex: function(c){
        var tem, i= 0, c= c? c.toString().toLowerCase(): '';
        if(/^#[a-f0-9]{3,6}$/.test(c)){
            if(c.length< 7){
                var A= c.split('');
                c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
            }
            return c;
        }
        if(/^[a-z]+$/.test(c)){
            return colors.colornames[c] || '';
        }
        c= c.match(/\d+(\.\d+)?%?/g) || [];
        if(c.length<3) return '';
        c= c.slice(0, 3);
        while(i< 3){
            tem= c[i];
            if(tem.indexOf('%')!= -1){
                tem= Math.round(parseFloat(tem)*2.55);
            }
            else tem= parseInt(tem);
            if(tem< 0 || tem> 255) c.length= 0;
            else c[i++]= tem.toString(16).padZero(2);
        }
        if(c.length== 3) return '#'+c.join('').toLowerCase();
        return '';
    }
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));
6
11 апр. '11 в 19:41
источник

(2017) Функции SIMPLE ES6 со стрелками

Я не могу удержаться от совместного использования этого для тех, кто может писать некоторые современные функциональные/композиционные js, используя ES6. Вот несколько гладких однострочных я использую в цветовом модуле, который выполняет интерполяцию цвета для визуализации данных.

Обратите внимание, что это вообще не обрабатывает альфа-канал.

const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
  .map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
4
24 февр. '17 в 4:42
источник

Если вам нужно сравнить два значения цвета (заданные как rgb, цвет имени или шестнадцатеричное значение) или преобразовать в HEX, используйте объект canvas HTML5.

    var canvas = document.createElement("canvas");
    var ctx = this.canvas.getContext('2d');

    ctx.fillStyle = "rgb(pass,some,value)";
    var temp =  ctx.fillStyle;
    ctx.fillStyle = "someColor";

    alert(ctx.fillStyle == temp);
4
05 дек. '12 в 3:23
источник

Можете ли вы быть чем-то вроде этого?

function RGB2HTML(red, green, blue)
{
    return '#' + red.toString(16) +
           green.toString(16) +
           blue.toString(16);
}

alert(RGB2HTML(150, 135, 200));

отображает # 9687c8

3
11 апр. '11 в 18:52
источник

Моя версия hex2rbg:

  1. Принять короткий гекс, как #fff
  2. Сложность алгоритма - o (n), должна быть быстрее, чем использование регулярного выражения. например String.replace, String.split, String.match т.д.
  3. Используйте постоянное пространство.
  4. Поддержка rgb и rgba.

вам может потребоваться удалить hex.trim(), если вы используете IE8.

например

hex2rgb('#fff') //rgb(255,255,255) 
hex2rgb('#fff', 1) //rgba(255,255,255,1) 
hex2rgb('#ffffff') //rgb(255,255,255)  
hex2rgb('#ffffff', 1) //rgba(255,255,255,1)

код:

function hex2rgb (hex, opacity) {
    hex = hex.trim();
    hex = hex[0] === '#' ? hex.substr(1) : hex;
    var bigint = parseInt(hex, 16), h = [];
    if (hex.length === 3) {
        h.push((bigint >> 4) & 255);
        h.push((bigint >> 2) & 255);
    } else {
        h.push((bigint >> 16) & 255);
        h.push((bigint >> 8) & 255);
    }
    h.push(bigint & 255);
    if (arguments.length === 2) {
        h.push(opacity);
        return 'rgba('+h.join()+')';
    } else {
        return 'rgb('+h.join()+')';
    }
}
3
17 марта '16 в 1:37
источник

Для 3-х цифр функция hexToRgb Tim Down может быть улучшена, как показано ниже:

var hex2Rgb = function(hex){
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
  return result ? {        
    r: parseInt(hex.length <= 4 ? result[4]+result[4] : result[1], 16),
    g: parseInt(hex.length <= 4 ? result[5]+result[5] : result[2], 16),
    b: parseInt(hex.length <= 4 ? result[6]+result[6] : result[3], 16),
    toString: function() {
      var arr = [];
      arr.push(this.r);
      arr.push(this.g);
      arr.push(this.b);
      return "rgb(" + arr.join(",") + ")";
    }
  } : null;
};
3
02 нояб. '11 в 14:41
источник

Мне нужна функция, которая принимает недопустимые значения, также как

rgb (-255, 255, 255) rgb (510, 255, 255)

это отключение ответа @cwolves

function rgb(r, g, b) {
  this.c = this.c || function (n) {
    return Math.max(Math.min(n, 255), 0)
  };

  return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}
2
24 июля '13 в 21:38
источник

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

  • Создать произвольный элемент

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

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

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

  1. Вызовите свойство стиля снова

> toRgb.style.color;

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

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

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

2
25 нояб. '16 в 9:07
источник

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

1
04 апр. '17 в 14:22
источник

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

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"));
1
17 апр. '15 в 18:21
источник

Самый рейтинговый ответ Tim Down - лучшее решение для преобразования в RGB. Мне нравится это решение для Hex-конверсии, хотя оно обеспечивает самую красную проверку границ и нулевое дополнение для преобразования в Hex.

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);
};

Использование левого сдвига '< < и /'|' операторы также делают это интересным решением.

1
17 июля '15 в 0:33
источник

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

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

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

Генератор RGB принимает один аргумент, цвет и предоставляет три варианта: 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
1
03 июня '15 в 12:07
источник
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");

function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

Используйте эту функцию для достижения результата без каких-либо проблем.:)

1
04 сент. '14 в 16:35
источник
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;
1
05 марта '15 в 22:05
источник

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

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

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(",")+")";
}
1
23 июня '16 в 14:23
источник

Совсем другой подход к преобразованию шестнадцатеричного цветового кода в 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'));
1
10 апр. '18 в 15:02
источник

Я работаю с данными XAML, которые имеют шестнадцатеричный формат #AARRGGBB (Alpha, Red, Green, Blue). Используя ответы выше, здесь мое решение:

function hexToRgba(hex) {
    var bigint, r, g, b, a;
    //Remove # character
    var re = /^#?/;
    var aRgb = hex.replace(re, '');
    bigint = parseInt(aRgb, 16);

    //If in #FFF format
    if (aRgb.length == 3) {
        r = (bigint >> 4) & 255;
        g = (bigint >> 2) & 255;
        b = bigint & 255;
        return "rgba(" + r + "," + g + "," + b + ",1)";
    }

    //If in #RRGGBB format
    if (aRgb.length >= 6) {
        r = (bigint >> 16) & 255;
        g = (bigint >> 8) & 255;
        b = bigint & 255;
        var rgb = r + "," + g + "," + b;

        //If in #AARRBBGG format
        if (aRgb.length == 8) {
            a = ((bigint >> 24) & 255) / 255;
            return "rgba(" + rgb + "," + a.toFixed(1) + ")";
        }
    }
    return "rgba(" + rgb + ",1)";
}

http://jsfiddle.net/kvLyscs3/

1
27 окт. '14 в 21:59
источник

Я столкнулся с этой проблемой, так как хотел принять любое значение цвета и уметь добавлять непрозрачность, поэтому я создал этот быстрый плагин jQuery, который использует собственный холст для современных браузеров. Кажется, просто отлично.

Edit

Оказывается, я не могу понять, как сделать его подходящим плагином jQuery, поэтому я просто представлю его как обычную функцию.

//accepts any value like '#ffffff', 'rgba(255,255,255,1)', 'hsl(0,100%,100%)', or 'white'
function toRGBA( c ) {
    var
        can  = document.createElement( 'canvas' ),
        ctx  = can.getContext( '2d' );
    can.width = can.height = 1;
    ctx.fillStyle = c;
    console.log( ctx.fillStyle ); //always css 6 digit hex color string, e.g. '#ffffff'
    ctx.fillRect( 0, 0, 1, 1 ); //paint the canvas
    var
        img  = ctx.getImageData( 0, 0, 1, 1 ),
        data = img.data,
        rgba = {
            r: data[ 0 ], //0-255 red
            g: data[ 1 ], //0-255 green
            b: data[ 2 ], //0-255 blue
            a: data[ 3 ]  //0-255 opacity (0 being transparent, 255 being opaque)
        };
    return rgba;
};
1
22 июня '13 в 23:26
источник

Для преобразования непосредственно из 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'))
1
04 нояб. '14 в 18:03
источник

Мой пример =)

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;
            }
1
27 окт. '14 в 10:52
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос