2011-07-24 12 views
5

Czy można przekonwertować kolor jako taki #ff0000 na rgb?jquery # color to rgba?

#ff0000 więc konwertować do rgb(255,0,0);

Jestem całkiem pewien, że to ma być możliwe, po prostu nie wiem jak. Każdy wgląd byłby świetny!

Odpowiedz

8

Można użyć:

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

Bardzo dobrze. Czy poświęcić minutę lub 2, aby edytować i wyjaśnić, jak to działa dokładnie? Nie jestem kimś, kto po prostu "kopiuje i wkleja" ostateczny wynik. – daryl

+0

Dlaczego nie używać 'var patt =/^ # ([\ dA-F] {2}) ([\ dA-F] {2}) ([\ dA-F] {2}) $/i;'? –

6

.css("background-color") powróci rgb http://api.jquery.com/css/

oto skrzypce http://jsfiddle.net/3nigma/msRqv/1/

+0

Hmm, zamknij. Ale nie "dokładnie" tego, po co jestem. Powinienem wspomnieć, że chciałbym również móc zastosować kanał alfa do tego również. – daryl

+0

Bardzo sprytny. Następnie po prostu wykonaj '$ ('# element'). Css ('background-color'). Replace (')', ', 0.5)') replace ('rgb', 'rgba');' gdzie 0.5 jest twoim poziom alfa. – chris

1

Musisz oddzielić wszystkie trzy komponenty od definicji szesnastkowej, a następnie przekonwertować je na wartości dziesiętne. To działa:

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

Czysto pracy z ciągiem masz, może coś takiego:

var color = '#FF5500'; 

pierwsze, wyodrębnić dwie cyfry szesnastkowe dla każdy kolor:

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

Następnie konwertować je do dziesiętnych:

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

I wreszcie dostać swój ciąg rgb() wskutek:

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

I masz jako wyjście:

rgb(255, 85, 0) 
+0

Czy to działa dla wszystkich możliwych ciągów? – daryl

+2

To będzie działać tak długo, jak ciąg znaków zaczyna się od jednego bezużytecznego znaku, i ma dwie cyfry na kolor - ale jeśli nie masz dwóch cyfr na kolor, to już nie będzie działać i będzie wymagać trochę przeróbek. –