RGB to hex and hex to RGB
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);}alert(rgbToHex(0, 51, 255)); // #0033ffConverting 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)); // #0033ffUpdate 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";
An alternative version of 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;}Edit: 3/28/2017Here 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/2017The new approach above after more testing is not faster :(. Though it is a fun alternate way.
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] .map(x => x.toString(16).padStart(2, '0')).join('')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.