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, g: green_value, b: blue_value, a: alpha_value }

?

score 27 · Accepted Answer · 2010-10-26T05:48:37.100

27

var c = $('body').css('background-color');
var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

Try it here http://jsbin.com/uhawa4

Edit :

var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

or even simpler way, just aiming at numbers

var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);

for(var i in rgb) {
  console.log(rgb[i]);
}

edited Oct 26 '10 at 05:48

answered Sep 20 '10 at 13:42

Thanks ! This is pretty close to what I was looking for :) – Misha Moroshko Sep 20 '10 at 13:57
7

Replace `var rgb = c.match(/\d+/g);` with `var rgb = c.match(/[.?\d]+/g);` in order to match floating point numbers for alpha in rgba strings correctly such as `rgba(60,4,2,0.3)` – Alfred Waligo Sep 29 '17 at 15:18

score 2 · Answer 2 · edited Dec 09 '17 at 16:56

2

As seen here:

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}

This script basically takes each color pair from your hexcolor code (for example #F0556A) and switches it to a integer using parseInt with base 16 .

edited Dec 09 '17 at 16:56

nycynik

7,371
8
62
87

answered Sep 20 '10 at 13:31

Rakward

1,657
2
18
24

2

It's good form to archive the important parts of links in your answer, so that it doesn't lose most of its value if the link dies. – underscore_d Dec 31 '16 at 00:52

score 2 · Answer 3 · answered Sep 20 '10 at 13:39

2

You would do something like:

$.fn.ToRgb = function()
{
    if(this.charAt(0) == "#"){this = this.substring(1,7);} //remove the #
    return {
        R : parseInt(this.substring(0,2) ,16),
        G : parseInt(this.substring(2,4) ,16),
        B : parseInt(this.substring(4,6) ,16),
    }
}

RGB = $('#my_element').css('backgroundColor').ToRgb();


/*
   * console.log(rgb) =>
   * {
   *   R: X
   *   G: X
   *   B: X 
   * }
*/

Pretty simple :)

answered Sep 20 '10 at 13:39

RobertPitt

56,863
21
114
161

I see that `$('#my_element').css('backgroundColor')` always returns something like `rgb(123, 87, 92)` or `rgba(123, 87, 92, 0.7)`. Can it return also things like `#123456` or `123456` ? – Misha Moroshko Sep 20 '10 at 13:44
This was not specifically asked for – RobertPitt Sep 20 '10 at 13:48
@Robert - it was implied that the input would be something like `rgba(...)` since a simple hex value like `#6400FF` cannot express opacity. – Matt Ball Sep 20 '10 at 13:54
Which browser does this work in out of interest? I always forget which ones return things of the form "rgb(a,b,c)" and what might return other forms... – Chris Sep 20 '10 at 13:57
this should be cross-browser friendly. – RobertPitt Sep 20 '10 at 13:59

Ali Mousavi · Answer 4 · 2017-06-23T15:27:10.493

2

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

edited Jun 23 '17 at 15:27

answered Jun 23 '17 at 15:21

Ali Mousavi

855
7
15

Matt Ball · Answer 5 · 2010-09-20T13:40:58.773

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

score 1 · Answer 6 · answered Feb 13 '20 at 14:13

Simple function to extract the RGB numeric values

function extractRgb (css) {
  return css.match(/[0-9.]+/gi)
}
console.log(extractRgb('rgb(255, 255, 255)'))
console.log(extractRgb('rgba(255, 255, 255, 0.7)'))

score 0 · Answer 7 · answered Mar 10 '14 at 23:21

More simple:

 //javascript code
 var color = $('#my_element').css('backgroundColor');
 var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(color);
  var r = rgb[1],
      g = rgb[2],
      b = rgb[3];
  console.log('Red  :' + r);
  console.log('Green:' + g);
  console.log('Blue :' + b);

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

7 Answers7

Linked