RGB в Hex и Hex в RGB

Question

RGB в Hex и Hex в RGB

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

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

816

javascript colors hex rgb

Источник

user632950 11 апр '11 в 15:42

65 ответов

Решение

Альтернативная версия 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;
}

Редактировать: 28.03.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 Новый подход выше после дополнительного тестирования не быстрее:(. Хотя это забавный альтернативный способ.

193

Источник

user1047797 16 июл '12 в 16:06

ECMAScript 6 версия ответа Тима Дауна

Преобразование 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'

Преобразование гекса в 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 в гексагон с использованием `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 для компиляции своего кода.

148

Источник

user3853934 22 авг '16 в 10:54

Вот моя версия:

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

68

Источник

user10474 04 ноя '13 в 10:04

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

38

Источник

user283727 31 дек '12 в 12:12

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

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

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

var decColor = (red << 16) + (green << 8) + blue;

30

Источник

user381345 11 апр '11 в 15:48

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

Поддерживает как короткие #fff и долго #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)

27

Источник

user1221082 27 мар '16 в 22:34

Попробуйте ( бонус)

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;

// TEST
console.log('#0080C0          -->', hex2rgb('#0080C0'));
console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));

27

Источник

user860099 22 фев '20 в 01:39

Этот код принимает варианты #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(',')+')';
}

23

Источник

user506724 09 сен '12 в 19:33

Bitwise solution normally is weird. But in this case I guess that is more elegant

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

Usage:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255

16

Источник

user4467741 26 апр '19 в 02:34

Удивлен, что этот ответ не появился.

Не использует библиотеки #use-the-platform ✔️
3 строки, и поддерживает любые цветные браузеры.

16

Источник

user7428434 02 дек '22 в 22:27

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

15

Источник

user1002179 24 фев '17 в 01:42

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

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

Refs:
https://github.com/k-gun/so/blob/master/so_util.js#L10
https://github.com/k-gun/so/blob/master/so_util.js#L62
https://github.com/k-gun/so/blob/master/so_util.js#L81

14

Источник

user362780 09 янв '13 в 15:17

Hex в RGB

      const hex2rgb = (hex, alpha) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
};

RGB в шестнадцатеричный

      const rgb2hex = (r, g, b) => {
    var rgb = b | (g << 8) | (r << 16);
    return '#' + (0x1000000 + rgb).toString(16).slice(1)
}

Также, если кому-то нужен онлайн-инструмент Hex to RGB и наоборот

12

Источник

user9823312 27 сен '21 в 23:38

// Игнорируя запись 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));

7

Источник

user80860 11 апр '11 в 16:41

Можете ли вы после чего-то вроде этого?

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

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

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

7

Источник

user69442 11 апр '11 в 15:52

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

Как написано, я обнаружил, что функция 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

Источник

user1606865 18 дек '12 в 23:53

Версия 2021 года

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

Я недавно создавал Color Picker, и эти 2 пакета мне пригодились.

Применение

RGB-шестнадцатеричный

      import rgbHex from 'rgb-hex';

rgbHex(65, 131, 196);
//=> '4183c4'

rgbHex('rgb(40, 42, 54)');
//=> '282a36'

rgbHex(65, 131, 196, 0.2);
//=> '4183c433'

rgbHex(40, 42, 54, '75%');
//=> '282a36bf'

rgbHex('rgba(40, 42, 54, 75%)');
//=> '282a36bf'

шестнадцатеричный-rgb

      import hexRgb from 'hex-rgb';

hexRgb('4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}

hexRgb('#fff');
//=> {red: 255, green: 255, blue: 255, alpha: 1}

hexRgb('#22222299');
//=> {red: 34, green: 34, blue: 34, alpha: 0.6}

hexRgb('#0006');
//=> {red: 0, green: 0, blue: 0, alpha: 0.4}

hexRgb('#cd2222cc');
//=> {red: 205, green: 34, blue: 34, alpha: 0.8}

hexRgb('#cd2222cc', {format: 'array'});
//=> [205, 34, 34, 0.8]

hexRgb('#cd2222cc', {format: 'css'});
//=> 'rgb(205 34 34 / 80%)'

hexRgb('#000', {format: 'css'});
//=> 'rgb(0 0 0)'

hexRgb('#22222299', {alpha: 1});
//=> {red: 34, green: 34, blue: 34, alpha: 1}

hexRgb('#fff', {alpha: 0.5});
//=> {red: 255, green: 255, blue: 255, alpha: 0.5}

5

Источник

user6141587 17 май '21 в 13:09

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

    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

Источник

user1290529 05 дек '12 в 00:23

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

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

3

Источник

user1056159 17 апр '15 в 15:21

2022: Если вы часто манипулируете цветами и не возражаете против использования пакета,

Используйте крошечный цвет2. Это быстрая библиотека (около 400 КБ) для управления цветом и преобразования в JavaScript.

Он принимает различные форматы цветных строк. Нравиться:

      tinycolor("#000"); // Hex3
tinycolor("#f0f0f6"); // Hex6
tinycolor("#f0f0f688"); // Hex8
tinycolor("f0f0f6"); // Hex withouth the number sign '#'
tinycolor("rgb (255, 0, 0)"); // RGB
tinycolor("rgba (255, 0, 0, .5)"); // RGBA
tinycolor({ r: 255, g: 0, b: 0 }); // RGB object
tinycolor("hsl(0, 100%, 50%)"); // HSL
tinycolor("hsla(0, 100%, 50%, .5)"); // HSLA
tinycolor("red"); // Named

RGB в HEX

      var color = tinycolor('rgb(0, 128, 192)');
color.toHexString(); //#0080C0

HEX в RGB

      var color = tinycolor('#0080C0');
color.toRgbString(); // rgb(0, 128, 192)

Посетите документацию для получения дополнительной демонстрации.

3

Источник

user11138585 01 июл '22 в 02:27

Для 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

Источник

user56138 02 ноя '11 в 11:41

Моя версия hex2rbg:

Принять короткий гекс, как #fff
Алгоритм совместимости o(n), должен быстрее, чем с помощью регулярных выражений. например String.replace, String.split, String.match так далее..
Используйте постоянное пространство.
Поддержка 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

Источник

user3558652 16 мар '16 в 22:37

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}

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

2

Источник

user3767878 04 сен '14 в 13:35

function hexToRgb(str) { 
    if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { 
        var hex = str.substr(1);
        hex = hex.length == 3 ? hex.replace(/(.)/g, '$1$1') : hex;
        var rgb = parseInt(hex, 16);               
        return 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].join(',') + ')';
    } 

    return false; 
}

function rgbToHex(red, green, blue) {
    var out = '#';

    for (var i = 0; i < 3; ++i) {
        var n = typeof arguments[i] == 'number' ? arguments[i] : parseInt(arguments[i]);

        if (isNaN(n) || n < 0 || n > 255) {
            return false;
        }

        out += (n < 16 ? '0' : '') + n.toString(16);
    }

    return out

2

Источник

user2240578 24 апр '13 в 10:54

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

редактировать

Оказывается, я не могу понять, как сделать его правильным плагином 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;
};

2

Источник

user1541563 22 июн '13 в 20:26

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

2

Источник

user1129950 04 апр '17 в 11:22

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

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

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

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

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

Вызовите свойство style снова

> toRgb.style.color;

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

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

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

2

Источник

user5959263 25 ноя '16 в 06:07

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

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

Источник

user103696 24 июл '13 в 18:38

Простой ответ для rgb на шестнадцатеричный

    function rgbtohex(r,g,b){
        return "#" + (Math.round(r) * 65536 + Math.round(g) * 256 + Math.round(b)).toString(16));
    }

2

Источник

user13265356 01 май '20 в 18:34

Другие вопросы по тегам javascript colors hex rgb

user96100 11 апр '11 в 16:04 2011-04-11 16:04 · Accepted Answer · 2011-04-11 16:04

Следующее будет делать для преобразования 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";

RGB в Hex и Hex в RGB

65 ответов

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

ECMAScript 6 версия ответа Тима Дауна

Преобразование RGB в гекс

Преобразование гекса в RGB

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

Версия 2021 года

Применение

RGB-шестнадцатеричный

шестнадцатеричный-rgb

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

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

2022: Если вы часто манипулируете цветами и не возражаете против использования пакета,

RGB в HEX

HEX в RGB

Бонус: RGB в гексагон с использованием `padStart()` метод