cómo extraer r, g, b, a partir de los valores de color CSS?

Question

¿Cuál sería la forma más fácil de transformar

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

al objeto como éste:

{ r: red_value, g: green_value, b: blue_value, a: alpha_value } 

?

Answer 1

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

Inténtelo aquí http://jsbin.com/uhawa4

Editar:

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

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

o forma aún más sencilla, simplemente apuntando a los números

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

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

Answer 2

Digamos que tiene la siguiente regla CSS:

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

Entonces así es como se podría conseguir un objeto RBGA:

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

Answer 3

Como se ve 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} 

Este script básicamente toma cada par de colores de su código hexcolor (por ejemplo # F0556A) y lo cambia a un teger usando parseInt con base 16.

Answer 4

Se podría hacer algo como:

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

Bastante simple :)

Answer 5

Más 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); 

Answer 6

Convertir cadena RGBA de oponerse con teclas:

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