Modelli di colore
Un tocco di blu non guasta hellip
Todo Come faccio a rappresentare i colori in una
immagine Per formati immagine raster e vettoriali
Come specificare che il mare della mia foto egrave di colore blu
Cerchiamo dei modelli per la rappresentazione matematica dei colori RGB CMYK HSV Crominanza
Trasparenza Applicazioni
HTML SVG
Un passo indietro Nelle immagini raster ogni pixel
dellrsquoimmagine ha associato un colore
Nelle immagini Vettoriali ogni forma geometrica ha un colore associato
Come rappresento un colore
Modelli di colore Vogliamo rappresentare il colore in modo
matematicoAssociare ad ogni colore un numero Insiemi di numeri
ObiettivoRappresentazioni dei colori nei formati immagine
Sintesi additiva (RGB) Sintesi sottrattiva (CMYK)
Sintesi additiva1 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 egrave in questo caso un colore prodotto dalla mescolanza additiva del rosso e del verde
Esempio classico televisori e monitor
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Todo Come faccio a rappresentare i colori in una
immagine Per formati immagine raster e vettoriali
Come specificare che il mare della mia foto egrave di colore blu
Cerchiamo dei modelli per la rappresentazione matematica dei colori RGB CMYK HSV Crominanza
Trasparenza Applicazioni
HTML SVG
Un passo indietro Nelle immagini raster ogni pixel
dellrsquoimmagine ha associato un colore
Nelle immagini Vettoriali ogni forma geometrica ha un colore associato
Come rappresento un colore
Modelli di colore Vogliamo rappresentare il colore in modo
matematicoAssociare ad ogni colore un numero Insiemi di numeri
ObiettivoRappresentazioni dei colori nei formati immagine
Sintesi additiva (RGB) Sintesi sottrattiva (CMYK)
Sintesi additiva1 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 egrave in questo caso un colore prodotto dalla mescolanza additiva del rosso e del verde
Esempio classico televisori e monitor
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Un passo indietro Nelle immagini raster ogni pixel
dellrsquoimmagine ha associato un colore
Nelle immagini Vettoriali ogni forma geometrica ha un colore associato
Come rappresento un colore
Modelli di colore Vogliamo rappresentare il colore in modo
matematicoAssociare ad ogni colore un numero Insiemi di numeri
ObiettivoRappresentazioni dei colori nei formati immagine
Sintesi additiva (RGB) Sintesi sottrattiva (CMYK)
Sintesi additiva1 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 egrave in questo caso un colore prodotto dalla mescolanza additiva del rosso e del verde
Esempio classico televisori e monitor
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Modelli di colore Vogliamo rappresentare il colore in modo
matematicoAssociare ad ogni colore un numero Insiemi di numeri
ObiettivoRappresentazioni dei colori nei formati immagine
Sintesi additiva (RGB) Sintesi sottrattiva (CMYK)
Sintesi additiva1 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 egrave in questo caso un colore prodotto dalla mescolanza additiva del rosso e del verde
Esempio classico televisori e monitor
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi additiva1 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 egrave in questo caso un colore prodotto dalla mescolanza additiva del rosso e del verde
Esempio classico televisori e monitor
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi additiva2 Allrsquoocchio arriva lrsquoonda verde insieme a quella
rossa lrsquoocchio somma le due informazioni e vede un unico colore il giallo
+Sorgente rossa
Sorgente verde
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
RGB1 Scelta delle componenti
di colore
Lrsquoocchio umano ersquo sensibile ai colori Rossoverde e blu
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
RGB2R(red) G(green) B(blu) Modello di colore derivato dalla sintesi additiva
Ogni colore egrave rappresentato dalla somma di tre componenti rossa verde blu
Ogni colore rappresentato tramite una terna di numeri reali in [0 1] 1048698 (0 0 0) Nero 1048698 (1 0 0) Rosso 1048698 (05 05 05) Grigio 1048698 (1 1 1) Bianco
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
RGB3 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) BiancoComplessivamente 38 = 24 bit224 asymp 17 milioni di colori rappresentabiliLrsquoocchio piugrave raffinato ne distingue 10 milioni
8 bit 8 bit 8 bit
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
RGB4 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 Giallo RGB(2552550) FFFF00
FF
FF00
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Esercizio Definire come terna e in formato Hex i
seguenti colori Magenta Ciano
Arancione Rosa
esegui Paintdoppio click sulla palette
di colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Soluzioni
MagentaFF00FF (255 0 255)
Ciano00FFFF (0 255255)
ArancioneFFA043 (255 160 67)
RosaFFC0FF (255192255)
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
I colori in HTML Colori rappresentati in forma esadecimale con un
cancelletto iniziale Es cianoFF00FF
Si puograve usare in tutti i tag che contengono attributi di colore
Esempi ltfont color=ldquoFF00FFrdquogttesto coloratoltfontgt
ltbody bgcolor=ldquoC0C0C0rdquogtsfondoltbodygt
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Vogliamo ricordarlo cosigrave hellipStruttura base di una pagina HTML lthtmlgt
ltheadgt lttitlegthelliplttitlegt
ltheadgtltbodygt
hellip
ltbodygt lthtmlgt
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Esercizio 2 Realizzare la seguente pagina HTML
Usa notepad e salva come pippohtml e visualizza con il browser
Una riga magentaUna riga cianoUna riga arancioneUna riga rosa
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Soluzione 2 lthtmlgt
ltheadgt lttitlegtColorilttitlegt
ltheadgt ltbodygt
ltpgtltfont color=FF00FFgtuna riga magentaltfontgtltpgt ltpgtltfont color=00FFFFgtuna riga cianoltfontgtltpgt ltpgtltfont color= FFA043 gtuna riga arancioneltfontgtltpgt ltpgtltfont color= FFC0FF gtuna riga rosaltfontgtltpgt
ltbodygt
lthtmlgt
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Esempio di immagine RGB Scomposizione nelle componenti RGB di una
immagine
NotaLe parti rosse del papaveroLe parti gialle dei fiori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi sottrattiva1 Le piante odiano la luce verde
Per questo non la assorbono La luce verde riflessa dalle piante (e diffusa)
raggiunge e stimola i recettori dellrsquoocchio Le piante amano (e assorbono) le altre
radiazioni luminose che quindi non raggiungono il nostro occhioOggetto nero assorbe tutta la luceOggetto bianco riflette tutta la luce
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi sottrattiva2 Idea sfruttare questo principio per produrre i colori
su carta Usare dei pigmenti che assorbono solo un colore primario
(RGB) Si ottengono cosigrave i colori primari complementari ottenuti
dal colore RGB ed eliminando una componente
Assorbo il Rossosono Ciano (= Verde + Blu) Assorbo il Verde sono Magenta (= Rosso + Blu) Assorbo il Blu sono Giallo (= Rosso + Verde)
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi sottrattiva 3 Mescolando colori primari complementari si
sottraggono ancora piugrave componenti alla luceEsempio mescolo Ciano e Magenta
il Magenta assorbe il Verde il Ciano assorbe il Rosso rimane soltanto il Blu ottengo il Blu
Ersquo quello che fanno le stampanti a getto di inchiostro
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Sintesi sottrattiva 4
Inchiostro ciano Inchiostro magenta Inchiostro giallo
Come ottengo il verde
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Per ottenere il verde concateno i filtri fino ad eliminare tutti i colori tranne quello di interesse
Per gli altri colori si combinano in percentuale
Sintesi sottrattiva 5
Pellicola drsquoinchiostro Ciano (elimino il rosso)
Pellicola drsquoinchiostro Giallo (elimino il blu)
4
3
1
2
4 1 2 3= - -
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
CMYK1 CMYK egrave lacronimo per Cyan Magenta
Yellow BlacK egrave un modello di colore detto anche di quadricromia
colori ottenibili con la quadricromia (sintesi sottrattiva) sono un sottoinsieme della gamma visibilenon tutti i colori che vediamo possono essere
realizzati con la quadricromia non tutti i colori realizzati con linsieme RGB
(sintesi additiva) hanno un corrispondente nellinsieme CMYK
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
CMYK2 Quindi ogni colore rappresentabile tramite tre
componenti reali in [0 1] ossia le quantitagrave 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
1001001000) non genera il nero bensigrave il bistro (simile al marrone molto scuro)
si egrave aggiunto linchiostro di un quarto colore per avere il nero pieno (CMYK 000100)
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Esempio di immagine CMYK Scomposizione nelle componenti CMYK di
una immagine
NotaLe parti rosse del papavero
Inchiostro magenta + giallo
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Modelli Percettivi1Scopo facilitare lrsquouso di programmi Colori disposti in modo intuitivo Es HSV
Tinta (Hue) colore principaleSaturazione grado di purezza del colore
Piugrave 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
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Modelli Percettivi2 Si sceglie un colore
fondamentale cerchio esterno
se ne definiscono i valori di saturazione e valore rettangolo interno
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
La crominanza1 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 luminanza1048698 Come colorare la TV Aggiungendo 2
componenti cromatiche (normalizzate) la crominanza
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
La crominanza2 Lrsquoocchio egrave piugrave sensibile alla luminanza che
alla crominanzaQuindi posso risparmiare spazio rappresentando
meno accuratamente la crominanza TV poca ldquobandardquo dedicata alla crominanza JPEG uso luminanzacrominanza per rappresentare il
file sottocampiono la crominanza
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Il canale Alpha1 A volte le immagini TrueColor usano 32 bit
(invece di 24 bit)PercheacuteAggiungono unrsquoinformazione sulla trasparenza Non fa parte del modello di colore
Dice come comportarsi quando si ldquosovrappongonordquo diverse immagini
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Il canale Alpha2 Canale Alpha ulteriore reale in [0 1]
0 oggetto completamente trasparente ndash invisibile
1 oggetto opaco ndash copre completamente ciograve che sta sotto
TrueColor trasparenza rappresentata con 8 bit ndash discretizzata in 256 livelli
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
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
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori
Esercizio 4 Aprire Inkscape
Importare una immagine RasterApplicare la trasformazione vettoriale
Tracciato vettorizza bitmap riduzione luminositagrave
Semplificare il numero di poligoni Tracciato Semplifica
La figura ottenuta egrave uguale a quella di partenzaProvare con lrsquoopzione scansione multipla colori