Colore nel web
-
Upload
catina-feresin -
Category
Science
-
view
20 -
download
1
Transcript of Colore nel web
![Page 1: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/1.jpg)
I COLORI NEL WEB
![Page 2: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/2.jpg)
E’ di grandissimo aiuto per il costruttore di siti web e dvd, conoscere i fondamenti percettivi della visione e della mescolanza dei colori per fornire
agli utenti prodotti davvero utili e percettivamente gradevoli.
![Page 3: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/3.jpg)
Il sistema esadecimale di codifica dei colori
![Page 4: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/4.jpg)
Nel linguaggio HTML per indicare i valori RGB si utilizza il sistema di
codifica esadecimale anziché quello decimale. I numeri esadecimali si
basano su un sistema di numerazione in base 16 che comprende le cifre da 0 a 9
e da A a F.
![Page 5: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/5.jpg)
Se paragonato al sistema di numerazione decimale, il sistema
esadecimale ha un aspetto un po' strano poiché i numeri possono includere delle
lettere. Questa piccola difficoltà non deve però scoraggiare. Tutto quello che
serve è una stampa di riferimento, o meglio ancora, una pagina web che
elenchi tutti i colori.
![Page 6: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/6.jpg)
A questo proposito potete scaricare per tenerla sempre a portata di mano la tavolozza dei 216 colori sicuri per i browser. I colori sicuri sono i colori predefiniti utilizzati dai browser, che
non possono essere modificati quando i sistemi degli utenti sono in modalità
256 colori
![Page 7: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/7.jpg)
I codici esadecimali dei colori sono costituiti da numeri di sei cifre. Le
prime due cifre definiscono il livello del rosso, le seconde due cifre
definiscono il livello del verde e la terza coppia di cifre definisce il livello
del blu.
![Page 8: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/8.jpg)
Questi valori si possono usare in vari elementi del codice Html, ma
importante sapere che devono essere sempre racchiusi fra doppie virgolette e
preceduti dal segno #.
![Page 9: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/9.jpg)
Quando si scrive il codice Html è possibile specificare il nome dei colori al posto del valore esadecimale, ma non tutti i browser supportano questi nomi. In caso di dubbio è preferibile utilizzare
i valori esadecimali.
![Page 10: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/10.jpg)
Anche la visualizzazione dei colori può essere diversa a seconda del browser o
del sistema operativo utilizzato. La stessa pagina (con gli stessi colori)
potrebbe apparire diversa se visualizzata da un Pc o da un Mac, da un browser piuttosto che da un altro.
![Page 11: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/11.jpg)
Questo è purtroppo un limite intrinseco delle tecnologie Web e non c'è modo di
garantirsi un'assoluta fedeltà di riproduzione di colori.
![Page 12: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/12.jpg)
La tabella seguente mostra i 16 nomi dei colori riconosciuti dalla maggior parte dei browser, che
sono stati elencati nelle specifiche Html 4.0.Nome del colore Codice Esadecimale Nome del colore Codice EsadecimaleAqua 00FFFF Navy 000080Black 000000 Olive 808000Blue 0000FF Purple 800080Fucsia FF00FF Red FF0000
Gray 808080 Silver C0C0C0Green 008000 Teal 008080
Lime 00FF00 White FFFFFF Maroon 800000 Yellow FFFF00
![Page 13: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/13.jpg)
Colori primari, secondari e complementari
![Page 14: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/14.jpg)
I colori si suddividono, in qualsiasi sintesi, in primari e secondari.
I colori primari sono: rosso, blu e giallo;
i colori secondari sono: verde, viola e arancio.
![Page 15: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/15.jpg)
I primari sono i colori che, come si suole dire, "non possono essere
generati da altri".
I secondari sono invece frutto di associazione fra parti uguali di due
primari.
![Page 16: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/16.jpg)
Da questa suddivisione otteniamo le coppie di complementari, ovvero le
coppie composte da un primario e dal secondario ottenuto dalla mescolanza
degli altri due.
![Page 17: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/17.jpg)
Le coppie di colori complementari sono:
- rosso e verde (verde = giallo + blu) - giallo e viola (viola = blu + rosso)
- blu e arancio (arancio = giallo + rosso)
![Page 18: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/18.jpg)
Colori caldi e colori freddi
![Page 19: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/19.jpg)
La diapositiva seguente riassume la classificazione mettendo nel triangolo centrale i colori primari, nel cerchio i
secondari e loro "sfumature" e contrassegna con le frecce e gli
asterischi le coppie di complementari. Divide inoltre con una linea rossa i
colori denominati normalmente "caldi" da quelli "freddi".
![Page 20: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/20.jpg)
![Page 21: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/21.jpg)
Cosa sono i colori Web safe?
![Page 22: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/22.jpg)
I computer più vecchi hanno schede video e monitor in grado di visualizzare
correttamente soltanto 256 colori. Questi 256 colori vengono gestiti
diversamente dalle piattafome PC e Mac; a causa di queste differenze
rimangono soltanto 216 colori comuni.
![Page 23: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/23.jpg)
Se vogliamo essere sicuri che i nostri lavori vengano visti perfettamente da
qualsiasi utente (anche quelli che hanno computer con settaggi video a 8 bit, ovvero che visualizzano solo 256
colori), dobbiamo utilizzare per i nostri lavori solo i 216 colori riportati nella tabella qui sotto, detti appunto colori
"web safe".
![Page 24: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/24.jpg)
![Page 25: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/25.jpg)
Oggi, comunque, la stragrande maggioranza degli utenti ha computer che dispongono di una ampia quantità di ram video e di monitor moderni che consentono di visualizzare ben più di
256 colori.
![Page 26: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/26.jpg)
Sintesi addittiva e sottrattiva:
![Page 27: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/27.jpg)
![Page 28: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/28.jpg)
Parlando di Web, è giusto considerare che i nostri lavori verranno nella
maggior parte dei casi visualizzati su di un monitor e non letti su carta. Ci sono differenze fondamentali su come i vari
media visualizzano i colori e vale la pena averne una minima conoscenza.
![Page 29: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/29.jpg)
Per riprodurre nel modo più fedele possibile la gamma dei colori visibili in
natura si ricorre normalmente alla miscelazione di alcune tinte di base:dalla loro combinazione si
ottengono tutte le sfumature intermedie. Questa miscelazione si basa
su due diverse tecniche o metodi:
![Page 30: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/30.jpg)
Lo "spazio colore" (così si chiama la gamma dei colori visualizzabili) dei
monitor è dato dalla combinazione di fasci di luce di colore differente (rosso, verde e blu) che colpiscono l’occhio. I
monitor (e in generale molte delle apparecchiature elettroniche) usano la sintesi additiva RGB (Red - Green -
Blue).
![Page 31: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/31.jpg)
In pratica, ogni colore è identificato da tre valori (numeri):
1- il primo indica la "quantità" di rosso presente nel colore in questione;
2- il secondo la "quantità" di verde";3- il terzo la "quantità" di blu.
![Page 32: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/32.jpg)
Ciascuno di questi tre valori può variare da 0 (minimo: componente non presente) a 255 (massimo: componente
dominante).Ad esempio il nero corrisponde ai
valori RGB 0, 0, 0mentre il bianco corrisponde ai valori
RGB 255, 255, 255.
![Page 33: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/33.jpg)
La sintesi additiva è basata sull'emissione e dunque sull'addizione
o sovrapposizione della luce.
![Page 34: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/34.jpg)
Lo “spazio colore degli stampanti” è basato sull'assorbimento e dunque sulla sottrazione della luce da parte dei corpi fisici e quindi sulla sintesi sottrattiva.
![Page 35: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/35.jpg)
La sintesi sottrattiva è basata sull'assorbimento e dunque sulla
sottrazione della luce da parte dei corpi fisici. Questa tecnica si applica per la stampa dei colori su carta o su altri
supporti. I colori di base in questo caso sono il ciano, il magenta, il giallo e il nero; la sintesi sottrattiva viene perciò
indicata con la sigla CMYK (Cyan, Magenta, Yellow, blacK).
![Page 36: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/36.jpg)
È importante notare inoltre che i colori CMYK risultano di solito meno
brillanti di quelli RGB.
![Page 37: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/37.jpg)
È interessante notare che, mentre nella sintesi additiva il colore ottenuto dalla combinazione di rosso, verde e blu è il bianco, nella sintesi sottrattiva il colore
risultante dalla somma di ciano, magenta e giallo è il nero.
![Page 38: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/38.jpg)
La ragione è che avendo ognuno dei colori primari della sintesi sottrattiva (ciano, magenta e giallo) il potere di assorbire una delle tre differenti parti
della radiazione visibile, mescolandoli tutti e tre l'intero spettro visibile verrà assorbito e nessuna luce sarà riflessa
verso l'osservatore.
![Page 39: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/39.jpg)
La leggibilità del testo di un sito Web: tecniche pratiche
![Page 40: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/40.jpg)
I colori complementari sono particolari in quanto, quando vengono avvicinati,
essendo fra di loro in massimo contrasto, creano all’occhio un
particolare effetto tremolio che rende difficilissima la messa a fuoco e
affatica la vista, rendendo difficile la lettura.
Eccone un esempio:
![Page 41: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/41.jpg)
![Page 42: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/42.jpg)
È chiaro quindi quanto sia importante ai fini della leggibilità di un testo
scegliere bene il colore del testo e dello sfondo.
Uno studio fatto da un’Università del Texas sulla leggibilità in funzione dei colori di testo e sfondo ha riportato i
seguenti risultati:
![Page 43: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/43.jpg)
Le coppie di parola/sfondo più leggibili erano:
![Page 44: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/44.jpg)
GRIGIO
![Page 45: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/45.jpg)
NERO
![Page 46: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/46.jpg)
GIALLO
![Page 47: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/47.jpg)
BLU
![Page 48: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/48.jpg)
Le coppie di parola/sfondo meno leggibili erano:
![Page 49: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/49.jpg)
VERDE
![Page 50: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/50.jpg)
BLU
![Page 51: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/51.jpg)
Per scegliere i colori dello sfondo e del testo è bene quindi affinare il proprio
senso estetico basandosi su alcune elementari norme grafiche:
![Page 52: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/52.jpg)
Come abbiamo già sottolineato, il testo nero su uno sfondo bianco (o grigio molto chiaro) produce il contrasto migliore dei caratteri e la migliore leggibilità. Vediamo altri esempi:
![Page 53: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/53.jpg)
Gli sfondi neri sono assai meno leggibili di quelli bianchi, anche
quando si utilizzano caratteri bianchi per ottenere il massimo contrasto.
![Page 54: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/54.jpg)
Gli sfondi colorati possono funzionare come alternativa al grigio predefinito
dei browser se i colori vengono mantenuti in tonalità molto attenuate e con una saturazione di colore bassa (i pastelli, i grigi chiari e le tonalità di marrone chiaro sono i più adatti).
![Page 55: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/55.jpg)
L'abbinamento tra colori complementari ad esempio giallo e blu
può essere considerato armonioso.
![Page 56: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/56.jpg)
Viceversa, abbinare colori fortemente contrastati ad esempio rosso e blu tende
ad affaticare l'occhio del lettore e andrebbe dunque evitato.
![Page 57: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/57.jpg)
Come già anticipato, ricordate che i colori delle pagine Web, in quanto
visualizzati su un monitor, sono mediamente più vividi e brillanti dei
corrispettivi stampati su carta.
![Page 58: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/58.jpg)
Quando scegliete i colori per i vostri lavori ponete attenzione anche al
simbolismo che essi hanno sulla nostra psiche.
![Page 59: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/59.jpg)
Ecco una tabella che associa i colori alle sensazioni o ai concetti:
![Page 60: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/60.jpg)
Rosso: Passione, energia, amore, forza, azione. Sangue, guerra, pericolo, aggressività. È uno dei colori detti "salienti", ovvero che sembrano avvicinarsi all'osservatore.Verde: Natura, primavera, fertilità, denaro, tenacia, prontezza. Inesperienza, invidia. Usato come simbolo di via libera (es.semaforo); è inteso come colore "giovane".Giallo: Sole, estate, oro, ottimismo, disponibilità, altruismo. Malattia, vigliaccheria, azzardo. Particolarmente visibile anche in situazioni limite (es. antinebbia).Blu: Stabilità, calma, unità, soddisfazione, armonia, fedeltà, cielo, mare Depressione, conservatorismo. Molto usato come colore nelle aziende date le sue caratteristiche positive.Bianco: Neve, purezza, innocenza, pace. Freddo, ospedaliero, ambiente sterile.Grigio: Intelligenza, dignità, maturità. Ombra, noia, depressione, anonimato. Nero: Potenza, formalità, profondità, stile. Cattiveria, timore, morte.
![Page 61: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/61.jpg)
Particolare attenzione va quindi fatta per la scelta dei colori: se associate un colore che comunica un messaggio con
un altro che simboleggia il concetto opposto potreste risultare poco convincenti, o anche indecisi.
![Page 62: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/62.jpg)
È sempre consigliabile non usare troppi colori all'interno dello stesso layout, ed
è sempre meglio, a parte casi eccezionali, evitare gli sfondi con
immagini elaborate che diminuiscono drasticamente la leggibilità e affaticano
inutilmente l'occhio.
![Page 63: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/63.jpg)
Come abbiamo visto, è già difficile operare una scelta tra colore di primo piano e di sfondo, quando lo sfondo è costituito da un solo colore. Quando lo sfondo è un'immagine costituita da una trama complessa di colori, mantenere un contrasto sufficiente con il testo
diventa ancora più complesso.
![Page 64: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/64.jpg)
Per esempio, alcune zone dell'immagine di sfondo conservano un
sufficiente livello di contrasto, altre zone no. La presenza di un'immagine
sotto il testo distrae inoltre l'attenzione del lettore.
![Page 65: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/65.jpg)
Un’altra importante raccomandazione, per garantire una buona leggibilità dei
testi agli utenti, è quella di evitare assolutamente di inserire sfondi grafici
compositi sotto i testi.
Ecco alcuni esempi:
![Page 66: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/66.jpg)
![Page 67: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/67.jpg)
![Page 68: Colore nel web](https://reader035.fdocuments.net/reader035/viewer/2022062821/589b6a901a28abdd258b50a3/html5/thumbnails/68.jpg)
Fate scelte oculate per leggibilità e significato e preferite sempre la
semplicità all’esagerazione e all’estro.
Non sempre stupire a tutti i costi Non sempre stupire a tutti i costi paga! paga!