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

To convert rgba string to object with keys:

convertRGBtoOBJ(colorString)
{
  const rgbKeys = ['r', 'g', 'b', 'a'];
  let rgbObj = {};
  let color = colorString.replace(/^rgba?\(|\s+|\)$/g,'').split(',');

  for (let i in rgbKeys)
    rgbObj[rgbKeys[i]] = color[i] || 1;

  return rgbObj;
}

console.log(convertRGBtoOBJ('rgba(23,54,230,0.5)'))

/*
  Object {r: "23", g: "54", b: "230", a: 0.5}
*/