Modelli di colore. Un tocco di blu non guasta

Transcript

1 Modelli di colore Un tocco di blu non guasta

2 Un passo indietro Nelle immagini raster ogni pixel dell immagine ha associato un colore. Nelle immagini Vettoriali ogni forma geometrica ha un colore associato. Come rappresento un colore? Fisicamente l occhio percepisce il colore in base alla parte di luce riflessa da un oggetto

3 Modelli di colore Vogliamo rappresentare il colore in modo matematico Associare ad ogni colore un numero? Insiemi di numeri? Obiettivo Rappresentazioni dei colori nei formati immagine Sintesi additiva (RGB) Sintesi sottrattiva (CMYK)

4 Sintesi additiva/1 Fenomeno fisico: due fasci di luce colorata (per esempio rossa e verde) proiettati sulla parete bianca e riflessi il sistema visivo percepisce il colore risultante dalla mescolanza dei due stimoli come giallo. Il giallo è, in questo caso, un colore prodotto dalla mescolanza additiva del rosso e del verde Esempio classico: televisori e monitor.

5 Sintesi additiva Blu + rosso rosso + verde? Esperimenti pratici

6 Sintesi additiva/2 All occhio arriva l onda verde insieme a quella rossa: l occhio somma le due informazioni e vede un unico colore: il giallo Sorgente rossa Sorgente verde

7 RGB/1 Scelta delle componenti di colore L occhio umano e sensibile ai colori Rosso,verde e blu

8 RGB/2 R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva Ogni colore è rappresentato dalla somma di tre componenti: rossa, verde, blu Ogni colore rappresentato tramite una terna di numeri reali in [0, 1] (0, 0, 0): Nero (1, 0, 0): Rosso (0.5, 0.5, 0.5): Grigio (1, 1, 1): Bianco

9 RGB/3 Usare numeri interi per ciascuna componente k bit 2k passi di discretizzazione TrueColor: 8 bit a componente (256 passi) (0, 0, 0): Nero (255, 255, 255): Bianco Complessivamente: 3*8 = 24 bit milioni di colori rappresentabili L occhio più raffinato ne distingue 10 milioni! 8 bit 8 bit 8 bit

10 RGB/4 Colori in formato Hex Ogni componente RGB viene rappresentata in esadecimale con 2 cifre Si concatenano i valori per la componente rosso, verde e blu FF FF 00 Esempio: Giallo: RGB(255,255,0) #FFFF00

11 Esempi Magenta FF00FF (255, 0, 255) Ciano 00FFFF (0, 255,255) Arancione FFA043 (255, 160, 67) Rosa FFC0FF (255,192,255)

12 I colori in HTML Colori rappresentati in forma esadecimale con un cancelletto iniziale Es: ciano:#ff00ff Si può usare in tutti i tag che contengono attributi di Si può usare in tutti i tag che contengono attributi di colore Esempi: testo colorato <body bgcolor= #C0C0C0 >sfondo</body>

13 Vogliamo ricordarlo così Struttura base di una pagina HTML <html> <head> <title> </title> </head> <body> </body> </html>

14 Esempio Realizzare la seguente pagina HTML: Una riga magenta Una riga ciano Una riga arancione Una riga rosa

15 Soluzione 2 <html> <head> <title>colori</title> </head> <body> una riga magenta una riga ciano una riga arancione una riga rosa </body> </html>

16 Esempio di immagine RGB Scomposizione nelle componenti RGB di una immagine Nota: Le parti rosse del papavero Le parti gialle dei fiori

17 Sintesi sottrattiva/1 Le piante odiano la luce verde! Per questo non la assorbono La luce verde, riflessa dalle piante (e diffusa), raggiunge e stimola i recettori dell occhio Le piante amano (e assorbono) le altre radiazioni luminose, che quindi non raggiungono il nostro occhio Oggetto nero: assorbe tutta la luce Oggetto bianco: riflette tutta la luce Modello di colori ispirato al fenomeno fisico

18 Sintesi sottrattiva/2 Idea: sfruttare questo principio per produrre i colori su carta Usare dei pigmenti che assorbono solo un colore primario (RGB). Si ottengono così i colori primari complementari ottenuti dal colore RGB ed eliminando una componente Assorbo il Rosso sono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)

19 Sintesi sottrattiva /3 Mescolando colori primari complementari, si sottraggono ancora più componenti alla luce Esempio: mescolo Ciano e Magenta il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu E quello che fanno le stampanti a getto di inchiostro!

20 Sintesi sottrattiva /4 Inchiostro ciano Inchiostro magenta Inchiostro giallo Come ottengo il verde?

21 Sintesi sottrattiva /5 Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse Pellicola d inchiostro Ciano (elimino il rosso) Pellicola d inchiostro Giallo (elimino il blu) = Per gli altri colori si combinano in percentuale

22 CMYK/1 CMYK è l'acronimo per Cyan, Magenta, Yellow, BlacK, è un modello di colore detto anche di quadricromia colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibile non tutti i colori che vediamo possono essere realizzati con la quadricromia, non tutti i colori realizzati con l'insieme RGB (sintesi additiva) hanno un corrispondente nell'insieme CMYK.

23 CMYK/2 Quindi: ogni colore rappresentabile tramite tre componenti reali in [0, 1], ossia le quantità dei tre colori primari complementari(cmy) che devo mescolare per ottenerlo Quando sono sovrapposti nelle diverse percentuali, i primi tre possono dare origine quasi a qualunque altro colore. A che serve il nero? il 100% di tutte e tre le componenti (CMYK 100,100,100,0) non genera il nero, bensì il bistro, (simile al marrone molto scuro). si è aggiunto l'inchiostro di un quarto colore per avere il nero pieno (CMYK 0,0,0,100).

24 Esempio di immagine CMYK Scomposizione nelle componenti CMYK di una immagine Nota: Le parti rosse del papavero Inchiostro magenta + giallo

25 Approfondimenti Altri modelli di colore non trattati a lezione

26 Modelli Percettivi/1 Scopo: facilitare l uso di programmi Colori disposti in modo intuitivo. Es HSV: Tinta (Hue): colore principale Saturazione: grado di purezza del colore Più saturo: solo il colore della tinta scelta Meno saturo: altre componenti cromatiche presenti Valore: presenza di luce nelle altre component cromatiche Basso: altre componenti nere Alto: altre componenti bianche

27 Modelli Percettivi/2 Si sceglie un colore fondamentale cerchio esterno se ne definiscono i valori di saturazione e valore rettangolo interno

28 La crominanza/1 Torniamo al modello additivo Se conosco la luminanza e due componenti cromatiche (normalizzate) (es. verde e rosso),posso ricavare la terza componente (es. blu) La TV in bianco e nero trasmetteva la luminanza Come colorare la TV? Aggiungendo 2 componenti cromatiche (normalizzate), la crominanza

29 La crominanza/2 L occhio è più sensibile alla luminanza che alla crominanza! Quindi posso risparmiare spazio rappresentando meno accuratamente la crominanza TV: poca banda dedicata alla crominanza JPEG: uso luminanza/crominanza per rappresentare il file; JPEG: uso luminanza/crominanza per rappresentare il file; sottocampiono la crominanza

30 Il canale Alpha/1 A volte le immagini TrueColor usano 32 bit (invece di 24 bit).perché? Aggiungono un informazione sulla trasparenza Non fa parte del modello di colore! Dice come comportarsi quando si sovrappongono diverse immagini

31 Il canale Alpha/2 Canale Alpha: ulteriore reale in [0, 1] 0: oggetto completamente trasparente invisibile! 1: oggetto opaco copre completamente ciò che sta sotto TrueColor: trasparenza rappresentata con 8 bit discretizzata in 256 livelli