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)

Consigli per l'uso

  • 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.

Domande frequenti

Alcuni programmi di posta — in particolare certe versioni di Outlook — e i browser datati non supportano la funzione CSS `rgba()` né la trasparenza tramite valore alfa. In quegli ambienti le aree trasparenti non vengono rese correttamente e il layout si rompe. Calcolando in anticipo il valore RGB opaco fuso con lo sfondo e indicandolo come colore di ripiego, si evitano differenze di resa.

Un colore semitrasparente porta con sé sia l'informazione del colore stesso sia quella dello sfondo che traspare, quindi il risultato dipende dallo sfondo: su fondo nero appare cupo, su fondo bianco chiaro e slavato. Non è un difetto ma una proprietà della fusione alfa, ed è per questo che nel calcolo del colore di ripiego occorre sempre indicare lo sfondo reale.

In CSS il valore alfa si esprime con un decimale da 0 (del tutto trasparente) a 1 (del tutto opaco), oppure in percentuale da 0% a 100%. Questo strumento permette di regolarlo in modo intuitivo con un cursore da 0 a 100%.

Sì, in teoria è identico, ma soltanto sopra il colore di sfondo indicato. Su uno sfondo diverso l'aspetto cambia: per l'uso come colore di ripiego è quindi essenziale indicare con precisione lo sfondo della pagina in cui il colore verrà collocato.
Tool-kun

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.

Leggi le curiosità collegate

Vedi tutte le curiosità

Chi consulta questo strumento guarda anche

Convertitore di Codice Colore RGB ⇄ Hex — Gratuito, Senza Registrazione

Converti all'istante i valori RGB in decimale in codici colore esadecimali e viceversa. Pratico per CSS, strumenti di design e verifica rapida dei codici colore — gratuito, senza registrazione.

Convertitore fra modelli di colore (RGB, HSL, HSV, CMYK)

Indicate un colore con il codice esadecimale o con il selettore e ottenete contemporaneamente i valori nei quattro sistemi RGB, HSL, HSV (HSB) e CMYK.

Verifica del rapporto di contrasto (criteri WCAG)

Indicate due colori per calcolare il rapporto di contrasto secondo le WCAG (Web Content Accessibility Guidelines) e verificare la conformità ai livelli AA e AAA.

Simulatore di daltonismo (deficit della visione dei colori)

Strumento gratuito che simula in modo approssimato come viene percepito un colore da chi ha una protanopia, una deuteranopia o una tritanopia.

Raccolta di palette di colori — colori web standard e Material Design pronti da copiare

Elenco delle palette di uso più comune nel design — colori web standard, sistema cromatico Material Design, scale di grigi — con il relativo codice HEX. Basta un clic per copiarlo.

Estrai i colori da un'immagine (estrattore di colori dominanti)

Caricate un'immagine per estrarre automaticamente i colori dominanti presenti in una fotografia o in un'illustrazione. Tutta l'elaborazione avviene nel browser e l'immagine non viene inviata a un server.