COLORE - marco motta design · La percezione del colore Attenzione all’uso di colori saturi...

Preview:

Citation preview

www.marcomottadesign.it

COLORE

www.marcomottadesign.it

Come sostenne Isaac Newton (1642 -1727),

la luce è una radiazione elettromagnetica e

il colore è un impressione che la luce,

riflessa in vario modo dalla superficie dei corpi

produce nel nostro occhio.

www.marcomottadesign.it

Quindi è possibile affermare che

gli oggetti non hanno colore,

ma hanno un grado di assorbenza del colore

Il neroassorbe tutti i raggi

e non li riflette

il bianco al contrario

li riflette tutti,

ma non li assorbe.

www.marcomottadesign.it

www.marcomottadesign.it

Il sistema

additivo

RGB

Il sistema

sottrattivo

CMY

PER PARLARE DEL COLORE…

www.marcomottadesign.it

Il sistema

additivo

RGB

Il sistema

sottrattivo

CMYK

PER PARLARE DEL COLORE…

www.marcomottadesign.it

Il sistema

additivo

RGB

Il sistema

sottrattivo

CMYK

PER PARLARE DEL COLORE…

www.marcomottadesign.it

I colori secondari

Mescolando 2 primari

si ottiene un secondario

www.marcomottadesign.it

Le 3 proprietà fondamentali

del colore

• Hue (tinta o colore)

la lunghezza d’onda dominante o più semplicemente il colore

percepibile di un campione

• Saturation (saturazione)

grado di purezza della tinta. Individua sino a che punto la tinta è

contaminata da altre tinte o dal grigio

• Brightness (brillantezza)

quantità di luce riflessa, ovvero quanto luminoso è il colore

HUE HUE HUE HUE

SATURATION CHROMA SATURATION SATURATION

BRIGHTNESS LUMINANCE VALUE LIGHTNESS

HSB LCH HSV HSL

www.marcomottadesign.it

La Tonalita' (Hue) e' un colore "puroIn pittura il colore "puro" e' senza aggiunta di pigmenti bianchi o neri.

La Saturazione (Saturation) e' la misura della purezza, dell'intensita' di un colore.

La Luminosita' (Brightness) (o Valore) specifica la quantita' di bianco o di nero presente nel colore percepito.

www.marcomottadesign.it

www.marcomottadesign.it

LA PERCEZIONE DEL COLORE

www.marcomottadesign.it

www.marcomottadesign.it

Non esistono colori “soli”…

www.marcomottadesign.it

La percezione del colore

I colori si influenzano l’un l’altro. Lo stesso colore,

posizionato su sfondi diversi, sembra molto diverso

quanto a tinta e brillantezza.

www.marcomottadesign.it

www.marcomottadesign.it

www.marcomottadesign.it

L’interazione tra i colori

www.marcomottadesign.it

Quante tonalità di verde ci sono?

19

www.marcomottadesign.it

www.marcomottadesign.it

21

Quante tonalità di

grigio ci sono?

www.marcomottadesign.it

22

www.marcomottadesign.it

23

www.marcomottadesign.it

La percezione del colore

Attenzione all’uso di colori saturi agli estremi

dello spettro (complementari),

soprattutto nel caso di testo su sfondo

Difficoltà di messa a fuoco, effetto flickering, fatica

a a a

www.marcomottadesign.it

Testo blu su fondo rosso

Nonostante il forte

contrasto di colore, i due

complementari hanno

uguale luminosità.

L’instabilità dei contorni

rende la forma poco

riconoscibile.

www.marcomottadesign.it

Testo rosso su fondo blu

Nonostante il forte

contrasto di colore, i due

complementari hanno

uguale luminosità.

L’instabilità dei contorni

rende la forma poco

riconoscibile.

www.marcomottadesign.it

Il contrasto nero-bianco è

ottimo per la percezione

della forma dato che è il

massimo contrasto chiaro-

scuro possibile.

www.marcomottadesign.it

www.marcomottadesign.it

Testo blu

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

minore leggibilità

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

www.marcomottadesign.it

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

Testo bianco su fondo rosso scuro

Testo giallo non saturo su sfondo rosso scuro

Testo verde chiaro su sfondo rosso scuro

Testo azzurro su sfondo rosso scuro

www.marcomottadesign.it

Da questo esempio si vede la difficoltà di messa a fuococontemporanea del rosso e del blu: da molti le righe di questidue colori vengono viste, per i motivi descritti, come se fosserocollocate a distanze diverse dagli occhi.

Questo fenomeno non si verifica se si usano due colori chesi trovino fra loro più vicini sullo spettro visibile, come si puòfacilmente verificare da questo secondo esempio, che nondovrebbe presentare l’effetto tridimensionale di cui sopra.

www.marcomottadesign.it

PERCEZIONE

Usare lo stesso colore

per raggruppare percettivamente

due oggetti o due concetti

IL CERVELLO

COLLEGA

www.marcomottadesign.it

Usare colori saturi e brillanti

per attirare l’attenzione e per

dare profondità

CAPITO?

PERCEZIONE

www.marcomottadesign.it

Le proprietà del colore

La saturazione può essere utilizzata come strumento

compositivo, per suggerire aree interessanti, bottoni attivi

o, al contrario, aree in secondo piano.

I colori desaturati sono

detti muted (smorzati)

www.marcomottadesign.it

• Colori saturi per il primo piano

• Colori desaturi per lo sfondo

Ricordarsi…

www.marcomottadesign.it

Colori caldi e freddi

COLORI CALDI

azione,

urgenza

richiesta di risposta,

vicinanza

COLORI FREDDI

lontananza,

tranquillità,

informazioni di stato

I colori caldi tendono ad avanzare, i colori freddi a recedere

www.marcomottadesign.it

STOP EXIT

PERICOLO !

AVANTI

www.marcomottadesign.it

Ricordare il coloreUn esperimento di memoria visiva

Pensate il colore

ROSSO

www.marcomottadesign.it

Ricordare il coloreUn esperimento di memoria visiva

Qual è il ROSSO FERRARI ?a b c d

1

2

3

4

5

www.marcomottadesign.it

Ricordare il coloreUn esperimento di memoria visiva

www.marcomottadesign.it

Ricordare il coloreUn esperimento di memoria visiva

Conclusioni

· Difficile, se non impossibile, ricordare i colori esattamente

· La memoria visiva è molto più povera di quella uditiva

· La nomenclatura dei colori è inadeguata: innumerevoli

sfumature di colore, solo una trentina di nomi.

www.marcomottadesign.it

LA PSICOLOGIA LEGATA AI

COLORI

www.marcomottadesign.it

I 3 livelli di utilizzo dei colori

1. Pregnanza: il colore integra gli elementi del

messaggio creando una coesione visuale ed estetica

2. Somiglianza: il colore puo’ riprodurre

cromaticamente il contenuto della confezione, azienda,

prodotto, dando un senso di realismo al messaggio

3. Simbolismo: attraverso il colore si puo’ comunicare

il senso del messaggio senza mostrare direttamente

l’oggetto

www.marcomottadesign.it

L’associare un colore a qualcosa risulta

spontaneo;

i colori infatti trasmettono

in maniera inconscia

all’osservatore determinate sensazioni

www.marcomottadesign.it

Forza

Eccitazione

Dinamismo

Amore e carica affettiva

Appetito

Desiderio

Foga

ROSSO

Potenza

Fuoco

Pericolo

Attenzione

www.marcomottadesign.it

INTRODUZIONE

Energia

Attenzione

Ricerca

Studio

accoglienza

Azione

Call to action

ARANCIONE

www.marcomottadesign.it

Illuminazione

Redenzione

Concentrazione

Azione

Apertura, vivacità

Gioia e spensieratezza

Libertà

Conoscenza

GIALLO

www.marcomottadesign.it

INTRODUZIONE

Immensità

Calma

Quiete

Profondità meditativa

Passato, Ricordo

Armonia

BLU

Fiducia

Pulizia

Lealtà

Soddisfazione

www.marcomottadesign.it

INTRODUZIONE

Natura

Stabilità

Gioventù

Equilibrio

Fertilità

Consenso

Positività

VERDE

Il verde vive tra l’irradiare del giallo

e l’accogliere del blu, come la

natura vegetale vive tra l’irradiare

della luce cosmica solare e

l’accogliere dell’oscurità

acqueo/terrestre.

E’ per questa identità processuale

che la natura si riveste di verde; la

natura vegetale è verde perché

essa è l’immagine dell’invisibile

processo che la crea

www.marcomottadesign.it

Semplicità

Genuinità

Tradizione

Comodità e agio

Umiltà

Avvolgenza

MARRONE

www.marcomottadesign.it

Magia

Finzione

Misticismo

Ricerca

Congiunzione tra umano e

Divino

VIOLA

Regalità

Spiritualità

Crudeltà

Arroganza

Pianto

Penitenza

www.marcomottadesign.it

Neutralità

Impersonale

Aridità

Ripetitività

Ordine

Eleganza

GRIGIO

Intelligenza

Solidità

Modernità

Maturità

Tristezza

www.marcomottadesign.it

Buio

Inconscio

Ombra

Morte

Sobrietà

Assenza

Potere

Stile

NERO

www.marcomottadesign.it

Freschezza

Purezza

Verità Giustizia

Perfezione Divina

Incontaminazione

Pulizia

BIANCO

Innocenza

Castità

Semplicità

Pace

www.marcomottadesign.it

Adattamento cromatico

61

www.marcomottadesign.it

Adattamento cromatico

62

www.marcomottadesign.it

63

www.marcomottadesign.it

#thedress

64

www.marcomottadesign.it

65

www.marcomottadesign.it

66

www.marcomottadesign.it

67

www.marcomottadesign.it

68

www.marcomottadesign.it

69

www.marcomottadesign.it

70

www.marcomottadesign.it

71

www.marcomottadesign.it

72