2012-07-07 22 views
7

Nella mia applicazione ho un selettore di colori che gli utenti possono utilizzare per selezionare i colori di determinati oggetti prodotti dall'applicazione. Il selettore di colori sta emettendo il colore scelto in formato RGBA. Tuttavia, ho bisogno del codice colore HTML. Devo essere in grado di convertire RGBA, senza conoscere il colore in anticipo, in HTML e usarlo come stringa in seguito. Come potrei fare questo?Converti il ​​colore RGBA nel codice colore HTML

+0

L'HTML non supporta i valori di colore semitrasparenti - a meno che l'alpha non sia al massimo o non ci si preoccupi dell'alfa, non sarà possibile ottenere un codice colore HTML equivalente a un colore RGBA. Ti riferivi invece ai valori dei colori CSS, come mostrato dai tag e dalla risposta che hai accettato? – BoltClock

+0

@BoltClock Il contesto 'canvas' ha una proprietà' globalAlpha' che è possibile utilizzare per impostare la trasparenza dell'oggetto canvas. –

risposta

13

RGBA è nativamente supportato da CSS3:

div { 
    background: rgba(200, 54, 54, 0.5); 
} 

Firefox, Safari, Chrome, IE9 e Opera browser tutto RGBA supporto. I vecchi IE non lo supportano.

Fortunatamente, è possibile specificare i colori RGBA per i browser che lo supportano e un'alternativa per i browser che non lo supportano. Controlla questo link per un ottimo howto.

Queste sono le due opzioni: - dal link -

1. ridiscendere a COLORE SOLIDO: consentire al browser di ricadere a utilizzare un colore solido, quando l'opacità non è disponibile. Il

h1 { 
    color: rgb(127, 127, 127); 
    color: rgba(0, 0, 0, 0.5); //for modern browsers only 
} 

2. ricadere AD UN PNG: Nei casi in cui si sta utilizzando la trasparenza su un background-color (anche se non su confini o testo) è possibile ripiegare ad usare un PNG con alpha canale per ottenere lo stesso effetto. Questo è meno flessibile rispetto all'uso dei CSS poiché è necessario creare un nuovo PNG per ogni livello di trasparenza richiesto, ma può essere una soluzione utile.

h1 { 
    background: transparent url(imageName.png); 
    background: rgba(0, 0, 0, 0.5) none; //for modern browsers only 
} 

Quello che sto cercando di dire è che non è necessario il codice HTML del colore, è sufficiente aggiungere la proprietà css rgba - con javascript o jquery - dopo si prende in mano il colore ed io pensi di essere fatto.

Spero che aiuti.

+0

Direi che la risposta sarebbe sì, ma rgba è supportato per gli stili in linea corretti? – Nathan

+0

@Natha, hai ragione, la risposta è sì. È solo un modo diverso per specificare un colore. ** 1. ** un valore HEX - come "" # ff0000 "' ** 2. ** un valore RGBA - come '" rgb (255,0,0, 0,5) "' ** 3. ** un nome di colore - come "" rosso "' –

+1

Internet Explorer supporta RGBA a partire dalla versione 9. – BoltClock

2

Se siete alla ricerca di una conversione effettivo (che il testo della tua domanda chiede letteralmente per) da rgb (a) in esadecimale in JavaScript:

red = green = blue = 255; 
hex = '#' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) + 
    ("0" + (blue).toString(16)).slice(-2); 

V'è, naturalmente, non alpha equivalente, ma è possibile impostare l'opacità (e/o i valori specifici del browser -opacity per il supporto del browser precedente).

Problemi correlati