# javascript – RGB to hex and hex to RGB

## The Question :

601 people think this question is useful

How to convert colors in RGB format to hex format and vice versa?

For example, convert '#0080C0' to (0, 128, 192).

1332 people think this answer is useful

Note: both versions of rgbToHex expect integer values for r, g and b, so you’ll need to do your own rounding if you have non-integer values.

The following will do to the RGB to hex conversion and add any required zero padding:

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



Converting the other way:

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";  Finally, an alternative version of rgbToHex(), as discussed in @casablanca’s answer and suggested in the comments by @cwolves: function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } alert(rgbToHex(0, 51, 255)); // #0033ff  ## Update 3 December 2012 Here’s a version of hexToRgb() that also parses a shorthand hex triplet such as “#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";  ## The Answer 2 154 people think this answer is useful An alternative version of hexToRgb: function hexToRgb(hex) { var bigint = parseInt(hex, 16); var r = (bigint >> 16) &amp; 255; var g = (bigint >> 8) &amp; 255; var b = bigint &amp; 255; return r + "," + g + "," + b; }  Edit: 3/28/2017 Here is another approach that seems to be even faster 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]; }  Edit: 8/11/2017 The new approach above after more testing is not faster :(. Though it is a fun alternate way. ## The Answer 3 84 people think this answer is useful # ECMAScript 6 version of Tim Down’s answer ## Converting RGB to 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'  ## Converting hex to RGB Returns an array [r, g, b]. Works also with shorthand hex triplets such as "#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: RGB to hex using padStart() method

const rgbToHex = (r, g, b) => '#' + [r, g, b]

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


Note that this answer uses latest ECMAScript features, which are not supported in older browsers. If you want this code to work in all environments, you should use Babel to compile your code.

46 people think this answer is useful

Here’s my version:

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

function hex_to_rgb(hex) {
const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i); if (normal) return normal.slice(1).map(e => parseInt(e, 16)); const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
return null;
}



26 people think this answer is useful

I’m assuming you mean HTML-style hexadecimal notation, i.e. #rrggbb. Your code is almost correct, except you’ve got the order reversed. It should be:

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



Also, using bit-shifts might make it a bit easier to read:

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



25 people think this answer is useful
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}



20 people think this answer is useful

This code accept #fff and #ffffff variants and opacity.

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



17 people think this answer is useful

One-line functional HEX to RGBA

Supports both short #fff and long #ffffff forms.
Supports alpha channel (opacity).
Does not care if hash specified or not, works in both cases.

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(isFinite(opacity) ? opacity : 1).join(',') + ')';
}



examples:

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)

hexToRGBA('#ffffff', 0)  ->  rgba(255,255,255,0)
hexToRGBA('#ffffff', .5) ->  rgba(255,255,255,0.5)
hexToRGBA('#ffffff', 1)  ->  rgba(255,255,255,1)



14 people think this answer is useful

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


12 people think this answer is useful

This could be used for getting colors from computed style 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



9 people think this answer is useful

Bitwise solution normally is weird. But in this case I guess that is more elegant ðŸ˜„

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



Usage:

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

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



7 people think this answer is useful

(2017) SIMPLE ES6 composable arrow functions

I can’t resist sharing this for those who may be writing some modern functional/compositional js using ES6. Here are some slick one-liners I am using in a color module that does color interpolation for data visualization.

Note that this does not handle the alpha channel at all.

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));  BTW, If you like this style/syntax, I wrote a full color module (modern-color) you can grab from npm. I made it so I could use prop getters for conversion and parse virtually anything (Color.parse(anything)). Worth a look if you deal with color a lot like I do. ## The Answer 13 6 people think this answer is useful // Ignoring hsl notation, color values are commonly expressed as names, rgb, rgba or hex- // Hex can be 3 values or 6. // Rgb can be percentages as well as integer values. // Best to account for all of these formats, at least. 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)&amp;255, (c>> 8)&amp;255, c&amp;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.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));  ## The Answer 14 5 people think this answer is useful @ Tim, to add to your answer (its a little awkward fitting this into a comment). As written, I found the rgbToHex function returns a string with elements after the point and it requires that the r, g, b values fall within the range 0-255. I’m sure this may seem obvious to most, but it took two hours for me to figure out and by then the original method had ballooned to 7 lines before I realised my problem was elsewhere. So in the interests of saving others time & hassle, here’s my slightly amended code that checks the pre-requisites and trims off the extraneous bits of the 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); }  ## The Answer 15 4 people think this answer is useful If you need compare two color values (given as RGB, name color or hex value) or convert to HEX use HTML5 canvas object. 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);  ## The Answer 16 3 people think this answer is useful May you be after something like this? function RGB2HTML(red, green, blue) { return '#' + red.toString(16) + green.toString(16) + blue.toString(16); } alert(RGB2HTML(150, 135, 200));  displays #9687c8 ## The Answer 17 2 people think this answer is useful ## Shorthand version that accepts a 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)"));  ## To check if it’s not already hexadecimal 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"));  ## The Answer 18 2 people think this answer is useful Instead of copy’n’pasting snippets found here and there, I’d recommend to use a well tested and maintained library: Colors.js (available for node.js and browser). It’s just 7 KB (minified, gzipped even less). ## The Answer 19 1 people think this answer is useful For 3 digits hexToRgb function of Tim Down can be improved as below: 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;
};



1 people think this answer is useful

i needed a function that accepts invalid values too like

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

this is a spin off of @cwolves answer

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



1 people think this answer is useful
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}



Use these Function to achive the result without any issue. ðŸ™‚

1 people think this answer is useful

While this answer is unlikely to fit the question perfectly it may be very useful none the less.

1. Create any random element

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

1. Set any valid style to the color you want to convert

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

1. Call the style property again

> toRgb.style.color;

< "rgb(133, 225, 133)" Your color has been converted to Rgb

Works for: Hsl, Hex

Does not work for: Named colors

1 people think this answer is useful

My version of hex2rbg:

1. Accept short hex like #fff
2. Algorithm compacity is o(n), should faster than using regex. e.g String.replace, String.split, String.match etc..
3. Use constant space.
4. Support rgb and rgba.

you may need remove hex.trim() if you are using IE8.

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)



code:

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) &amp; 255);
h.push((bigint >> 2) &amp; 255);
} else {
h.push((bigint >> 16) &amp; 255);
h.push((bigint >> 8) &amp; 255);
}
h.push(bigint &amp; 255);
if (arguments.length === 2) {
h.push(opacity);
return 'rgba('+h.join()+')';
} else {
return 'rgb('+h.join()+')';
}
}



1 people think this answer is useful

This snippet converts hex to rgb and rgb to hex.

View demo

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) &amp; 255, (rgb >> 8) &amp; 255, rgb &amp; 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 }  ## The Answer 25 1 people think this answer is useful A simple answer for rgb to hex  function rgbtohex(r,g,b){ return "#" + (Math.round(r) * 65536 + Math.round(g) * 256 + Math.round(b)).toString(16)); }  ## The Answer 26 1 people think this answer is useful I came across this problem since I wanted to parse any color string value and be able to specify an opacity, so I wrote this function that uses the canvas API. var toRGBA = function () { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = 1; canvas.height = 1; return function (color) { context.fillStyle = color; context.fillRect(0, 0, 1, 1); var data = context.getImageData(0, 0, 1, 1).data; return { r: data[0], g: data[1], b: data[2], a: data[3] }; }; }();  Note about context.fillStyle: If parsing the value results in failure, then it must be ignored, and the attribute must retain its previous value. Here’s a Stack Snippet demo you can use to test inputs: var toRGBA = function () { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = 1; canvas.height = 1; return function (color) { context.fillStyle = color; context.fillRect(0, 0, 1, 1); var data = context.getImageData(0, 0, 1, 1).data; return { r: data[0], g: data[1], b: data[2], a: data[3] }; }; }(); var inputs = document.getElementsByTagName('input'); function setColor() { inputs[1].value = JSON.stringify(toRGBA(inputs[0].value)); document.body.style.backgroundColor = inputs[0].value; } inputs[0].addEventListener('input', setColor); setColor();  input { width: 200px; margin: 0.5rem; }  <input value="cyan" /> <input readonly="readonly" />  ## The Answer 27 0 people think this answer is useful I’m working with XAML data that has a hex format of #AARRGGBB (Alpha, Red, Green, Blue). Using the answers above, here’s my solution: 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) &amp; 255; g = (bigint >> 2) &amp; 255; b = bigint &amp; 255; return "rgba(" + r + "," + g + "," + b + ",1)"; } //If in #RRGGBB format if (aRgb.length >= 6) { r = (bigint >> 16) &amp; 255; g = (bigint >> 8) &amp; 255; b = bigint &amp; 255; var rgb = r + "," + g + "," + b; //If in #AARRBBGG format if (aRgb.length == 8) { a = ((bigint >> 24) &amp; 255) / 255; return "rgba(" + rgb + "," + a.toFixed(1) + ")"; } } return "rgba(" + rgb + ",1)"; }  http://jsfiddle.net/kvLyscs3/ ## The Answer 28 0 people think this answer is useful For convert directly from jQuery you can try:  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'))



0 people think this answer is useful
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;



0 people think this answer is useful

The top rated answer by Tim Down provides the best solution I can see for conversion to RGB. I like this solution for Hex conversion better though because it provides the most succinct bounds checking and zero padding for conversion to 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);
};



The use of left shift ‘<<‘ and or ‘|’ operators make this a fun solution too.