I colori

Sintesi additiva e sottrattiva

Quando la luce colpisce un oggetto una parte viene assorbita dall'oggetto stesso ed una parte viene riflessa e raggiunge il nostro occhio. Questo percepisce le differenti lunghezza d'onda che compongono il fascio di luce come diversi colori.

Quando vediamo un oggetto bianco è perché questo ha riflesso tutte le lunghezze d'onda che compongono la luce le quali si sono mescolate e, a causa di un fenomeno detto sintesi additiva, hanno generato il colore bianco.

Un perfetto esempio di questo fenomeno è una girandola con sette spicchi dei colori dell'arcobaleno: quando la girandola è ferma i diversi colori sono riflessi separatamente, ma quando gira i colori riflessi si mescolano e noi vediamo la girandola come un disco bianco.

Per lo stesso fenomeno un insieme di puntini non visibili ad occhio nudo di colore rosso e giallo appaiono come un'area arancione. Questo principio veniva usato dai pittori puntinisti nell'Ottocento e viene usato oggi nei nostri monitor in cui il colore di ogni pixel è formato dalla mescolanza additiva dei colori di tre subpixel molto piccoli e vicini.

L'occhio umano è in grado di distinguere i colori grazie a dei fotorecettori detti coni, ognuno deputato alla visione di uno specifico colore: il rosso, il verde e il blu (da cui la sigla RGB red – green – blue) che sono detti colori additivi primari.

Ad esempio percepiamo il colore giallo quando sono eccitati contemporaneamente i coni sensibili al rosso e al verde, il magenta quando sono eccitati quelli sensibili al rosso e al blu, il ciano quando sono eccitati i coni sensibili al blu e al verde. Giallo, magenta e ciano sono i tre colori primari della sintesi sottrattiva.

Per capire la sintesi sottrattiva supponiamo di mescolare ad un po’ di panna montata dei coloranti alimentari. Se aggiungiamo il giallo, dalla luce bianca riflessa dalla panna abbiamo sottratto la luce verde e quella blu, se aggiungiamo il magenta abbiamo sottratto la luce gialla e quella blu e così via. Se aggiungiamo i tre colori primari (giallo, magenta e ciano) contemporaneamente verranno sottratte tutte le componenti dello spettro visibile e non sarà riflessa alcuna luce, in altre parole la panna diventerà nera (in realtà diventerà color bistro, cioè un marrone molto scuro, perché è difficile che i pigmenti siano così puri da produrre il nero).

I colori sottrattivi e i colori additivi sono complementari. Ogni coppia di colori sottrattivi crea un colore additivo e viceversa.

Gli attributi del colore

Ciascun colore è costituito da tre variabili:

• Tonalità (hue): è ciò che ci permette di definire un colore come rosso piuttosto che verde, dipende dalla lunghezza dell'onda della radiazione luminosa
• Luminosità (brightness): indica la quantità di energia luminosa che è riflessa da un colore, in altri termini la quantità di bianco o di nero presente
• Saturazione (saturation): esprime il suo grado di purezza. un colore saturo è privo di mescolanza con il suo complementare, se, al contrario è presente, il colore sarà meno saturo. Un colore desaturato al massimo diventerà grigio

I colori sui nostri monitor

Il numero totale di colori che può essere visualizzato da un moderno schermo di computer è di oltre 16 milioni (2 elevato alla potenza di 24), ma non è così per quelli un po' più datati. Ad esempio, alcuni schermi supportano solo immagini a 16-bit ed altri solo immagini a 8-bit, cioè solo 256 colori.

Il numero di bit per canale (rosso – verde – blu) nell'immagine determina la "profondità di colore" della stessa.

Nelle immagini a 1 bit per pixel, ciascun pixel può visualizzare solo uno dei due colori bianco e nero (2 colori per ogni bit).

Nelle immagini a 2 bit per pixel, ciascun pixel può visualizzare il bianco il nero e due grigi (4 colori per ogni bit) 2².

Nelle immagini a 8 bit per pixel, ciascun pixel può visualizzare una di 256 sfumature di uno stesso colore (da 0 a 255) 2⁸.

Nelle immagini a 16 bit, ciascun pixel può visualizzare uno dei 65.536 colori (216 colori per ogni bit) 2¹⁶.

Alcune immagini riproducono il colore per combinazione di più canali, ognuno definito da 8 bit di informazioni, cioè 256 colori. Nelle immagini a 24 bit (dette true-color o RGB) ciascun pixel può visualizzare uno dei 16,8 milioni di colori (224 colori per ogni bit) 2⁸ per 3 cioè 2²⁴.

Con questa profondità si usano 8 bit per rappresentare il rosso, 8 bit per rappresentare il blu ed 8 bit per rappresentare il verde.

I 2⁸ = 256 livelli d'intensità per ciascun canale si combinano per produrre un totale di 16.777.216 colori (256 × 256 × 256).

Esistono anche le immagini a 32 bit che sono come le true-color con in più 8 bit che servono per rappresentare la trasparenza.

Con una profondità di colore = N si possono ottenere 2^N colori diversi.

I colori nei CSS

Possiamo esprimere un colore in quattro modi: con la sua keyword (red, blue, green...), con il suo valore RGB o RGBA, con il suo valore esadecimale o con il suo valore HSL o HSLA (che io onestamente non ho mai utilizzato nè mai visto utilizzare).

I colori esprimibili con una keyword sono: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. In realtà i browser moderni ne riconoscono molti di più.

Esiste anche il colore "transparent" che equivale alla notazione RGBA (0,0,0,0).

La notazione RGB si basa sulla sintesi additiva di Red, Green e Blue, specificando per ciascuno un valore numerico compreso tra 0 e 255 (2⁸ cioè 256 come visto sopra).

Perciò un valore RGB 255,0,0 indicherà il colore rosso, 0,255,0 indicherà il colore verde, 0,0,255 indicherà il colore blu.

Un valore RGB 0,0,0, indicherà il nero cioè l'assenza di colore ed un valore 255,255,255 indicherà il bianco cioè la presenza di tutti i colori.

Ci possono quindi essere 16.777.216 gradazioni intermedie (256 x 256 x 256).

E' anche possibile indicare i valori RGB in percentuale (100%,0%,0% per il rosso e così via).

Possiamo intuire quale colore è rappresentato da un valore RGB guardando la proporzione fra i tre componenti, ad esempio un valore RGB con i tre colori più o meno nella stessa quantità sarà sicuramente un grigio.

La notazione RGBA aggiunge un ultimo valore che indica la trasparenza (da 0 a 1).

Un colore espresso in notazione RGB è facilmente convertibile in esadecimale. Prendiamo ad esempio il colore rosso che in notazione esadecimale si esprime con #FF0000. Possiamo pensare ad un codice esadecimale come una espressione del tipo #RRGGBB dove quindi i primi due caratteri rappresentano il rosso, i due intermedi rappresentano il verde e gli ultimi due rappresentano il blu.

Solo che i tre valori da 0 a 255 non sono espressi con il sistema decimale (cifre da 0 a 9) ma con il sistema esadecimale (cifre da 0 a 9 + lettere dalla a alla f dove a vale 10, b vale 11 e così via). E' come se contassimo con 16 dita anzichè con 10!

Perciò nel sistema esadecimale il valore minimo di un colore è 0 mentre il valore massimo è FF (case-insensitive). Il colore nero è quindi #000000, il bianco #FFFFFF, il blu #0000FF e così via.

Per convertire un valore decimale in esadecimale basta fare una semplice divisione per 16 e prendere in considerazione solo i resti in ordine inverso.

Ad esempio vogliamo trasformare 255₁₀ in esadecimale:
255:16 = 15,9375
dato che come risultato abbiamo ottenuto un numero con la virgola prendiamo la parte decimale e la moltiplichiamo per 16
0,9375x16 = 15
sappiamo che 15 equivale a F quindi F sarà l'ultima cifra del numero esadecimale
ora dividiamo 15 per 16
15:16 = 0 con resto di 15 (cioè F)
la divisione è finita e F sarà la penultima cifra del numero esadecimale
quindi 255₁₀ equivale a FF₁₆.

Un altro esempio:
144:16 = 9 con resto di 0 quindi 0 è l'ultima cifra in esadecimale
9:16 = 0 con resto di 9 quindi la divisione è finita e 9 è il penultimo numero
quindi 144₁₀ equivale a 90₁₆.

Se invece vogliamo fare la conversione da esadecimale a decimale dobbiamo prendere le cifre in ordine inverso e fare delle moltiplicazioni per 16 elevato a potenze crescenti.

Ad esempio:
prendiamo il numero FF, moltiplichiamo l'ultima cifra (F cioè 15) per 16⁰ e la prima cifra per 16¹
15X1 = 15 (perchè sappiamo che un numero elevato alla potenza di 0 fa sempre 1)
15X16 = 240 (perchè 16¹ equivale a 16)
Ora sommiamo 15 e 240 e otteniamo 255.

Secondo esempio:
vogliamo trasformare 90₁₆ in decimale, prendiamo l'ultima cifra e la moltiplichiamo per 16⁰ (cioè la moltiplichiamo per 1)
0x1=0
poi prendiamo la penultima cifra e la moltiplichiamo per 16¹
9x16 = 144
ora sommiamo i due risultati
144+0 = 144
come volevasi dimostrare.

Infine c'è la notazione in HSL cioè Hue, Saturation, Lightness con l'eventuale aggiunta del valore della trasparenza. Per esempio il colore bianco si esprime con 0,0%,100% mentre il colore nero si esprime con 0,0%,0%. Il rosso si esprime con 0,100%,50% il verde si esprime con 120,100%,50% ed il blu si esprime con 240,100%,50%.

I colori possono essere espressi anche con il modello CMYK (Cyan, Magenta, Yellow, Key black) ma questo si riferisce solo ai colori in ambito stampa. Non tutti i colori CMYK hanno un corrispettivo RGB quindi bisogna fare attenzione quando si utilizza un programma come Illustrator o Photoshop ad utilizzare lo spazio di colore web.

Curiosità

In passato i camici dei chirurghi erano bianchi. Capitava però che gli occhi del chirurgo, fissando per lungo tempo il sangue rosso del paziente, quando si spostavano su una superficie bianca percepivano un fastidioso alone del colore complementare al rosso, il verde. Si iniziò così ad utilizzare camici color verde-azzurro che rendevano meno fastidiosa la macchia.

Il test per diagnosticare il daltonismo si chiama test di Ishihara ed è costituito da una figura rossa su sfondo verde o viceversa. Se il paziente distingue la figura è sano, altrimenti soffre di una delle forme di daltonismo: deuteranopia (insensibilità al colore verde), protanopia (insensibilità al colore rosso), tritanopia (insensibilità al colore blu). Pare che Facebook sia blu perchè Mark Zuckerberg è daltonico!

Nella lingua giapponese il colore blu ed il verde si indicano con la stessa parola: "ao". Solo nell'ultimo secolo è stata introdotta la parola "midori" ad indicare il verde ma i giapponesi continuano ancora a riferirsi a molte cose verdi con il termine "ao", per esempio il semaforo!

Un colore particolare, il rebeccapurple (#663399), prende il nome dalla figlia di Eric Meyer reset.css, morta all'età di 6 anni. Il viola era il suo colore preferito.