I colori Pubblicato su (

Transcript

1 Indice Sintesi additiva e sottrattiva Gli attributi del colore sui nostri monitor nei CSS Curiosità 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à Pagina 1 di 5

2 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). 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 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 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 8. Nelle immagini a 16 bit, ciascun pixel può visualizzare uno dei colori (216 colori per ogni bit) 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 8 per 3 cioè Pagina 2 di 5

3 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 8 = 256 livelli d'intensità per ciascun canale si combinano per produrre un totale di colori ( ). 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. 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). 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ù, a questa pagina si trova la lista completa. 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 8 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 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 esmpio 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. Pagina 3 di 5

4 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 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 equivale a FF 16. 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 equivale a 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 0 e la prima cifra per X1 = 15 (perchè sappiamo che un numero elevato alla potenza di 0 fa sempre 1) 15X16 = 240 (perchè 16 1 equivale a 16) Ora sommiamo 15 e 240 e otteniamo 255. Secondo esempio: vogliamo trasformare in decimale, prendiamo l'ultima cifra e la moltiplichiamo per 16 0 (cioè la moltiplichiamo per 1) 0x1=0 poi prendiamo la penultima cifra e la moltiplichiamo per x16 = 144 ora sommiamo i due risultati = 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 Pagina 4 di 5

5 con 120,100%,50% ed il blu si esprime con 240,100%,50%. 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 (è possibile farlo a questa pagina) 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 (l'inventore del reset.css), morta all'età di 6 anni. Il viola era il suo colore preferito. Source URL: Pagina 5 di 5