ECMAScript 6版Tim Down's answer

Question

如何将RGB格式的颜色转换为十六进制格式，反之亦然？

例如，将'#0080C0'转换为(0, 128, 192)。

Answer 1

以下将对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's answer中所述，并在@cwolves的评论中提出：

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

2012年12月3日更新

这是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";

Answer 2

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 经过更多测试后，上述新方法并不快:(。虽然这是一种有趣的替代方式。

Answer 3

这是我的版本：

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

Answer 4

ECMAScript 6版Tim Down's answer

将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]

Bonus：使用`padStart()`方法

将RGB转换为十六进制

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编译代码。

Answer 5

我假设你的意思是HTML风格的十六进制表示法，即#rrggbb。您的代码几乎是正确的，除非您已将订单撤消。它应该是：

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

此外，使用位移可能会使其更容易阅读：

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

Answer 6

此代码接受#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(',')+')';
}

Answer 7

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

Answer 8

尝试（bonus）

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

Answer 9

这可用于从计算样式属性中获取颜色：

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

Answer 10

单行功能HEX到RGBA

支持短#fff和长#ffffff表格支持alpha通道（不透明度）不关心是否指定了散列，在两种情况下都有效。

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)

Answer 11

@Tim，添加到你的答案中（这有点尴尬，将其纳入评论）。

如上所述，我发现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);
}

Answer 12

//忽略hsl表示法，颜色值通常表示为名称，rgb，rgba或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));

Answer 13

如果您需要比较两个颜色值（以rgb，名称颜色或十六进制值给出）或转换为HEX，请使用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);

Answer 14

（2017）SIMPLE ES6可组合箭头功能

对于那些可能正在使用ES6编写一些现代功能/组合js的人，我无法抗拒这一点。以下是我在颜色模块中使用的一些光滑的单行程序，它为数据可视化进行颜色插值。

请注意，这根本不处理alpha通道。

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

Answer 15

对于3位数，Tim Down的hexToRgb函数可以改进如下：

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

Answer 16

我的hex2rbg版本：

接受像#fff
算法兼容性为o（n），应该比使用正则表达式更快。例如String.replace, String.split, String.match等..
使用恒定空间。
支持rgb和rgba。

如果您使用IE8，则可能需要删除hex.trim（）。

e.g。

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()+')';
    }
}

Answer 17

愿你这样做吗？

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

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

显示＃9687c8

Answer 18

我需要一个接受无效值的功能，如

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

Answer 19

虽然这个答案不太可能完全符合这个问题，但它可能会非常有用。

创建任意随机元素

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

将任何有效样式设置为您要转换的颜色

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

再次调用style属性

> toRgb.style.color;

< "rgb(133, 225, 133)"您的颜色已转换为Rgb

适用于：Hsl，Hex

不适用于：命名颜色

Answer 20

rgb十六进制的简单答案

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

Answer 21

将十六进制颜色代码转换为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'));

Answer 22

我建议使用经过良好测试和维护的库：Colors.js（可用于node.js和浏览器），而不是在这里和那里找到复制'n'pasting片段。它只有7 KB（缩小，压缩甚至更少）。

Answer 23

按位解决方案通常很奇怪。但是在这种情况下，我认为这更优雅

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

用法：

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

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

Answer 24

我发现了这一点，因为我觉得这很简单并且有验证测试并且支持alpha值（可选），这符合这种情况。

如果您知道自己正在做什么并且速度要快一点，请注释掉正则表达式行。

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 25

Tim Down评价最高的答案提供了我可以看到的转换为RGB的最佳解决方案。我更喜欢这种Hex转换的解决方案，因为它提供了最简洁的边界检查和零填充以转换为Hex。

<div id="ctl00_ContentPlaceHolder1_RadGrid1_GridHeader" class="rgHeaderDiv" style="overflow: hidden;">
<table id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_Header" class="rgMasterTable rgClipCells rgClipCells" style="border-color:#6788BE;border-width:1px;border-style:solid;width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;">
<colgroup>
<thead>
<tr>
<th class="rgHeader rgSorted" style="font-weight:bold;font-style:normal;text-decoration:none;text-align:left;" scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl05','')" title="Click here to sort" onclick="Telerik.Web.UI.Grid.Sort($find('ctl00_ContentPlaceHolder1_RadGrid1_ctl00'), 'HostIP'); return false;">IP Address / Host Name</a>
<input class="rgSortAsc" type="button" title="Sorted asc" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06','')" value=" " name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06">
</th>
</tr>
</thead>
<tbody style="display:none;">
</table>
</div>

使用左移＆＃39;＆lt;＆lt;＆＃和/或＆＃39; |＆＃39;运营商也将此作为一个有趣的解决方案。

Answer 26

考虑到很多答案只能部分回答问题（从RGB到HEX 或相反）我想我也会发布我的部分答案。

我有类似的问题，我想做这样的事情：输入任何有效的CSS颜色（HSL（a），RGB（a），HEX或颜色名称）和1.能够添加或删除alpha值，2。返回一个rgb（a）对象。我为此准备了一个插件。它可以在GitHub上找到（它需要jQuery，但是如果你想要你可以分叉并制作一个vanilla版本）。这是a demo page。您可以try for yourself查看即时生成的输出。

我会在这里复制粘贴选项：

RGB Generator接受一个参数，即颜色，并提供三个选项：asObject，addAlpha和removeAlpha。省略这三个选项时，RGB颜色将作为字符串返回。

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

请注意，默认包含alpha组件。如果输入值包含alpha值，则输出将为RGBa格式。

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

您可以通过将removeAlpha设置为true来禁用此行为。这将从初始HSLa或RGBa颜色中删除任何alpha值。

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

另一方面，如果要添加Alpha通道，可以通过将addAlpha设置为0到1之间的任何值来实现。当输入为非透明颜色时，将添加alpha值。如果它是透明的，则提供的值将覆盖输入的alpha分量。

$.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 27

接受字符串的速记版本：

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 28

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 29

要直接从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 30

我正在使用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/

Answer 31

我的例子=）

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 32

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}

使用这些功能可以毫无问题地获得结果。：）

Answer 33

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

Answer 34

2021 版

您可以简单地使用 rgb-hex 和 hex-rgb，因为它已经过实战测试，并且具有其他解决方案中没有的多种选项。

我最近正在构建一个颜色选择器，这两个包派上用场了。

用法

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}

Answer 35

我遇到了这个问题因为我想接受任何颜色值并且能够添加不透明度，所以我制作了这个在现代浏览器上使用本机画布的快速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; };

Answer 36

HTML使用十六进制系统，rgb使用十进制系统。所以你必须将数字从十六进制转换为十进制，反之亦然。

Answer 37

HTML 转换器 :)

<!DOCTYPE html>
<html>
<body>

<p id="res"></p>

<script>
function hexToRgb(hex) {
  var res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return "(" + parseInt(res[1], 16) + "," + parseInt(res[2], 16) + "," + parseInt(res[3], 16) + ")";
};

document.getElementById("res").innerHTML = hexToRgb('#0080C0');
</script>

</body>
</html>

Answer 38

在3D环境（webGL，ThreeJS）中工作时，有时需要为网格的不同面创建3个值，即基本值（主要颜色），较浅的值和较暗的值：

material.color.set( 0x660000, 0xff0000, 0xff6666 ); // red cube

我们可以从主要RBG颜色创建以下3个值：255,0,0

function rgbToHex(rgb) { 
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
       hex = "0" + hex;
  }
  return hex;
};

function convertToHex(r,g,b) { 

    var fact = 100;  // contrast 
    var code = '0x';

    // main color
    var r_hexa = rgbToHex(r);
    var g_hexa = rgbToHex(g);
    var b_hexa = rgbToHex(b);

    // lighter
    var r_light = rgbToHex(Math.floor(r+((1-(r/255))*fact)));
    var g_light = rgbToHex(Math.floor(g+((1-(g/255))*fact)));
    var b_light = rgbToHex(Math.floor(b+((1-(b/255))*fact)));

    // darker
    var r_dark = rgbToHex(Math.floor(r-((r/255)*(fact*1.5)))); // increase contrast
    var g_dark = rgbToHex(Math.floor(g-((g/255)*(fact*1.5))));
    var b_dark = rgbToHex(Math.floor(b-((b/255)*(fact*1.5))));

    var hexa = code+r_hexa+g_hexa+b_hexa;
    var light = code+r_light+g_light+b_light;
    var dark = code+r_dark+g_dark+b_dark;

    console.log('HEXs -> '+dark+" + "+hexa+" + "+light)

    var colors = [dark, hexa, light]; 
    return colors;

}

在ThreeJS代码中只需编写：

var material = new THREE.MeshLambertMaterial();
var c = convertToHex(255,0,0); // red cube needed
material.color.set( Number(c[0]), Number(c[1]), Number(c[2]) );

结果：

//                                 dark      normal     light
convertToHex(255,255,255) HEXs -> 0x696969 + 0xffffff + 0xffffff
convertToHex(255,0,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(255,127,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464
convertToHex(100,100,100) HEXs -> 0x292929 + 0x646464 + 0xa0a0a0
convertToHex(10,10,10) HEXs -> 0x040404 + 0x0a0a0a + 0x6a6a6a

Answer 39

我为RGB和Hex颜色制作了一个小型Javascript颜色类，该类还包括RGB和Hex验证功能。我已将代码作为摘要添加到此答案中。

var colorClass = function() {
   this.validateRgb = function(color) {
      return typeof color === 'object' &&
      color.length === 3               &&
      Math.min.apply(null, color) >= 0 &&
      Math.max.apply(null, color) <= 255;
   };
   this.validateHex = function(color) {
      return color.match(/^\#?(([0-9a-f]{3}){1,2})$/i);
   };
   this.hexToRgb = function(color) {
      var hex    = color.replace(/^\#/, '');
      var length = hex.length;
      return     [
         parseInt(length === 6 ? hex['0'] + hex['1'] : hex['0'] + hex['0'], 16),
         parseInt(length === 6 ? hex['2'] + hex['3'] : hex['1'] + hex['1'], 16),
         parseInt(length === 6 ? hex['4'] + hex['5'] : hex['2'] + hex['2'], 16)
      ];
   };
   this.rgbToHex = function(color) {
      return '#' +
      ('0' + parseInt(color['0'], 10).toString(16)).slice(-2) +
      ('0' + parseInt(color['1'], 10).toString(16)).slice(-2) +
      ('0' + parseInt(color['2'], 10).toString(16)).slice(-2);
   };
};

var colors = new colorClass();
console.log(colors.hexToRgb('#FFFFFF'));//       [255, 255, 255]
console.log(colors.rgbToHex([255, 255, 255]));// #FFFFFF

Answer 40

不可修改且易于理解的版本，没有任何位魔术：

遍历数组
如果value < 0或value > 255使用Math.min()和Math.max()来归一化值
使用hex将数字转换为String.toString()表示法
将前导零和修剪值追加到两个字符
将映射值连接到字符串

function rgbToHex(r, g, b) {
  return [r, g, b]
    .map(color => {
      const normalizedColor = Math.max(0, Math.min(255, color));
      const hexColor = normalizedColor.toString(16);

      return `0${hexColor}`.slice(-2);
    })
    .join("");
}

是的，它不会像按位运算符那样表现出色，但是更具可读性和不变性，因此它不会修改任何输入

Answer 41

一个简单的内衬。用逗号分隔rgb，忽略非数字，转换为十六进制，填充0，最后以hashbang结尾。

var yellow = 'rgb(255, 255, 0)';
var rgb2hex = str => "#"+str.split(',').map(s => (s.replace(/\D/g,'')|0).toString(16)).map(s => s.length < 2 ? "0"+s : s).join('');

console.log(rgb2hex(yellow));

Answer 42

快捷键功能

对于那些重视短箭头功能的人。

Hex2rgb

David's Answer的箭头功能版本

const hex2rgb = h => [(x=parseInt(h,16)) >> 16 & 255,x >> 8 & 255, x & 255];

一种更灵活的解决方案，支持短和十六进制或哈希#

const hex2rgb = h => {
    if(h[0] == '#') {h = h.slice(1)};
    if(h.length <= 3) {h = h[0]+h[0]+h[1]+h[1]+h[2]+h[2]};
    h = parseInt(h,16);
    return [h >> 16 & 255,h >> 8 & 255, h & 255];
};

Rgb2hex

const rgb2hex = (r,g,b) => ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);

Answer 43

基于@MichałPerłakowski answer（EcmaScipt 6）及其基于Tim Down's answer的答案

我写了一个转换hexToRGB函数的修改版本，添加了安全检查，如果r / g / b颜色分量在0-255之间，并且功能可以采用数字r / g / b参数或字符串r / g / b参数，这里是：

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

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

要安全地使用该功能 - 你应该知道传递的字符串是否是真正的rbg字符串颜色 - 例如，一个非常简单的检查可能是：

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}

Answer 44

CSS Level 4旁注：通常，您希望能够将Hex转换为RGB的原因是alpha通道，在这种情况下，您可以很快使用 CSS4 通过添加尾随十六进制。示例：#FF8800FF或#f80f表示完全透明的橙色。

除此之外，下面的代码回答了单个函数中的问题，来自和来自另一个的问题。这接受一个可选的alpha通道，支持字符串和数组格式，解析3,4,6,7个字符的十六进制，以及rgb /一个完整或部分字符串（除了百分比定义的rgb / a值），没有标志。 / p>

（如果支持IE，则替换几个ES6语法）

排成一行：

function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[\sa-z\(\);]+/gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-z\d])$/i,'0$1'))),'#'+c[0]+c[1]+c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}

可读版本：

function rgbaHex(c, a) {
    // RGBA to Hex
    if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
        c = Array.isArray(c) ? c : c.replace(/[\sa-z\(\);]+/gi, '').split(',');
        c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-z\d])$/i, '0$1'));

        return '#' + c[0] + c[1] + c[2];
    }
    // Hex to RGBA
    else {
        c = c.replace(/#/, '');
        c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
        c = window.parseInt(c, 16);

        a = window.parseFloat(a) || null;

        const r = (c >> 16) & 255;
        const g = (c >> 08) & 255;
        const b = (c >> 00) & 255;

        return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
    }
}

<强>用途：

rgbaHex('#a8f')

rgbaHex('#aa88ff')

rgbaHex('#A8F')

rgbaHex('#AA88FF')

rgbaHex('#AA88FF', 0.5)

rgbaHex('#a8f', '0.85')

// etc.

rgbaHex('rgba(170,136,255,0.8);')

rgbaHex('rgba(170,136,255,0.8)')

rgbaHex('rgb(170,136,255)')

rgbaHex('rg170,136,255')

rgbaHex(' 170, 136, 255 ')

rgbaHex([170,136,255,0.8])

rgbaHex([170,136,255])

// etc.

Answer 45

以下是 Javascript 代码，用于将 HEX 颜色值更改为 R ed， G reen，<强烈> B lue个人。

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}

Answer 46

我发现了这个...... http://jsfiddle.net/Mottie/xcqpF/1/light/

function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}

Answer 47

使用匿名函数和Array.map组合使用清洁工;更流线型的外观。

var write=function(str){document.body.innerHTML=JSON.stringify(str,null,'    ');};

function hexToRgb(hex, asObj) {
  return (function(res) {
    return res == null ? null : (function(parts) {
      return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] }
    }(res.slice(1,4).map(function(val) { return parseInt(val, 16); })));
  }(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)));
}

function rgbToHex(r, g, b) {
  return (function(values) {
    return '#' + values.map(function(intVal) {
      return (function(hexVal) {
        return hexVal.length == 1 ? "0" + hexVal : hexVal;
      }(intVal.toString(16)));
    }).join('');
  }(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b]))
}

// Prints: { r: 255, g: 127, b: 92 }
write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true));

body{font-family:monospace;white-space:pre}

Answer 48

以上的干净coffeescript版本（感谢@TimDown）：

rgbToHex = (rgb) ->
    a = rgb.match /\d+/g
    rgb  unless a.length is 3
    "##{ ((1 << 24) + (parseInt(a[0]) << 16) + (parseInt(a[1]) << 8) + parseInt(a[2])).toString(16).slice(1) }"

Answer 49

看起来你正在寻找这样的东西：

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return "" + chars[high] + chars[low];
}

function rgb2hex(r, g, b) {
    return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}

Answer 50

您可以在下面尝试这段简单的代码。

对于HEX到RGB

list($r, $g, $b) = sscanf(#7bde84, "#%02x%02x%02x");
echo $r . "," . $g . "," . $b;

这将返回123,222,132

对于RGB到HEX

$rgb = (123,222,132),
$rgbarr = explode(",",$rgb,3);
echo sprintf("#%02x%02x%02x", $rgbarr[0], $rgbarr[1], $rgbarr[2]);

这将返回＃7bde84

Answer 51

我将其用于lodash。它会将"30,209,19"之类的RGB字符串转换为相应的十六进制字符串"#1ed113"：

var rgb = '30,209,19';

var hex = _.reduce(rgb.split(','), function(hexAccumulator, rgbValue) {
    var intColor = _.parseInt(rgbValue);

    if (_.isNaN(intColor)) {
        throw new Error('The value ' + rgbValue + ' was not able to be converted to int');
    }

    // Ensure a value such as 2 is converted to "02".
    var hexColor = _.padLeft(intColor.toString(16), 2, '0');

    return hexAccumulator + hexColor;
}, '#');

Answer 52

如果这对任何人都有帮助，我的API就会为这些转化提供功能。

<script src="http://api.xlww.net/xQuery/xQuery.js"></script>
<script>
  x.init();
  var rgb=new x.rgb(37,255,83);
  alert(rgb.hex);
  var hex=new x.hex("#ffa500");
  alert("("+hex.rgb[0]+","+hex.rgb[1]+","+hex.rgb[2]+")");
</script>

RGB到十六进制，十六进制到RGB

52 个答案:

2012年12月3日更新

ECMAScript 6版Tim Down's answer

将RGB转换为十六进制

将十六进制转换为RGB

Bonus：使用`padStart()`方法

接受字符串的速记版本：

检查它是否已经是十六进制

2021 版

用法

RGB-十六进制

十六进制rgb

快捷键功能

Hex2rgb

Rgb2hex

RGB到十六进制，十六进制到RGB

52 个答案:

2012年12月3日更新

ECMAScript 6版Tim Down's answer

将RGB转换为十六进制

将十六进制转换为RGB

Bonus：使用padStart()方法

接受字符串的速记版本：

检查它是否已经是十六进制

2021 版

用法

RGB-十六进制

十六进制rgb

快捷键功能

Hex2rgb

Rgb2hex

Bonus：使用`padStart()`方法