javascript - poner - Cómo extraer r, g, b, a valores del color CSS?

tabla de codigo de colores

Question

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

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

para objetar así:

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

?

Answer 1

Harías 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 2

Supongamos que tiene la siguiente regla de CSS:

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

Entonces así es como puedes obtener 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

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

Pruébelo 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 incluso de una manera más simple, solo 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 4

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 5

Para convertir cadena de rgba a objeto con claves:

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

Answer 6

Como se ve aquí :

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 número entero usando parseInt con base 16.