RGB to hex and hex to RGB

Question

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

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

Rodl

Here' are functions for RGB<->Hex conversation, Average of 2 hex colors, and Random hex color. – Zampardi

Answer 1

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)); // #0033ff

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

Wouldbe

@Vitim.us: << is the bitwise left shift operator. Assuming g is a non-zero integer, g << 8 therefore effectively multiplies g by 256, adding to zeroes to the end of its hex representation. Likewise r << 16 adds 4 zeroes. Adding 1 << 24 (1000000 in hex) ensures that the hex representation is left-padded with any required zeroes once the leading 1 is stripped off using slice(). For example, if r and g were both zero and b was 51, ((r << 16) + (g << 8) + b).toString(16) would return the string "33"; add 1 << 24 and you get "1000033". Then strip the 1 and you're there. – Wouldbe

Would the bit shifting (eg (r << 16)) give the same result on both big and little endian computers? Edit: It does not. Here's why: #1042054 – Nolen

@Gothdo: Sorry to roll back your edit, but it's often not possible or practical to use ES6. The previous version will work anywhere. – Wouldbe

@TimDown OK, I posted this as my own answer. – Playful

Slight modification (may or may not be desirable). By using /^#?([a-f\d])([a-f\d])([a-f\d])(?:[a-f\d]{1,2})?$/i for the short hand regex and /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})(?:[a-f\d])*$/i for the long you can automatically throw out junk characters at the end of the string. – Equitant

your rgbToHex doesn't work. get the funny result: #f55b2f00 – Rubric

@TheCrazyProfessor: For which version of rgbToHex, and with what input values? – Wouldbe

The second, alternative, version seems to fail with [256, 4, 4] – Selfservice

@madprops: 256 is an invalid value. The acceptable range is 0-255 (integers only). – Wouldbe

Oh my bad. I was getting that value from another library. – Selfservice

Regarding the latest rgbToHex function. One will want to either typecast your passed rgb values as integers, or slightly modify the rgbToHex function. Example: jsfiddle.net/cydqo6wj Current: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); Modified: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); In the modified version, I simply force the rgb values to be evalued at integers prior to the change over to 16/hex. – Revest

Additionally, you may want to implement a floor and ceiling to inputs. Just spent too much time chasing THAT unexpected madness down – Woe

@TimDown many thx, i just add in hexToRgb at begin hex.toLowerCase(); – Hutment

a tip for pasing an rgba string /^rgba\(?([\d]*)[\,\s]*([\d]*)[\,\s]*([\d]*)[\,\s]*([\d\.]*)\)$/i.exec('rgba(255, 0, 12, 0.2)') – Solana

All three rgbToHex functions above risk failure when given non-integer decimal inputs: rgbToHex(123.456, 0.101, 254.541); // "#7b00fe.8a7ef9e" – Blowfly

@jtheletter: Yes. Non-integer values were not valid in rgb() notation until very recently and are rounded by the browser. It's pretty trivial to add rounding. – Wouldbe

What's the "m" for in the updated 2012 hexToRgb? – Triennial

@RobinMétral: That's the full string matched by the regular expression. r, g and b correspond to the capturing groups, which is the stuff we actually want. – Wouldbe

Nitpicking a bit, but why mixing bitwise and arithmetic operations? Doing (1 << 24 | r << 16 | g << 8 | b).toString(16) looks more straightforward to me. – Triturable

@Arnauld: Fair point. As far as I remember, my thinking was that + would be more familiar than | to most, but it is a bit inconsistent. – Wouldbe

Answer 2

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/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.

Gaines

A line of perfection: return [r, g, b].join();. – Odom

Or for the all-encapsulating one-liner solution: return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join(); – Dday

I am using this with one tweak - remove non-hex chars (like a leading #) before parseInt: hex = hex.replace(/[^0-9A-F]/gi, ''); – Extracellular

Don't be so quick to use the shorthand version. JSPerf shows that the one in this answer is fastest: jsperf.com/2014-09-16-hex-to-rgb – Wellnigh

Be careful with this, its output isn't reliable. It made a color close to black appear dark pink. Better to use the function from top answer. – Madsen

I've never had it change a colour for me. The only catch is you have to send the hex values in as all 6 hex digits it doesn't support short form colours. (eg 999999 will work but 999 will not). What was the hex value you were trying to convert? – Gaines

@OlavKokovkin Your test aren't very fair to begin with. The "fastest" function doesn't make the join(), which is imo the most time-consuming line in these functions. – Tula

Answer 3

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.

Ouachita

hexToRgb() is easily adapted to handle 4 and 8 digit hex RGBA notation: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b) becomes: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a) But is there a way to make the regexp work with A of RGBA as an optional 4th hex value? That would absolutely complete the functionality, making one regexp work with hex RGB and RGBA. Otherwise it's two regexps, one with 3 values, the other with 4. You must divide the 4th value by 255 to get the 4th arg for rgba(). – Gather

const rgbToHex = (rgb) => { const rgbExcludeFirst = rgb.split('rgb(')[1]; const rgbExcludeLast = rgbExcludeFirst.split(')')[0]; const rgbValueArray = rgbExcludeLast.split(','); return `#${rgbValueArray.map((x) => { const valAsInt = parseInt(x, 10); const hex = valAsInt.toString(16); return hex.length === 1 ? `0${hex}` : hex; }).join('')}`; }; if you want to pass an RGB string in – Matz

The most sane answer for the modern version of JS actually. – Exclamatory

Answer 4

Here's my version:

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

function hexToRgb(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;
}

Condon

A little bit confused about the rgb2hex method. Why do we add 0x1000000 to rgb, and why we need to call .slice(1) at last? – Connolly

Because blue would be #FF, we add 0x1000000, so it's #10000FF, and then we remove the first "1". – Condon

this also worked for me, when the other examples on this page didnt. i wanted to convert RGB 100, 100, 100 to HEX, other examples on this page returned "#100100100" - whilst this example, correctly returned "#646464" – Nae

Answer 5

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

Jarrettjarrid

Witchcraft! you should add an explanation to this very cool one-liner. – Acidulous

Nice! Here's the same thing, except minified and returning an object with properties r,g,b : function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}} – Zampardi

Very nice. Doesnt work with shorthand but neat. handles the hash without the ugly subscript. – Shizue

Answer 6

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;

Ottar

Great, except you need to left zero-pad it to 6 characters if red<16: var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue; – Obstinate

Seems to works except for this :(0,128,192) probably because of the 0 ? – Rodl

@cwolves: You're right, I missed that. But it should be appended to the final string, not the integer. – Ottar

@Sindar: See @cwolves' comment, if red < 16 you need to prefix a 0 to the final result. – Ottar

@cassablanca - Yep, I missed a set of parens there around your original code :) – Obstinate

@cwolves: But red << 16 is in decimal, the decColor.toString(16) is needed to convert it to hexadecimal. – Ottar

oh you don't have that :) Fine! var hexColor = (red < 16 ? '0' : '') + ((red << 16) + (green << 8) + blue).toString(16); Happy now? :P – Obstinate

@cwolves: I guess that's what happens when I try to fix just one line of the OP's code without providing a complete function. :) – Ottar

@cwolves var decColor = (red < 16 ? '00' : '') + ((red << 16) + (green << 8) + blue).toString(16); Like this it works but right now if i put 0 on the green i have the same problem, so i have to check all the color apparently... – Rodl

@Rodl - Oh, I suppose you do need the '00' in there, but not like that because if red == 5, you only need one zero. var hexColor = (red == 0 ? '00' : red < 16 ? '0' : '') + ((red << 16) + (green << 8) + blue).toString(16); – Obstinate

@Sindar: You shouldn't have to check for green and blue, only red since it's the leading digit. Nevertheless, you might find @Tim Down's answer to be simpler. – Ottar

Well what i have to do so ? >< – Rodl

@cassablanca, yes he does.. if red and green are BOTH zero, you only have two digits from blue. @Rodl - huh... um... okay, it's easy enough to handle but this solution is losing its elegance! – Obstinate

okay, HERE: var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1); – Obstinate

@casablanca, @cwolves, @Sindar: Actually you may need to left pad with as many as five zeroes. – Wouldbe

@Tim - the 1 << 24 does left pad with 5 zeroes – Obstinate

@cwolves: Yeah, I started writing that comment before seeing your last comment. – Wouldbe

@cwolves That's a cute (and effective) hack. Nice. – Hematuria

@cwolves: That's indeed a nice solution. And it longer deserves to be a comment here, you should post it as your own answer. :) – Ottar

@cassablanca - It's in Tim's answer, that's good enough. It will live on forever in legacy! – Obstinate

Answer 7

Try (rgba here; bonus here)

let hex2rgb= c=> `rgb(${c.match(/\w\w/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.match(/\w\w/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)'));

Unpaidfor

Nice! I use the following code to calculate the berightness level of the color (e.g. whether the color is dark or light to identify the text color for use with it.) Here's the code in Javascript to get the luminance: let rgb = color.match(/\w\w/g).map(x=>+`0x${x}`); let lum = (rgb[0]*0.299 + rgb[1]*0.587 + rgb[2]*0.114) / 256; lum > 0.5 is light/bright color – Oringa

@Oringa according to wiki luminance (from hsl) is L = (max(R,G,B) + min(R,G,B))/2 - but I not test it. May be your formula is more based on eye physical properties... – Coyote

Yes, the formula is not the actual formula for luminance. Using the actual luminance formula. Blue is somehow perceived darker than green/yellow at the same luminance level. So, there must be something to be changed from each color component. I got the code from here: https://mcmap.net/q/21249/-evaluate-whether-a-hex-value-is-dark-or-light which measure the brightness level according to a human perceived brightness level of each R, G, and B color and weight each of them respectively. – Oringa

See https://mcmap.net/q/21247/-how-to-convert-rgba-to-hex-color-code-using-javascript for rgba. See jsfiddle.net/Abeeee/ud1as8o3/1 for a running demo. – Integration

Answer 8

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)

Suanne

Try to write human-readable code, not one-liners. There's no gain if you minify your code before production anyways. – Benefice

This is what used. Good job! Only thing I added (apart from arrow function conversion) was (hex, opacity = 1). Yours would convert 0 to 1 which may not produce expected results. – Shizue

This is very readable code. I do not share the sentiment. – Shizue

this is a good one liner code and readable. If you want it in multiline then throw it in a formatter. – Theomania

Not good for beginners. every one is not an expert. I need the four values separate for further calculation to set page element properties in a batch update for a slide and I am having trouble parsing them out of this string of commands. – Grovel

And hex now optionally supports opacity , #f2c93a42 , so you can return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/(hex.length==8?4:3) + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(hex.length===8?'':isFinite(opacity) ? opacity : 1).join(',').replace(/,$/,'') + ')' – Blim

Answer 9

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

Zeena

Answer 10

Surprised this answer hasn't come up.

• Doesn't use any library #use-the-platform ✔️
• 3 Lines, and handles any color browsers support.

const toRGB = (color) => {
    const { style } = new Option();
    style.color = color;
    return style.color;
}
// handles any color the browser supports and converts it.
console.log(toRGB("#333")) // rgb(51, 51, 51);
console.log(toRGB("hsl(30, 30%, 30%)")) 

Photograph

Will it work with server-side rendering? – Wolford

No because it taps into the fact that browsers convert all colors to RGB always – Photograph

This solution is nice and short, but it doesn't work with named HTML colors. toRGB('red'); // returns 'red' . The following answer is also 3 lines of code, but uses a property of the Canvas element instead of the Option element: https://mcmap.net/q/21250/-javascript-function-to-convert-color-names-to-hex-codes – Slang

Awesome, so simple ! – Gayden

Answer 11

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

Pippas

Answer 12

(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.

Calomel

Answer 13

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

Ref: https://github.com/k-gun/so/blob/master/so_util.js

Stanislaus

Thank you for this. But there's a small error: should return (r.length == 1 ? "0" + r : r) and similarly for green and blue. – Originality

Answer 14

Hex to RGB

const hex2rgb = (hex) => {
    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} // return an object
    return [ r, g, b ]
}
console.log(hex2rgb("#0080C0"))

RGB to Hex

const rgb2hex = (r, g, b) => {
    var rgb = (r << 16) | (g << 8) | b
    // return '#' + rgb.toString(16) // #80c0
    // return '#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0
    // or use [padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
    return '#' + rgb.toString(16).padStart(6, 0)  
}
console.log(rgb2hex(0, 128, 192))

Also if someone need online tool, I have built Hex to RGB and vice versa.

Mccrary

When linking to your own site or content (or content that you are affiliated with), you must disclose your affiliation in the answer in order for it not to be considered spam. Having the same text in your username as the URL or mentioning it in your profile is not considered sufficient disclosure under Stack Exchange policy. – Ackack

As @Ackack says - I have edited your post to make the affiliation explicit. – Supertonic

Answer 15

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

Cellini

> RGB2HTML > 2HTML > TO HTML ( ಠ ʖ̯ ಠ) HEX is not related to HTML – Auxesis

it is kinda related because javascript is mostly used for html since the op asked a javascript question, they probably want to use in html – Antitype

This is incorrect code. Tim's one is the correct. This answer needs downvoted or removed. – Antitype

Answer 16

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

Virile

Upvoted for this being the most comprehensive version I've looked at. It'd be great if it could extract the colours from rgba, too. – Mycah

Answer 17

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

Vanettavang

Answer 18

2021 version

You can simply use rgb-hex & hex-rgb as it is battle-tested & has multiple options that are not available in other solutions.

I was recently building a Color Picker & these 2 packages came in handy.

Usage

rgb-hex

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'

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

Rakish

Answer 19

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

Mulley

this is a grate way to convert any css color format and normalize it to hex, don't work in node unfortally but you could take adv of offscreenCanvas for web workers – Coffle

Answer 20

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

Oldest

Answer 21

2022: If you often manipulate colors and doesn't mind using a package,

Use tinycolor2. It's a fast library (Around 400kb) for color manipulation and conversion in JavaScript.

It accepts various color string format. Like:

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 to HEX

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

HEX to RGB

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

Visit documentation for more demo.

Vermiform

Something to note about this library that's really cool is that it also allows you to validate the input. – Collocutor

400kb? Thx, will use 5-6 lines of code! – Orchard

Answer 22

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" />

Driskill

Answer 23

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

Trattoria

Answer 24

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. :)

Tamqrah

Answer 25

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

Edward

Thank god someone suggested to use a library instead of copy-pasting untested code. Here is one more library with recent updates: npmjs.com/package/hex-rgb – Jobi

Answer 26

A simple answer to convert RGB to hex. Here values of color channels are clamped between 0 and 255.

function RGBToHex(r = 0, g = 0, b = 0) {
    // clamp and convert to hex
    let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16);
    let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16);
    let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16);
    return "#" +
        (hr.length<2?"0":"") + hr +
        (hg.length<2?"0":"") + hg +
        (hb.length<2?"0":"") + hb;
}

Caen

Answer 27

RGB to Hex

Using padStart()

You can use this oneliner using padStart():

const rgb = (r, g, b) => {
  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
}

P.S. it isn't supported on legacy browsers, check its compatibility here.

Without padStart()

If you don't want to use padStart(), you can implement this function instead:

const rgb = (r, g, b) => {
  return `#${[r, g, b]
    .map((n) =>
      n.toString(16).length === 1 ? "0" + n.toString(16) : n.toString(16)
    )
    .join("")}`;
};

Parameters validation

If you're not sure who is going to use your function, you have to use the parameters validations, that the values are valid (between 0 and 255), to do so, add these conditions before each return:

if (r > 255) r = 255; else if (r < 0) r = 0;
if (g > 255) g = 255; else if (g < 0) g = 0;
if (b > 255) b = 255; else if (b < 0) b = 0;

So the two above examples become:

const rgb = (r, g, b) => {
  if (r > 255) r = 255; else if (r < 0) r = 0;
  if (g > 255) g = 255; else if (g < 0) g = 0;
  if (b > 255) b = 255; else if (b < 0) b = 0;
  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
};

const rgb2 = (r, g, b) => {
  if (r > 255) r = 255; else if (r < 0) r = 0;
  if (g > 255) g = 255; else if (g < 0) g = 0;
  if (b > 255) b = 255; else if (b < 0) b = 0;
  return `#${[r, g, b]
    .map((n) =>
      n.toString(16).length === 1 ? "0" + n.toString(16) : n.toString(16)
    )
    .join("")}`;
};

---

Hex to RGB

For this, we are going to use some RegEx:

const hex = (h) => {
  return h
    .replace(
      /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
      (_, r, g, b) => "#" + r + r + g + g + b + b
    )
    .substring(1)
    .match(/.{2}/g)
    .map((x) => parseInt(x, 16));
};

Rumor

Answer 28

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

Elmiraelmo

Good as it handles shorthand, but could it return a structure rather than a string? – Conventionality

Answer 29

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

Generosity

Note that h.join(',') is the same thing as h.join(). – Syndetic

Answer 30

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

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

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

3. 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

Cheder

This may be the most practical answer when working with the browser. You often simply want to compare the color of some existing element to some known color expressed in #-notation. – Strangulate

Answer 31

I realise there are lots of answers to this but if you're like me and you know your HEX is always going to be 6 characters with or without the # prefix then this is probably the simplest method if you want to do some quick inline stuff. It does not care if it starts with or without a hash.

var hex = "#ffffff";
var rgb = [
    parseInt(hex.substr(-6,2),16),
    parseInt(hex.substr(-4,2),16),
    parseInt(hex.substr(-2),16)
];

Baker

Answer 32

basically, hex to rgb:

var hex = '0080C0'.match(/.{1,2}/g).map(e=>parseInt(e, 16));

if you want string

var rgb = `rgb(${hex.join(", ")})`

rgb to hex:

var rgb_arr = [0, 128, 40];
var rgb = "#" + rgb_arr.map(e=>e.toString(16).padStart(2, 0)).join("")

Insanity

Answer 33

Looks like you're looking for something like this:

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

Honniball

var chars = "0123456789abcdef"; easier. – Nibelung

Answer 34

My example =)

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

Leboeuf

Answer 35

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) & 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/

Mealie

Answer 36

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

Circum

Answer 37

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;

Lyman

Answer 38

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(~~red, 255));
  green = Math.max(0, Math.min(~~green, 255));
  blue = Math.max(0, Math.min(~~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.

Petit

Answer 39

I found this and because I think it is pretty straight forward and has validation tests and supports alpha values (optional), this will fit the case.

Just comment out the regex line if you know what you're doing and it's a tiny bit faster.

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

Favrot

Answer 40

Based on @MichałPerłakowski answer (EcmaScipt 6) and his answer based on Tim Down's answer

I wrote a modified version of the function of converting hexToRGB with the addition of safe checking if the r/g/b color components are between 0-255 and also the funtions can take Number r/g/b params or String r/g/b parameters and here it is:

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

To use the function safely - you should ckeck whether the passing string is a real rbg string color - for example a very simple check could be:

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

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

  .....
}

Disembroil

This is not a modified version of hexToRGB, but of rgbToHex. – Tanyatanzania

Answer 41

A total different approach to convert hex color code to RGB without regex

It handles both #FFF and #FFFFFF format on the base of length of string. It removes # from beginning of string and divides each character of string and converts it to base10 and add it to respective index on the base of it's position.

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

Rivulet

Answer 42

When you're working in 3D environment (webGL, ThreeJS) you sometimes need to create 3 values for the different faces of meshes, the basic one (main color), a lighter one and a darker one :

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

We can create these 3 values from the main RBG color : 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;

}

In your ThreeJS code simply write:

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

Results:

//                                 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

Romelda

Because colors depend of Light paramaters, play with the contrast (here 100) to obtain the expected result. – Romelda

Answer 43

Immutable and human understandable version without any bitwise magic:

1. Loop over array
2. Normalize value if value < 0 or value > 255 using Math.min() and Math.max()
3. Convert number to hex notation using String.toString()
4. Append leading zero and trim value to two characters
5. join mapped values to string

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

Yes, it won't be as performant as bitwise operators but way more readable and immutable so it will not modify any input

Damon

Answer 44

HTML converer :)

<!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>

Pless

Answer 45

To convert from HEX to RGB where RGB are float values within the range of 0 and 1:

#FFAA22 → {r: 0.5, g: 0, b:1}

I adapted @Tim Down’s answer:

function convertRange(value,oldMin,oldMax,newMin,newMax) {
  return (Math.round(((((value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin) * 10000)/10000)
}

function hexToRgbFloat(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: convertRange(parseInt(result[1],16), 0, 255, 0, 1),
    g: convertRange(parseInt(result[2],16), 0, 255, 0, 1),
    b: convertRange(parseInt(result[3],16), 0, 255, 0, 1)
  } : null;
}

console.log(hexToRgbFloat("#FFAA22")) // {r: 1, g: 0.6667, b: 0.1333}

Crowberry

Answer 46

HEX to RGB (ES6) + tests [2022]

convertHexToRgb.ts:

/**
 * RGB color regexp
 */
export const RGB_REG_EXP = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;

/**
 * HEX color regexp
 */
export const HEX_REG_EXP = /^#?(([\da-f]){3}|([\da-f]){6})$/i;

/**
 * Converts HEX to RGB.
 *
 * Color must be only HEX string and must be:
 *  - 7-characters starts with "#" symbol ('#ffffff')
 *  - or 6-characters without "#" symbol ('ffffff')
 *  - or 4-characters starts with "#" symbol ('#fff')
 *  - or 3-characters without "#" symbol ('fff')
 *
 * @function { color: string => string } convertHexToRgb
 * @return { string } returns RGB color string or empty string
 */
export const convertHexToRgb = (color: string): string => {
    const errMessage = `
    Something went wrong while working with colors...
    
    Make sure the colors provided to the "PieDonutChart" meet the following requirements:
    
    Color must be only HEX string and must be 
    7-characters starts with "#" symbol ('#ffffff')
    or 6-characters without "#" symbol ('ffffff')
    or 4-characters starts with "#" symbol ('#fff')
    or 3-characters without "#" symbol ('fff')
    
    - - - - - - - - -
    
    Error in: "convertHexToRgb" function
    Received value: ${color}
  `;

    if (
        !color
        || typeof color !== 'string'
        || color.length < 3
        || color.length > 7
    ) {
        console.error(errMessage);
        return '';
    }

    const replacer = (...args: string[]) => {
        const [
            _,
            r,
            g,
            b,
        ] = args;

        return '' + r + r + g + g + b + b;
    };

    const rgbHexArr = color
        ?.replace(HEX_REG_EXP, replacer)
        .match(/.{2}/g)
        ?.map(x => parseInt(x, 16));

    /**
     * "HEX_REG_EXP.test" is here to create more strong tests
     */
    if (rgbHexArr && Array.isArray(rgbHexArr) && HEX_REG_EXP.test(color)) {
        return `rgb(${rgbHexArr[0]}, ${rgbHexArr[1]}, ${rgbHexArr[2]})`;
    }

    console.error(errMessage);
    return '';
};

I'm using Jest for tests

color.spec.ts

describe('function "convertHexToRgb"', () => {
    it('returns a valid RGB with the provided 3-digit HEX color: [color = \'fff\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();
        const rgb = convertHexToRgb('fff');

        expect(RGB_REG_EXP.test(rgb)).toBeTruthy();
        expect(consoleErrorMocked).not.toHaveBeenCalled();
    });

    it('returns a valid RGB with the provided 3-digit HEX color with hash symbol: [color = \'#fff\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();
        const rgb = convertHexToRgb('#fff');

        expect(RGB_REG_EXP.test(rgb)).toBeTruthy();
        expect(consoleErrorMocked).not.toHaveBeenCalled();
    });

    it('returns a valid RGB with the provided 6-digit HEX color: [color = \'ffffff\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();
        const rgb = convertHexToRgb('ffffff');

        expect(RGB_REG_EXP.test(rgb)).toBeTruthy();
        expect(consoleErrorMocked).not.toHaveBeenCalled();
    });

    it('returns a valid RGB with the provided 6-digit HEX color with the hash symbol: [color = \'#ffffff\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();
        const rgb = convertHexToRgb(TEST_COLOR);

        expect(RGB_REG_EXP.test(rgb)).toBeTruthy();
        expect(consoleErrorMocked).not.toHaveBeenCalled();
    });

    it('returns an empty string when the provided value is not a string: [color = 1234]', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();

        // @ts-ignore
        const rgb = convertHexToRgb(1234);

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });

    it('returns an empty string when the provided color is too short: [color = \'FF\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();

        const rgb = convertHexToRgb('FF');

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });

    it('returns an empty string when the provided color is too long: [color = \'#fffffff\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();

        const rgb = convertHexToRgb('#fffffff');

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });

    it('returns an empty string when the provided value is looks like HEX color string but has invalid symbols: [color = \'#fffffp\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();
        const rgb = convertHexToRgb('#fffffp');

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });

    it('returns an empty string when the provided value is invalid: [color = \'*\']', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();

        const rgb = convertHexToRgb('*');

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });

    it('returns an empty string when the provided value is undefined: [color = undefined]', () => {
        expect.assertions(2);

        const { consoleErrorMocked }  = mockConsole();

        // @ts-ignore
        const rgb = convertHexToRgb(undefined);

        expect(rgb).toBe('');
        expect(consoleErrorMocked).toHaveBeenCalledTimes(1);
    });
});

tests result:

function "convertHexToRgb"
    √ returns a valid RGB with the provided 3-digit HEX color: [color = 'fff']
    √ returns a valid RGB with the provided 3-digit HEX color with hash symbol: [color = '#fff']
    √ returns a valid RGB with the provided 6-digit HEX color: [color = 'ffffff']
    √ returns a valid RGB with the provided 6-digit HEX color with the hash symbol: [color = '#ffffff']
    √ returns an empty string when the provided value is not a string: [color = 1234]
    √ returns an empty string when the provided color is too short: [color = 'FF']
    √ returns an empty string when the provided color is too long: [color = '#fffffff']
    √ returns an empty string when the provided value is looks like HEX color string but has invalid symbols: [color = '#fffffp']
    √ returns an empty string when the provided value is invalid: [color = '*']
    √ returns an empty string when the provided value is undefined: [color = undefined]

And mockConsole:

export const mockConsole = () => {
  const consoleError = jest.spyOn(console, 'error').mockImplementationOnce(() => undefined);
  return { consoleError };
};

Prettypretty

Answer 47

A readable oneliner for rgb string to hex string:

rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')

which returns here "#0080ff".

Froth

Answer 48

The more modern and ES6 approach based on Tim Down's Answer

const hexToRgb = (hex) => {
  // Remove the # character if present
  hex = hex.replace("#", "");

  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  if (hex.length === 3) {
    hex = hex.replace(/(.)/g, "$1$1");
  }

  // Verify if the input is a valid hexadecimal color code
  const validHexRegex = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;

  if (!validHexRegex.test(hex)) {
    throw new Error("Invalid Hexadecimal Color Code.");
  }

  // Convert the hex value to decimal
  const [r, g, b] = hex.match(/[A-Fa-f0-9]{2}/g).map((value) => parseInt(value, 16));

  // Return the RGB values as an object
  return {
    r,
    g,
    b
  };
};

// Example usage
const hexCode = "#FF0000";
const rgb = hexToRgb(hexCode);
console.log(rgb); // { r: 255, g: 0, b: 0 }

Metonym

Answer 49

A clean coffeescript version of the above (thanks @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) }"

Built

Answer 50

Using combining anonymous functions and Array.map for a cleaner; more streamlined look.

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}

Palazzo

Answer 51

I found this...
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) : '';
}

Kellby

Answer 52

Here is the Javascript code to change HEX Color value to the Red, Green, Blue individually.

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}

Sallee

Answer 53

CSS Level 4 side note: Generally, the reason you'd want to be able to convert Hex to RGB is for the alpha channel, in which case you can soon do that with CSS4 by adding a trailing hex. Example: #FF8800FF or #f80f for fully transparent orange.

That aside, the code below answers both the questions in a single function, going from and to another. This accepts an optional alpha channel, supports both string an array formats, parses 3,4,6,7 character hex's, and rgb/a complete or partial strings (with exception of percent-defined rgb/a values) without a flag.

(Replace the few ES6 syntaxes if supporting IE)

In a line:

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(/,$/,'')})`);}

Readable version:

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(/,$/,'')})`;
    }
}

Usages:

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.

Caffrey

Answer 54

I made a small Javascript color class for RGB and Hex colors, this class also includes RGB and Hex validation functions. I've added the code as a snippet to this answer.

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

Iives

Answer 55

Fairly straightforward one liner. Splits the rgb by commas, ignores non numerics, converts to hex, pads a 0, and finishes off with a 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));

Decomposer

Answer 56

Short arrow functions

For those who value short arrow function.

Hex2rgb

A arrow function version of David's Answer

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

A more flexible solution that supports shortand hex or the hash #

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

Shed

Doesn't work with the hash (#ffffff). Nor with the 3 digit version with or without the hash (#fff / fff). – Shizue

Yes, I assume you strip unnecessary information beforehand. – Shed

You misspelled the "H" at second row Leon, put it in small case ;) Afterwards - it's wonderfulllllll – Dogberry

Answer 57

Wow. None of these answers handle edge cases of fractions, etc. Also the bit-shift versions don't work when r, g, b are zero.

Here is a version that can handle if r, g, b are fractional. It is useful for interpolating between colors, so I'm including that code too. But it still doesn't handle the cases where r, g, b are outside the range of 0-255

/**
 * Operates with colors.
 * @class Q.Colors
 */
 Q.Color = {
    /**
     * Get a color somewhere between startColor and endColor
     * @method toHex
     * @static
     * @param {String|Number} startColor 
     * @param {String|Number} endColor 
     * @param {String|Number} fraction 
     * @returns {String} a color as a hex string without '#' in front
     */
    toHex: function (r, g, b) {
        return [r, g, b].map(x => {
            const hex = Math.round(x).toString(16)
            return hex.length === 1 ? '0' + hex : hex
          }).join('');
    },
    /**
     * Get a color somewhere between startColor and endColor
     * @method between
     * @static
     * @param {String|Number} startColor 
     * @param {String|Number} endColor 
     * @param {String|Number} fraction 
     * @returns {String} a color as a hex string without '#' in front
     */
    between: function(startColor, endColor, fraction) {
        if (typeof startColor === 'string') {
            startColor = parseInt(startColor.replace('#', '0x'), 16);
        }
        if (typeof endColor === 'string') {
            endColor = parseInt(endColor.replace('#', '0x'), 16);
        }
        var startRed = (startColor >> 16) & 0xFF;
        var startGreen = (startColor >> 8) & 0xFF;
        var startBlue = startColor & 0xFF;
        var endRed = (endColor >> 16) & 0xFF;
        var endGreen = (endColor >> 8) & 0xFF;
        var endBlue = endColor & 0xFF;
        var newRed = startRed + fraction * (endRed - startRed);
        var newGreen = startGreen + fraction * (endGreen - startGreen);
        var newBlue = startBlue + fraction * (endBlue - startBlue);
        return Q.Color.toHex(newRed, newGreen, newBlue);
    },
    /**
     * Sets a new theme-color on the window
     * @method setWindowTheme
     * @static
     * @param {String} color in any CSS format, such as "#aabbcc"
     * @return {String} the previous color
     */
    setWindowTheme: function (color) {
        var meta = document.querySelector('meta[name="theme-color"]');
        var prevColor = null;
        if (meta) {
            prevColor = meta.getAttribute('content');
        }
        if (color) {
            if (!meta) {
                meta = document.createElement('meta');
                meta.setAttribute('name', 'theme-color');
            }
            meta.setAttribute('content', color);
        }
        return prevColor;
    },
    /**
     * Gets the current window theme color
     * @method getWindowTheme
     * @static
     * @param {String} color in any CSS format, such as "#aabbcc"
     * @return {String} the previous color
     */
    getWindowTheme: function () {
        var meta = document.querySelector('meta[name="theme-color"]');
        return meta.getAttribute('content');
    }
}

Psychoanalysis

Answer 58

I whipped up this for use with lodash. It will convert an RGB string such as "30,209,19" to its corresponding hex string "#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;
}, '#');

Jerilynjeritah

Answer 59

You can try this simple piece of code below.

For HEX to RGB

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

This will return 123,222,132

For RGB to HEX

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

This will return #7bde84

Bartolome

Answer 60

Built my own hex to RGB converter. I hope this can help someone out.

Ive used react to sandbox it.

Usage:

Install React from the official documentation or alternatively if you have npx installed globally, run npx create-react-app hex-to-rgb

import React, { Component, Fragment } from 'react';
const styles = {
  display: 'block',
  margin: '20px auto',
  input: {
    width: 170,
  },
  button: {
    margin: '0 auto'
  }
}

//  test case 1
//    #f0f
//  test case 2
//    #ff00ff

class HexToRGBColorConverter extends Component {

  state = {
    result: false,
    color: "#ff00ff",
  }
  
  hexToRgb = color => {    
    let container = [[], [], []];
    // check for shorthand hax string
    if (color.length >= 3) {
      // remove hash from string
      // convert string to array
      color = color.substring(1).split("");
      for (let key = 0; key < color.length; key++) {        
        let value = color[key];
        container[2].push(value);
        // if the length is 3 we 
        // we need to add the value 
        // to the index we just updated
        if (color.length === 3) container[2][key] += value;
      }
      
      for (let index = 0; index < color.length; index++) {
        let isEven = index % 2 === 0;
        // If index is odd an number 
        // push the value into the first
        // index in our container
        if (isEven) container[0].push(color[index]);
        // If index is even an number 
        if (!isEven) {
          // again, push the value into the
          // first index in the container
          container[0] += color[index];
          // Push the containers first index
          // into the second index of the container
          container[1].push(container[0]);
          // Flush the first index of
          // of the container 
          // before starting a new set
          container[0] = [];
        }
      }
      // Check container length
      if (container.length === 3) {
        // Remove only one element of the array
        // Starting at the array's first index
        container.splice(0, 1);
        let values = container[color.length % 2];
        return {
          r: parseInt(values[0], 16),
          g: parseInt(values[1], 16),
          b: parseInt(values[2], 16)
        }
      }
    }
    return false;
  }  

  handleOnClick = event => {
    event.preventDefault();
    const { color } = this.state;
    const state = Object.assign({}, this.state);
    state.result = this.hexToRgb(color);
    this.setState(state);
  }

  handleOnChange = event => {
    event.preventDefault();
    const { value } = event.currentTarget;
    const pattern = /^([a-zA-Z0-9])/;
    const boundaries = [3, 6];
    if (
      pattern.test(value) &&
      boundaries.includes(value.length)
    ) {
      const state = Object.assign({}, this.state);
      state.color = `#${value}`;
      this.setState(state);
    }
  }

  render() {
    const { color, result } = this.state;
    console.log('this.state ', color, result);

    return (
      <Fragment>
        <input 
          type="text" 
          onChange={this.handleOnChange} 
          style={{ ...styles, ...styles.input }} />
        <button 
          onClick={this.handleOnClick}
          style={{ ...styles, ...styles.button }}>
          Convert hex to rgba
        </button>
        { 
          !!result && 
          <div style={{ textAlign: 'center' }}>
            Converted { color } to { JSON.stringify(result) }
          </div> 
        }
      </Fragment>
    )
  }
}
export default App;

Happy Coding =)

Binford

Answer 61

In case this helps anyone, my API has functions for those conversions.

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

Indecision