Modelli di colore Un tocco di blu non guasta …. Todo Come faccio a rappresentare i colori in una...

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


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


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
















+Sorgente rossa

Sorgente verde


di colore








8 bit 8 bit 8 bit





FF

FF00



Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine



















































+Sorgente rossa

Sorgente verde


di colore








8 bit 8 bit 8 bit





FF

FF00



Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine





































di colore








8 bit 8 bit 8 bit





FF

FF00



Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine










































8 bit 8 bit 8 bit





FF

FF00



Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine








































FF

FF00



Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine






































Arancione Rosa


di colori

Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine




































Soluzioni












ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine











































ltheadgtltbodygt

hellip

ltbodygt lthtmlgt






ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine









































ltheadgt ltbodygt


ltbodygt

lthtmlgt


immagine























4

3

1

2

4 1 2 3= - -













una immagine





































immagine























4

3

1

2

4 1 2 3= - -













una immagine

























































4

3

1

2

4 1 2 3= - -













una immagine
















































una immagine




































Modelli di colore Un tocco di blu non guasta …. Todo Come faccio a rappresentare i colori in una...

Documents

Transcript of Modelli di colore Un tocco di blu non guasta …. Todo Come faccio a rappresentare i colori in una...