RGB到hex和hex到RGB

如何将RGB格式的颜色转换为hex格式，反之亦然？

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

Answer 1

以下将做RGB到hex转换并添加任何所需的零填充：

 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 = /^#?([af\d]{2})([af\d]{2})([af\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); } 

2012年12月3日更新

这里是hexToRgb()的一个版本，它也parsing一个速记hex三元组，例如“＃03F”：

 function hexToRgb(hex) { // Expand shorthand form (eg "03F") to full form (eg "0033FF") var shorthandRegex = /^#?([af\d])([af\d])([af\d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([af\d]{2})([af\d]{2})([af\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以上新的方法经过更多的testing不是更快:(虽然这是一个有趣的替代方法。

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

我假设你的意思是HTML风格的hex符号，即#rrggbb 。 你的代码几乎是正确的，除非你已经把命令颠倒了。 它应该是：

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

另外，使用位移可能会使读起来更容易一些：

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

Answer 5

此代码接受#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 6

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

Answer 7

Tim Down的答案是 ECMAScript 6版本

将RGB转换为hex

 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' 

Answer 8

单线functionHEX到RGBA

支持简短的#fff和长的#ffffff表单。
支持alpha通道（不透明度）。
不pipe是否指定散列，都适用于这两种情况。

 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 9

//忽略hsl表示法，颜色值通常表示为名称，rgb，rgba或hex-

// Hex可以是3或6。

// Rgb可以是百分比，也可以是整数值。

//最好能说明所有这些格式，至less。

 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(/^[az]+$/.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 10

@蒂姆，添加到您的答案（这是一个有点尴尬适合这个到一个评论）。

正如所写的，我发现rgbToHex函数返回一个string，其中包含点之后的元素，它要求r，g，b值落在0-255的范围内。

我相信这个问题对大多数人来说似乎是显而易见的，但是我花了两个小时才弄清楚，到那时，原来的方法已经膨胀到了7条线，才发现我的问题在其他地方。 所以为了节省时间和麻烦，这里是我稍作修改的代码，它检查前提条件并修剪掉string的无关位。

 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 11

这可以用来从计算样式propeties获取颜色：

 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#L43

Answer 12

如果您需要比较两个颜色值（以rgb，名称颜色或hex值给出）或转换为HEX，则使用HTML5canvas对象。

  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 13

你可以在这样的事情之后？

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

显示＃9687c8

Answer 14

Tim Down的3位hexToRgbfunction可以改进如下：

 var hex2Rgb = function(hex){ var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})|([af\d]{1})([af\d]{1})([af\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 15

（2017）SIMPLE ES6可组合箭头function

对于那些可能使用ES6编写一些现代function/构图的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 16

我需要一个接受无效值的函数

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 17

我的hex2rbg版本：

1. 接受像#fff一样的短hex
2. algorithm的紧凑性是o（n），应该更快，然后使用正则expression式。 如String.replace, String.split, String.match等。
3. 使用恒定的空间。
4. 支持rgb和rgba。

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

例如

 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 18

我遇到这个问题，因为我想接受任何颜色值，并能够添加一个不透明的，所以我做了这个快速的jQuery插件，使用现代浏览器上的本地canvas。 似乎工作很好。

编辑

原来我不知道如何使它成为一个适当的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, eg '#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 19

 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 20

我正在处理具有#AARRGGBB（Alpha，Red，Green，Blue）hex格式的XAML数据。 使用上面的答案，这是我的解决scheme：

 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 21

对于直接从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 22

接受string的速记版本：

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

Answer 23

考虑到很多答案只是部分地回答了这个问题（无论是从RGB到HEX 还是其他方式），我想我也会发表我的部分答案。

我有一个类似的问题，我想要做这样的事情：input任何有效的CSS颜色（HSL（a），RGB（a），hex或颜色名称）和1.能够添加或删除一个alpha值，2。返回一个rgb（a）对象。 我为此写了一个插件。 它可以在GitHub上find （它需要jQuery，但如果你想，你可以分叉它，并作出香草版）。 这里是一个演示页面 。 你可以自己尝试 ，看看在飞行中产生的输出。

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

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

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

请注意，默认情况下包含alpha组件。 如果input值包含一个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之间的任何值来实现。当input为非透明颜色时，将添加Alpha值。 如果它是透明的，则提供的值将覆盖input的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 24

Tim Down评分最高的答案提供了我可以看到的转换为RGB的最佳解决scheme。 我喜欢这个解决scheme，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); }; 

使用左移“<<”和或“|” 运营商也使这个有趣的解决scheme。

Answer 25

我发现这一点，因为我认为这是非常简单的，有validationtesting，并支持阿尔法值（可选），这将符合案件。

只要评论一下正则expression式就行，如果你知道你在做什么，而且速度要快一点。

 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 26

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

Answer 27

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

 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 28

 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 29

上面的一个干净的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 30

我愚蠢的例子=）

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