Comment extraire les valeurs r, g, b, a de la couleur CSS?

Question

Quelle serait la meilleure façon de transformer

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

à objet comme ceci:

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

Essayez ici http://jsbin.com/uhawa4

Modifier:

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

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

ou encore plus simple moyen, visant juste au nombre

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

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

Answer 2

Supposons que vous avez la règle CSS suivante:

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

Ensuite, voici comment vous pourriez obtenir un objet 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

Comme on le voit 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} 

Ce script prend fondamentalement chaque paire de couleurs de votre code hexcolor (par exemple # F0556A) et le commute à un dans teger utilisant parseInt avec base 16.

Answer 4

Vous feriez quelque chose comme:

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

Assez simple :)

Answer 5

Plus 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

Pour convertir la chaîne rgba à l'objet avec les touches:

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