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!