Post on 09-Feb-2017
I COLORI NEL WEB
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.
Il sistema esadecimale di codifica dei colori
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.
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.
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
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.
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 #.
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.
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.
Questo è purtroppo un limite intrinseco delle tecnologie Web e non c'è modo di
garantirsi un'assoluta fedeltà di riproduzione di colori.
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
Colori primari, secondari e complementari
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.
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.
Da questa suddivisione otteniamo le coppie di complementari, ovvero le
coppie composte da un primario e dal secondario ottenuto dalla mescolanza
degli altri due.
Le coppie di colori complementari sono:
- rosso e verde (verde = giallo + blu) - giallo e viola (viola = blu + rosso)
- blu e arancio (arancio = giallo + rosso)
Colori caldi e colori freddi
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".
Cosa sono i colori Web safe?
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.
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".
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.
Sintesi addittiva e sottrattiva:
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.
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:
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).
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.
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.
La sintesi additiva è basata sull'emissione e dunque sull'addizione
o sovrapposizione della luce.
Lo “spazio colore degli stampanti” è basato sull'assorbimento e dunque sulla sottrazione della luce da parte dei corpi fisici e quindi sulla sintesi sottrattiva.
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).
È importante notare inoltre che i colori CMYK risultano di solito meno
brillanti di quelli RGB.
È 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.
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.
La leggibilità del testo di un sito Web: tecniche pratiche
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:
È 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:
Le coppie di parola/sfondo più leggibili erano:
GRIGIO
NERO
GIALLO
BLU
Le coppie di parola/sfondo meno leggibili erano:
VERDE
BLU
Per scegliere i colori dello sfondo e del testo è bene quindi affinare il proprio
senso estetico basandosi su alcune elementari norme grafiche:
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:
Gli sfondi neri sono assai meno leggibili di quelli bianchi, anche
quando si utilizzano caratteri bianchi per ottenere il massimo contrasto.
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).
L'abbinamento tra colori complementari ad esempio giallo e blu
può essere considerato armonioso.
Viceversa, abbinare colori fortemente contrastati ad esempio rosso e blu tende
ad affaticare l'occhio del lettore e andrebbe dunque evitato.
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.
Quando scegliete i colori per i vostri lavori ponete attenzione anche al
simbolismo che essi hanno sulla nostra psiche.
Ecco una tabella che associa i colori alle sensazioni o ai concetti:
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.
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.
È 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.
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.
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.
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:
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!