2011-07-24 12 views
5

¿Es posible convertir un color como tal #ff0000 en rgb?jquery # color to rgba?

Así convierto #ff0000 a rgb(255,0,0);

Estoy bastante seguro de que esto tiene que ser posible, sólo que no sé cómo. ¡Cualquier idea sería genial!

Respuesta

8

que puede usar:

var s = "#ff0000"; 
var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/; 
var matches = patt.exec(s); 
var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");"; 
alert(rgb); 
+0

http://jsfiddle.net/Paulpro/hTSLR/ – Paulpro

+0

Muy bien. ¿Te importa tomar un minuto o 2 para editar y explicar cómo funciona esto exactamente? No soy solo para 'copiar y pegar' el resultado final. – daryl

+0

¿Por qué no utilizar 'var patt =/^ # ([\ dA-F] {2}) ([\ dA-F] {2}) ([\ dA-F] {2}) $/i;'? –

6

.css("background-color") volverá rgb http://api.jquery.com/css/

aquí es el violín http://jsfiddle.net/3nigma/msRqv/1/

+0

Hmm, cerca. Pero no es exactamente lo que busco. Debo mencionar que también querría poder aplicar el canal alfa en esto también. – daryl

+0

Muy inteligente. Entonces simplemente haga '$ ('# element'). Css ('color de fondo'). Replace (')', ', 0.5)') replace ('rgb', 'rgba');' donde 0.5 es su nivel alfa – chris

1

Tiene que separar los tres componentes de la definición Hex, luego conviértalos a decimal. Esto funciona:

function hex2rgba(x,a) { 
    var r=x.replace('#','').match(/../g),g=[],i; 
    for(i in r){g.push(parseInt(r[i],16));}g.push(a); 
    return 'rgba('+g.join()+')'; 
} 
3

puramente trabajar con la cadena que tiene, usted puede algo como esto:

var color = '#FF5500'; 

En primer lugar, extraer los dos dígitos hexadecimales para cada color:

var redHex = color.substring(1, 3); 
var greenHex = color.substring(3, 5); 
var blueHex = color.substring(5, 7); 

A continuación, convertir a decimal:

var redDec = parseInt(redHex, 16); 
var greenDec = parseInt(greenHex, 16); 
var blueDec = parseInt(blueHex, 16); 

Y, finalmente, obtener su cadena rgb() como resultado:

var colorRgb = 'rgb(' + redDec + ', ' + greenDec + ', ' + blueDec + ')'; 
console.log(colorRgb); 

y se obtiene como salida:

rgb(255, 85, 0) 
+0

¿Funcionaría para todas las cadenas posibles? – daryl

+2

Esto funcionará siempre que esas cadenas comiencen con un carácter inútil y tengan dos dígitos por color, pero si no tiene dos dígitos por color, esto ya no funcionará y necesitará un poco de reproceso. –