Forma e colore Si può interpretare la storia dellarte occidentale alla luce del rapporto tra 2...

Forma e colore

Si può interpretare la storia dell’arte occidentale allaluce del rapporto tra 2 parametri opposti e complementari:

• forma• colore

Forma e colore

La forma può rappresentare bene la realtà anche senza coloreIl colore è meno incisivo della forma sul piano descrittivo

Dunque il colore è stato considerato subordinato alla forma

Per la psicologia moderna vale l’equazione

forma=pensierocolore=emozione

Forma e colore

IlluminismoLa forma ha una posizione dominante, il colore è un gradevoleornamento della struttura dell’immagine

RomanticismoComincia lo studio scientifico del colore, considerato comeforma d’espressione e come fattore d’organizzazione strutturale.

Il colore

Il colore come espressioneEspressione = capacità del colore di suscitare gli equivalentipercettivi degli “stati emotivi”(Es. studi degli espressionisti tedeschi)

Goethe e Kandinsky tentano di associare colori e forme d’espressione (ma su questo argomento nonc’è accordo)

Il colore come organizzazione strutturaleL’organizzazione crea ordine.Quali sono le proprietà dei colori che fanno scaturire ordine odisordine dalla loro interazione?Parallelismo tra relazioni di tonalità in pittura e di toni in musica

Il sistema dei colori

Il disco dei colori (color wheel): cos’è e a cosa serve?

• Mostra l’organizzazione di base e le interrelazioni tra i colori

• Fornisce una grammatica di base indispensabile a chi utilizza colori e caratteri tipografici

Il sistema additivo - RGBColori primari

Il sistema additivo - RGBColori secondari

Mescolando 2 primarisi ottiene un secondario

Il sistema additivo - RGB

I colori additivi dell’intero spettro luminoso si ottengono mescolando in varie proporzioni i tre primari:•rosso•verde•blu

Es. schermi televisivi o dei PC: i pixel colorati sonoottenuti bersagliando i fosfori degli schermi con elettronirossi, verdi o blu

Il sistema RGB è alla base della produzione di grafica perlo schermo

Il sistema additivo - RGB

Qualunque altro colore additivo dello spettro si ottieneda una qualunque mescolanza di due colori primarimixati otticamente in due modi:

• attraverso la loro vicinanza fisica• presentandoli in rapida successione

In entrambe i casi due colori sono percepiti come uncolore solo

Mescolando i tre primari si ottiene luce bianca

Il sistema additivo - RGB

Una tecnica utilizzata nei primi esperimenti coni colori additivi: il disco dei colori

Il sistema sottrattivo - CMYColori primari

Coloranti, inchiostrie pigmenti

Il sistema sottrattivo - CMYColori secondari

Ogni primario assorbe il secondarioopposto e trasmette i due adiacenti

Il sistema sottrattivo - CMY

Il sistema sottrattivo - CMY

Ogni oggetto colorato (naturale o artefatto) assorbe determinate onde luminose e ne riflette altre.

Le onde riflesse e trasmesse all’occhio determinanoil colore di quell’oggetto.

Il sistema CMY è alla base della produzione di graficastampata

Mescolando i tre primari si ottiene il nero

Il sistema sottrattivo - CMY

Il colore a occhio nudo appare pieno. In realtà è stampatosulla carta tramite un pattern puntinato controllato acomputer, detto rosette

Il sistema additivo - RGB eil sistema sottrattivo CMY

I primari di un sistema sono i secondari dell’altro

In teoria i 3 primari,mescolati, danno il nero(tutta la luce è assorbita).

In realtà il modello CMYnon può essere utilizzato da solo.

Per ottenere il nero, sideve aggiungere inchiostronero, per questo il modelloè indicato comequadricromia CMYK

Il sistema additivo - RGB eil sistema sottrattivo CMY

Gamut = intervallo di colori che può essere riprodottoin un sistema dato

Nei due sistemi il gamutnon coincide, ed è comunquepiù ristretto dell’insieme deicolori percepibili dall’occhio umano

Le proprietà del colore

I diversi modelli del colore in uso individuano 3 attributifondamentali del colore:

• Hue (tinta o colore)la lunghezza d’onda dominante o più semplicementeil colore percepibile di un campione

• Saturation (saturazione)grado di purezza della tinta. Individua sino a che puntola tinta è contaminata da altre tinte o dal grigio

• Brightness (brillantezza)quantità di luce riflessa, ovvero quanto luminosoè il colore

Le proprietà del colore

I diversi modelli del colore in uso individuano i medesimi3 attributi fondamentali del colore, cambia la terminologia

HUE HUE HUE HUESATURATION CHROMA SATURATION SATURATIONBRIGHTNESS LUMINANCE VALUE LIGHTNESS

HSB LCH HSV HSL

Le proprietà del coloreHUE

I colori opposti sonocomplementari

3 colori primari3 colori secondari6 terziari

Le proprietà del coloreSATURATION = misura della purezza del

colore

Saturazione mediaSaturazione bassaSaturazione alta

3 colori primari e 3 colori secondari

Le proprietà del coloreSATURATION = misura della purezza del

colore

La saturazione può essere utilizzata come strumentocompositivo, per suggerire aree interessanti, bottoni attivio, al contrario, aree in secondo piano.

I colori desaturati sonodetti muted (smorzati)

Le proprietà del coloreBRIGHTNESS = misura della luce riflessa

3 colori primari e 3 colori secondari

TINTScolore mescolato al bianco

SHADEScolore mescolato al nero

Le proprietà del coloreBRIGHTNESS = misura della luce riflessa

Non collocate informazioni importanti in areescure dello schermo. Su schermi diversi potrebberoaddirittura risultare come aree nere e quindi illeggibili.

Lo stesso per le aree chiare.

Le proprietà del coloreBRIGHTNESS = misura della luce riflessa

Linee guida per l’uso del colore

• Aspetti percettivi• Aspetti cognitivi• Aspetti culturali

Aspetti percettivi

Le percezione del colore

I colori si influenzano l’un l’altro. Lo stesso colore,posizionato su sfondi diversi, sembra molto diversoquanto a tinta e brillantezza.

Interaction of ColorJosef Albers

Le 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

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.

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.

Il contrasto nero-bianco è ottimo per la percezione della forma dato che è il massimo contrasto chiaro-scuro possibile.

La percezione del colore

Per una agevole messa a fuoco, oltre a differenza di colore è necessaria anche una differenza di luminosità

Testo blu

La percezione del colore IL BLU

Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

(Bassa - e calante con l’età - sensibilità al blu dell’occhio umano; difficoltà di messa a fuoco)

Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

Il colore del testo

Scegliere con cura il colore del testo in relazione allo sfondo.

Soppesare le 3 proprietà del colore per ottenere un contrasto ottimale tra sfondo e testo

Delle 3 proprietà del colore la BRIGHTNESS (LUMINOSITA’) influisce di più sulla leggibilità

Il colore del testo

Una buona regola consiste nello scegliere colori che

NON sono complementari e nemmeno troppo vicininella color wheel. Ricordarsi sempre del contrastodi luminosità.

Sfondo: colori scuri agli estremi dello spettro

Testo: colori chiari non saturi, al centro dello spettro

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à

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

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

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

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

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

Da questo esempio si vede la difficoltà di messa a fuoco contemporanea 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 che si 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.

Aspetti cognitivi

QUANTI COLORI?

Usare pochi colori contemporaneamente (5 +/- 2)

Esempi

Troppi colori

Molto meglio!

Semantica dei colori

Associare i colori ai vari significati in modo consistente

Associazione

Usare lo stesso colore per raggruppare oggetti simili

color coding

Focus

Usare colori brillanti e saturi per attirare l’attenzione

Aspetti culturali

Colori caldi e freddi

COLORI CALDI

azione,urgenza richiesta di risposta, vicinanza

COLORI FREDDI

lontananza,tranquillità,informazioni di stato

Colori caldi e freddi

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

Codici familiari: esempio

ROSSO stop, pericolo, caldo, fuocoGIALLO attenzione, rallentamentoVERDE avanti, ok, sicurezza,

vegetazioneGRIGIO, BIANCO neutralità

STOP

EXIT

PERICOLO !

AVANTI

Ma le associazioni possono cambiare nelle diverse

culture!