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?

Solution 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"]

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

Solution 3

You can set a CSS color using rgb also, such as this:

background-color: rgb(0, 70, 255);

It is valid CSS, don't worry.

---

Edit: See nickf answer for a nice way to convert it if you absolutely need to.

Solution 4

I found another function awhile back (by R0bb13). It doesn't have the regex, so I had to borrow it from nickf to make it work properly. I'm only posting it because it's an interesting method that doesn't use an if statement or a loop to give you a result. Also this script returns the hex value with a # (It was needed by the Farbtastic plugin I was using at the time)

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

Note: The hex result from nickf's script should be 0046ff and not 0070ff, but no big deal :P

Update, another better alternative method:

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Solution 5

With JQuery..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};

View more solutions

Comments

[lpfavreau]

+1 nice implementation with the the regex match, although I wonder if there's a constant space after the comma across all browsers

[Alexander Hermann]

Well, this is the actual answer, thanks. However for me Ipfavreau's answer worked, since I'm just posting the background-color to create a css file with php.

[Matthew Crumley]

Wouldn't parts be ["rgb(0, 70, 255)","0","70","255"]?

[KyleFarris]

I love StackOverflow. Thanks, didn't want to figure this out myself. :-P

[Chance]

+1 - if the color has to be restored on some web page later on, then why do any work converting at all :)

[Marco Demaio]

The solution provided at the link is WRONG because converts "rgb(0, 0, 0)" into "#0" instead of "#000000", the reason is that the << operator does not shift bits if the value to shift is a zero.

[Marco Demaio]

I would rather move function hex(x) out of the scope of fucntion rgb2hex for performance improvement. Anyway it's a nice clean solution, thanks for sharing. Have a look at mine below, I would like your opinion.

[Naftali]

@nickf this doesnt seem to work in IE parts always comes back as null and has an error. i made a question on it: stackoverflow.com/questions/5516344/…

[JeffB]

@Neal or anyone else having that issue: In IE, jquery 1.4.4 returns the hex code instead of the rgb string. So parts is null because the regex doesn't match, which causes an error when parts is used. I had to add a check before the delete and return the original string if parts is null.

[fortuneRice]

@nickf this is great; I'm trying to modify the regex to handle both rgb and rgba depending which one I get. Any hints? Thanks.

[fortuneRice]

I made this a question of its own stackoverflow.com/questions/7543818/…

[fortuneRice]

@nickf forgot to thank you for that from before. btw I added /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0|0\.\d+))?\)$/ the |0 near the end to check when alpha is just 0 and not 0.x

[nickf]

@fortuneRice i think it should be (1|0|0?\.d+), since .3 is valid.

[Derek 朕會功夫]

ffee66 and fb0 are not valid colors in CSS. Maybe you should try it first.

[oriadam]

Nowadays we don't even need jQuery for mapping. Here is the vanilla version: var RGBtoHEX = function(color) { return "#"+(color.match(/\b(\d+)\b/g).map(function(digit){ return ('0' + parseInt(digit).toString(16)).slice(-2) })).join(''); };