Modelli di colore. Un tocco di blu non guasta

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Modelli di colore. Un tocco di blu non guasta"

Bartolommeo Graziano
8 anni fa
Visualizzazioni

1 Modelli di colore Un tocco di blu non guasta

2 Obiettivi Come faccio a rappresentare i colori in una immagine? Per formati immagine raster e vettoriali Come specificare che il mare della mia foto è di colore blu? Cerchiamo dei modelli per la rappresentazione matematica dei colori RGB, CMYK, HSV, Crominanza Trasparenza Applicazioni: HTML SVG

3 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?

4 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)

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

risultante dalla mescolanza dei due stimoli come giallo.

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

verde, blu Ogni colore rappresentato tramite una terna di numeri reali in

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

(255, 255, 255): Bianco Complessivamente: 3*8 = 24 bit 2 24 17 milioni di

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 Esempio: FF FF Giallo: RGB(255,255,0) #FFFF00 00

concatenano i valori per la componente rosso,

11 Esercizio Definire come terna e in formato Hex i seguenti colori: Magenta Ciano Arancione Rosa esegui Paint doppio click sulla palette di colori

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

13 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 colore Esempi: testo colorato <body bgcolor= #C0C0C0 >sfondo</body>

i tag che contengono attributi di colore Esempi: <font color=

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

15 Esercizio 2 Realizzare la seguente pagina HTML: Una riga magenta Una riga ciano Una riga arancione Una riga rosa Usa notepad e salva come pippo.html e visualizza con il browser

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

riga ciano</font></p> <p><font color="# FFA043 ">una riga

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

18 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

e stimola i recettori dell occhio Le piante amano (e assorbono) le altre radiazioni

19 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)

Si ottengono così i colori primari complementari ottenuti dal colore RGB ed eliminando una

20 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!

Magenta il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane

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

22 Sintesi sottrattiva /5 Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse Inchiostro ciano (elimino il rosso) Inchiostro giallo (elimino il blu) Per gli altri colori si combinano in percentuale

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

24 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).

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

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; 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

32 Esercizio 3 Aprire Inkscape Disegnare 3 cerchi parzialmente sovrapposti rosso, verde e blu. Disegnare 3 cerchi parzialmente sovrapposti magenta, verde, giallo Per ognuno osservare le componenti RGB e CMYK Modificare la trasparenza Il colore nelle parti non sovrapposte cambia? E in quelle sovrapposte?

33 Esercizio 4 Aprire Inkscape Importare una immagine Raster Applicare la trasformazione vettoriale Tracciato vettorizza bitmap riduzione luminosità Semplificare il numero di poligoni Tracciato Semplifica La figura ottenuta è uguale a quella di partenza? Provare con l opzione scansione multipla colori

Documenti analoghi

Il colore. IGEA 2006-07 7 febbraio 2007

Il colore. IGEA 2006-07 7 febbraio 2007 Il colore IGEA 2006-07 7 febbraio 2007 La luce Radiazione elettromagnetica 380 740 nanometri (790 480 THz) Percezione della luce /1 Organi sensoriali: Bastoncelli Molto sensibili (anche a un solo fotone: