RGBA
RGBA è l'acronimo di Red Green Blue Alpha cioè: rosso, verde, blu e Alfa. Mentre talvolta viene descritto come uno spazio di colori, attualmente è ritenuto semplicemente come un modello di colori RGB con informazioni extra. Il colore è RGB e può essere di qualsiasi spazio di colori RGB, ma un valore alfa integrale inventato da Catmull e Smith tra il 1971 e il 1972 abilita il canale alfa. Il canale è stato chiamato alfa per la lettera greca che nella formula interpolazione lineare classica è: αA + (1-α)B[1].
Il termine non definisce quale spazio colore RGB viene utilizzato. Inoltre, non indica se i colori sono o meno pre-moltiplicati per il valore alfa e, se lo sono, non indica in quale spazio colore è stata eseguita la pre-moltiplicazione. Ciò significa che sono necessarie più informazioni oltre al semplice "RGBA" per determinare come gestire un'immagine.
In alcuni contesti l'abbreviazione "RGBA" indica un layout di memoria specifico (di seguito denominato RGBA8888), con altri termini come "BGRA" utilizzati per alternative. In altri contesti "RGBA" indica qualsiasi layout[2].
Descrizione
[modifica | modifica wikitesto]Nella computer grafica, i pixel che codificano le informazioni sullo spazio colore RGBA devono essere archiviati nella memoria del computer (o nei file su disco). Nella maggior parte dei casi vengono utilizzati quattro blocchi di memoria adiacenti di uguali dimensioni, uno per ciascun canale, e uno 0 in un canale indica il colore nero o l'alfa trasparente, mentre tutti i bit 1 indica l'alfa bianco o completamente opaco. Il formato di gran lunga più comune è quello che memorizza 8 bit (un byte) per ciascun canale, ovvero 32 bit per ogni pixel[3].
L'ordine di questi quattro byte in memoria può essere diverso, il che può creare confusione quando vengono scambiati i dati dell'immagine. Queste codifiche sono spesso indicate dalle quattro lettere in un certo ordine (es. RGBA, ARGB, ecc.). L'interpretazione di questi mnemonici di 4 lettere non è ben stabilita. Esistono due modi tipici per comprendere un mnemonico come "RGBA"[4]:
- Nello schema dell'ordine dei byte per "RGBA" si intende un byte R, seguito da un byte G, seguito da un byte B e seguito da un byte A. Questo schema è comunemente usato per descrivere formati di file o protocolli di rete, che sono entrambi orientati ai byte.
- Nello schema dell'ordine delle parole "RGBA" è inteso rappresentare una parola completa a 32 bit, dove R è più significativo di G, che è più significativo di B, che è più significativo di A.
In un sistema big-endian i due schemi sono equivalenti. Questo non è il caso di un sistema little-endian, in cui i due mnemonici sono l'uno inverso dell'altro[5]. Pertanto, per non essere ambigui, è importante indicare quale ordinamento viene utilizzato quando si fa riferimento alla codifica. Questo articolo utilizzerà uno schema che ha una certa popolarità, che consiste nell'aggiungere il suffisso "8888" per indicare se si tratta di 4 unità a 8 bit o "32" se si tratta di un'unità a 32 bit[6][7].
Little-endian | big-endian | |
---|---|---|
RGBA8888 | ABGR32 | RGBA32 |
ARGB32 | BGRA8888 | ARGB8888 |
RGBA32 | ABGR8888 | RGBA8888 |
RGBA8888
[modifica | modifica wikitesto]In OpenGL e Portable Network Graphics (PNG), viene utilizzato l'ordine dei byte RGBA, in cui i colori sono archiviati in memoria in modo tale che R si trovi all'indirizzo più basso, G dopo di esso, B dopo e A per ultimo. Su un'architettura little endian questo equivale a ABGR32[8][9].
In molti sistemi, quando ci sono più di 8 bit per canale (come 16 bit o in virgola mobile), i canali vengono memorizzati nell'ordine RGBA, anche se i canali a 8 bit sono memorizzati in un altro ordine[10].
ARGB32
[modifica | modifica wikitesto]I canali sono disposti in memoria in modo tale che un singolo intero senza segno a 32 bit abbia il campione alfa negli 8 bit più alti, seguito dal campione rosso, verde e infine dal campione blu negli 8 bit più bassi[11][12]:
I valori ARGB sono in genere espressi utilizzando 8 cifre esadecimali, con ciascuna coppia di cifre esadecimali che rappresenta rispettivamente i valori del canale Alfa, Rosso, Verde e Blu. Ad esempio 80FFFF00
rappresenta il 50,2% di giallo opaco (non pre-moltiplicato). Il valore esadecimale80
, che è 128 in decimale, rappresenta un valore alfa del 50,2% perché 128 è circa il 50,2% del valore massimo di 255 (FF esadecimale); per continuare a decifrare il valore80FFFF00
, il primo FF
rappresenta il valore massimo che il rosso può avere; il secondoFF
è come il precedente ma per il verde; il finale 00
rappresenta il valore minimo che il blu può avere. Di conseguenza, rosso + verde produce giallo. Nei casi in cui non viene utilizzata l'alfa, questa può essere abbreviata a 6 cifreRRGGBB
, questo è il motivo per cui è stato scelto di inserire l'alfa nei bit superiori. A seconda del contesto, prima delle cifre esadecimali viene anteposto 0x
oppure un simbolo numerico (#)[13].
Questo layout è diventato popolare quando è stato introdotto il colore a 24 bit (e RGBA a 32 bit) sui personal computer. All'epoca era molto più veloce e più facile per i programmi manipolare un'unità a 32 bit rispetto a quattro unità a 8 bit.
Sui sistemi little-endian questo è equivalente all'ordine dei byte BGRA. Sui sistemi big-endian, questo è equivalente all'ordine dei byte ARGB[14].
RGBA32
[modifica | modifica wikitesto]In alcuni software originati su macchine big-endian i colori erano memorizzati in 32 bit simili a ARGB32, ma con l'alfa negli 8 bit nella parte inferiore anziché in alto. Ad esempio 808000FF
sarebbe Rosso e Verde: 50,2%, Blu:0% e Alfa:100%, un marrone[15][16].
Esempi
[modifica | modifica wikitesto]CSS3[17]
[modifica | modifica wikitesto]div.box { background-color: rgba(255, 255, 255, 0.5) }
SVG[18]
[modifica | modifica wikitesto]<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
Canvas HTML5[19]
[modifica | modifica wikitesto]ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255, 165, 0, 1)';
WebGL[20]
[modifica | modifica wikitesto]gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
Note
[modifica | modifica wikitesto]- ^ (EN) Alvy Ray Smith: RGBA, the birth of compositing & the founding of Pixar, su fxguide, 5 luglio 2012. URL consultato il 3 ottobre 2021.
- ^ About: RGBA, su dbpedia.org. URL consultato il 3 ottobre 2021.
- ^ (EN) William Craig ~ 3 minutes to read, Explanation of CSS RGBA Colors | Guide, su WebFX Blog. URL consultato il 3 ottobre 2021.
- ^ RGBA Color Picker, su rgbacolorpicker.com. URL consultato il 3 ottobre 2021.
- ^ unicode — Differenza tra ordine Big Endian e byte Little Endian, su it-swarm.it. URL consultato il 3 ottobre 2021 (archiviato dall'url originale il 3 ottobre 2021).
- ^ CSS RGB and RGBA Colors, su w3schools.com. URL consultato il 3 ottobre 2021.
- ^ Karl-Bridge-Microsoft, Uso di contrassegni per l'ordine dei byte - Win32 apps, su docs.microsoft.com. URL consultato il 3 ottobre 2021.
- ^ Portable Network Graphics (PNG) Specification (Second Edition), su w3.org. URL consultato il 3 ottobre 2021.
- ^ Image Format - OpenGL Wiki, su khronos.org. URL consultato il 3 ottobre 2021.
- ^ FabGL: RGBA8888 Struct Reference, su fabglib.org. URL consultato il 3 ottobre 2021.
- ^ gregli-msft, Enumerazione Color e funzioni ColorFade, ColorValue e RGBA in Power Apps - Power Apps, su docs.microsoft.com. URL consultato il 3 ottobre 2021.
- ^ (EN) Unity Technologies, Unity - Scripting API: TextureFormat.RGBA32, su docs.unity3d.com. URL consultato il 3 ottobre 2021.
- ^ CSS rgba() function, su w3schools.com. URL consultato il 3 ottobre 2021.
- ^ (EN) Ryan Boudreaux in Web Designer, in Enterprise Software on July 25, 2012, 5:28 Am Pst, How to use the RGBa color model, su TechRepublic. URL consultato il 3 ottobre 2021.
- ^ Struct Rgba32, su docs.sixlabors.com. URL consultato il 3 ottobre 2021.
- ^ Rgba32 Struct | Qt Quick Ultralite Platform Porting Guide 1.9, su doc.qt.io. URL consultato il 3 ottobre 2021.
- ^ CSS3: definire i colori con RGB e RGBa, su MRW.it. URL consultato il 3 ottobre 2021.
- ^ (EN) Fills and Strokes - SVG: Scalable Vector Graphics | MDN, su developer.mozilla.org. URL consultato il 3 ottobre 2021.
- ^ HTML canvas globalAlpha Property, su w3schools.com. URL consultato il 3 ottobre 2021.
- ^ (EN) WebGLRenderingContext.texImage2D() - Web APIs | MDN, su developer.mozilla.org. URL consultato il 3 ottobre 2021.