Da RGBA a RGB (fusione con il colore di sfondo)
Indicate un colore di primo piano semitrasparente (RGBA) e un colore di sfondo per calcolare, tramite fusione alfa, il colore RGB opaco che ne risulta. Utile per creare colori di ripiego negli ambienti che non supportano rgba().
La formula della fusione alfa
La conversione da RGBA a RGB opaco si chiama «fusione alfa» (operatore over): la formula seguente si applica in modo indipendente ai canali R, G e B e il risultato viene infine arrotondato all'intero più vicino.
| Formula | result = foreground × alpha + background × (1 − alpha) |
|---|
Cosa significa convertire da RGBA a RGB
Un colore RGBA semitrasparente funziona perfettamente nei CSS moderni e negli strumenti di design, ma non viene reso come previsto negli ambienti incapaci di interpretare la trasparenza, come molti client di posta e i motori di rendering più datati. Questo strumento riceve un colore di primo piano (RGBA) e un colore di sfondo, e calcola il colore RGB opaco e fuso che sarebbe effettivamente visibile una volta composti i due — restituendo il risultato in un formato utilizzabile direttamente come ripiego negli ambienti privi di supporto alla trasparenza.
Il calcolo si basa su un metodo di composizione detto «fusione alfa» (operatore over): ogni canale (R, G e B) del colore di primo piano viene moltiplicato per il valore alfa, il canale corrispondente del colore di sfondo viene moltiplicato per (1 − valore alfa), e i due prodotti vengono sommati. Poiché questa formula si applica in modo indipendente a ciascuno dei tre canali, lo stesso colore semitrasparente produce un risultato completamente diverso a seconda dello sfondo su cui viene collocato. Nel preparare un colore di ripiego è quindi essenziale indicare esattamente lo sfondo su cui l'elemento verrà davvero visualizzato.
Come usare lo strumento da RGBA a RGB
- Indicare il colore di primo piano (semitrasparente) Sceglietelo con il selettore colore, oppure incollate un codice HEX già verificato in uno strumento di design.
- Regolare l'opacità (valore alfa) Impostate la trasparenza con il cursore da 0 a 100%, facendola corrispondere al valore effettivamente usato nel vostro CSS.
- Indicare il colore di sfondo Usate i preset bianco o nero, oppure inserite un valore personalizzato vicino allo sfondo reale della vostra pagina.
- Verificare il risultato della fusione (RGB opaco) Il codice HEX e la notazione RGB vengono calcolati all'istante, insieme a un confronto diretto di come appare il colore su sfondo bianco e su sfondo nero.
- Incollare il valore RGB calcolato come ripiego Copiatelo direttamente in proprietà come `background-color`, dove `rgba()` non è supportato.
Consigli per sfruttarlo al meglio
- I modelli HTML per la posta elettronica e i browser datati non sempre supportano `rgba()` e `opacity`: indicare accanto, come ripiego per `background-color`, il valore RGB opaco calcolato qui è la scelta più sicura.
- Sia il colore di primo piano sia quello di sfondo si possono scegliere con il selettore o digitando il codice HEX, così da incollare esattamente la tinta verificata nel vostro strumento di design.
- L'opacità (valore alfa) si regola con un cursore da 0 a 100%. A 0% il colore è del tutto trasparente, cioè coincide con lo sfondo; a 100% è del tutto opaco e coincide con il primo piano.
- I preset bianco e nero per lo sfondo ci sono perché sono i due casi più frequenti nella pratica, corrispondenti ai temi chiaro e scuro. Inserendo un colore vicino a quello reale della pagina si ottiene un colore di ripiego più preciso.
Quando torna utile un colore di ripiego da RGBA a RGB
Colori di ripiego per lo sfondo nelle e-mail HTML
Per i client di posta che non interpretano `rgba()` — tra cui alcune versioni di Outlook — potete indicare in anticipo un valore RGB opaco già calcolato come `background-color`.
Valori di colore per browser datati o esportazione in PDF
Calcolate in anticipo il colore da passare a motori di rendering privi di supporto alla trasparenza, o a strumenti di esportazione PDF che ignorano i valori alfa dei CSS.
Verificare le combinazioni cromatiche in una bozza di design
Scoprite con un valore esatto quale colore risulta dalla sovrapposizione di elementi semitrasparenti, senza dover aprire Photoshop o un altro programma.
Controllare l'aspetto sia in modalità chiara sia in modalità scura
Usate i preset di sfondo bianco e nero per confrontare in un colpo solo come cambia lo stesso colore semitrasparente nei due temi.
Creare una variante semitrasparente fissa di un colore del brand
Esportate un colore del brand con un determinato valore alfa come colore finale e fisso su uno sfondo specifico, pronto da aggiungere a una guida di stile del brand.
Glossario
- RGBA
- Un formato di colore che aggiunge un canale alfa — che rappresenta l'opacità — ai tre canali primari rosso, verde e blu. In CSS si scrive ad esempio `rgba(255, 0, 0, 0.5)`.
- Valore alfa
- Un numero che esprime l'opacità di un colore, indicato come decimale da 0 (del tutto trasparente) a 1 (del tutto opaco), o in modo equivalente come percentuale. Più basso è il valore, più lo sfondo traspare.
- Fusione alfa
- Il calcolo che mescola un colore di primo piano semitrasparente con un colore di sfondo, in una proporzione determinata dal valore alfa, per produrre un unico colore opaco. Chiamato anche operatore over, è la base della formula usata da questo strumento.
- Codice colore esadecimale (HEX)
- Una rappresentazione dei valori dei canali RGB scritta in esadecimale nella forma `#RRGGBB`. Uno dei modi più diffusi per indicare un colore nei CSS e negli strumenti di design.
- Colore di ripiego
- Un valore alternativo preparato in anticipo per i casi in cui la rappresentazione che si vorrebbe davvero usare — in questo caso un colore semitrasparente — non venga interpretata correttamente in un determinato ambiente.
- Operatore over
- La forma più elementare di fusione alfa, che consiste nel collocare un colore di primo piano «sopra» un colore di sfondo. È esattamente la formula implementata da questo strumento.
Domande frequenti
A proposito — le origini della fusione alfa
Il concetto di fusione alfa (alpha compositing) viene fatto risalire all'articolo «Compositing Digital Images» pubblicato nel 1984 da Thomas Porter e Tom Duff nell'ambito della computer grafica. Fino ad allora la composizione di primo piano e sfondo trattava di norma la sola informazione cromatica; quell'articolo sistematizzò l'uso di un quarto canale dedicato all'opacità — il canale alfa — accanto ai colori, e da lì l'idea divenne lo standard della grafica digitale e dei programmi di fotoritocco.
Oggi quasi tutte le tecnologie che gestiscono la trasparenza si fondano su questo principio: i formati PNG e SVG, le proprietà CSS `rgba()` e `opacity`, le funzioni a livelli dei programmi di disegno. Il metodo di composizione più elementare, chiamato «operatore over» — sovrapporre il primo piano allo sfondo — è esattamente la formula usata da questo strumento.
Il problema della compatibilità con i vecchi programmi di posta e con i browser datati, però, non è ancora del tutto superato. Le e-mail in HTML soffrono in modo particolare dei limiti dei motori di rendering e spesso non possono usare le trasparenze moderne dei CSS: predisporre un valore di ripiego già convertito in colore opaco resta perciò una tecnica pratica molto diffusa.