Background-color hex to JavaScript variable

Question

I'm kind of new to JavaScript and jQuery and now I'm facing a problem:

I need to post some data to PHP and one bit of the data needs to be the background color hex of div X.

jQuery has the css("background-color") function and with it I can get RGB value of the background into a JavaScript variable.

The CSS function seems to return a string like this rgb(0, 70, 255).

I couldn't find any way to get hex of the background-color (even though it's set as hex in CSS).

So it seems like I need to convert it. I found a function for converting RGB to hex, but it needs to be called with three different variables, r, g and b. So I would need to parse the string rgb(x,xx,xxx) into var r=x; var g=xx; var b=xxx; somehow.

I tried to google parsing strings with JavaScript, but I didn't really understand the regular expressions thing.

Is there a way to get the background-color of div as hex, or can the string be converted into 3 different variables?

Answer 1

try this out:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.  var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]  delete (parts[0]); for (var i = 1; i <= 3; ++i) {     parts[i] = parseInt(parts[i]).toString(16);     if (parts[i].length == 1) parts[i] = '0' + parts[i]; }  var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF" 

In response to the question in the comments below:

I'm trying to modify the regex to handle both rgb and rgba depending which one I get. Any hints? Thanks.

I'm not exactly sure if it makes sense in the context of this question (since you can't represent an rgba color in hex), but I guess there could be other uses. Anyway, you could change the regex to be like this:

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/ 

Example output:

var d = document.createElement('div'); d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';  /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);  // ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"] 

Answer 2

If you have jQuery available, this is the super-compact version that I just came up with.

 var RGBtoHEX = function(color) {   return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){     return ('0' + parseInt(digit).toString(16)).slice(-2)   }).join(''); };