How to extract r, g, b, a values from CSS color?

Question

What would be the easiest way to transform

$(\'#my_element\').css(\'backgroundColor\')

to object like this:

{ r: red_value,         


        

Answer 1

Say you have the following CSS rule:

#my_element {
    background-color: rgba(100, 0, 255, 0.5);
}

Then this is how you could get an RBGA object:

var colorStr = $('#my_element').css('backgroundColor'); // "rgba(100, 0, 255, 0.5)"

// using string methods
colorStr = colorStr.slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')')); // "100, 0, 255, 0.5"
var colorArr = colorStr.split(','),
    i = colorArr.length;

while (i--)
{
    colorArr[i] = parseInt(colorArr[i], 10);
}

var colorObj = {
    r: colorArr[0],
    g: colorArr[1],
    b: colorArr[2],
    a: colorArr[3]
}