2011-07-24 23 views
5

Rengi #ff0000 gibi rgb'ye dönüştürmek mümkün mü?jquery # color to rgba?

Bu yüzden bu mümkün olmalı eminim #ff0000

rgb(255,0,0); dönüştürmek, sadece bilmiyorum. Herhangi bir anlayış harika olurdu!

cevap

8

Sen kullanabilirsiniz:

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

Çok iyi. Bunun tam olarak nasıl çalıştığını düzenlemek ve açıklamak için bir dakika ya da 2'ye bakmaya ne dersiniz? Sadece son sonucu kopyalamak ve yapıştırmak için değilim. – daryl

+0

Neden "var patt =/^ # ([\ dA-F] {2}) ([\ dA-F] {2}) ([\ dA-F] {2}) $/i;'? –

6

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

Ne Bu algoritma hakkında keman http://jsfiddle.net/3nigma/msRqv/1/

+0

Hmm, close. Ama 'tam olarak' peşindeyim. Ayrıca, alfa kanalını da bunun üzerine uygulamak isteyebileceğimi belirtmeliyim. – daryl

+0

Çok zekice. Sonra sadece $ '(' # element ') yapın css (' arka plan-renk '). (') ',', 0,5 '' değiştirin. Değiştirin ('rgb', 'rgba'); alfa seviyesi. – chris

1

Üç bileşenin tümünü Hex tanımından ayırmanız ve ardından onluk değerlere dönüştürmeniz gerekir. Bu çalışır:

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

Tamamen sahip dize ile çalışan, yapabilirsin böyle bir şey:

var color = '#FF5500'; 

Birincisi, özü iki onaltılık basamak için her renk:

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

Sonra ondalık çevirebiliriz:

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

Ve son olarak, sonuç olarak rgb() dize olsun:

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

Ve çıktı olarak almak:

rgb(255, 85, 0) 
+0

Olası tüm dizeler için işe yarar mı? – daryl

+2

Bu dize işe yaramaz bir karakterle başladığında ve renk başına iki basamağa sahip olduğu sürece çalışacaktır - ancak renk başına iki basamağa sahip değilseniz, bu artık çalışmayacaktır ve biraz yeniden çalışmaya gerek duyar. –