I colori del web e del mondo

La scelta dei colori da utilizzarsi nello sviluppo di un qualsiasi progetto è sempre un’operazione estremamente critica. In questa mini guida indico alcuni elementi che possono agevolare un giusto approccio alla problematica in questione. Ciò vale sia in un contesto specifico come quello relativo ad un progetto web sia più in generale in relazione ad un qualsiasi ambito produttivo.

In linea generale, con particolare riferimento al linguaggio HTML e quindi per lo sviluppo di pagine web, il valore di un colore può essere espresso sia attraverso un numero esadecimale che tramite uno dei seguenti sedici nomi di colori:

 

Black = “#000000” Green = “#008000”
Silver = “#C0C0C0” Lime = “#00FF00”
Gray = “#808080” Olive = “#808000”
White = “#FFFFFF” Yellow = “#FFFF00”
Maroon = “#800000” Navy = “#000080”
Red = “#FF0000” Blue = “#0000FF”
Purple = “#800080” Teal = “#008080”
Fuchsia = “#FF00FF” Aqua = “#00FFFF”

Il valore esadecimale deve essere preceduto dal simbolo # e si parla in questo caso di codifica RGB, dalle iniziali dei colori in lingua inglese:  Red, Green, Blue. Così, come facilmente osservabile dalla tabella in oggetto, il valore #FFFF00 e Yellow si riferiscono entrambi al giallo.

Il codice RGB  prevede la composizione di un unico colore attraverso le tre componenti fondamentali di rosso (Red), verde (Green) e blu (Blue) utilizzando un numero esadecimale a due cifre (da 00 a FF). Tale sistema è noto con modello additivo in quanto si passa dall’assenza di colore (il nero) alla massima espressione del colore (il bianco) aggiungendo man mano gradazioni di colore. Basta un attimo di riflessione per collegare questo sistema a quanto avviene con i classici sistemi di visualizzazione elettronici in cui si parte effettivamente dal nero, come elemento iniziale dello schermo di visualizzazione, nel momento in cui esso risulta spento.

Ogni colore in esadecimale è così espresso nella forma:

 

#RRGGBB

 

dove RR, GG, BB rappresentano rispettivamente le due cifre esadecimali per le componenti rosso, verde e blu. Si ha così che il codice #000000, avendo tutte le componenti a zero, indica il nero,mentre #FFFFFF, con tutte le componenti al valore massimo FF rappresenta il bianco, #FF0000 con la sola componente rossa al massimo rappresenta il rosso, e così via miscelando tra loro le varie componenti. Con tale sistema è possibile creare oltre 16 milioni di differenti combinazioni di colore.

Un diverso approccio alla gestione dei colori prevede un modello sottrattivo per cui si passa dalla massima presenza di colore, ovvero il bianco, all’assenza totale di colore, ovvero il nero. Il nome, sottrattivo, deriva appunto dall’aspetto per il quale si sottrae luminosità allo stato iniziale man mano che si aggiungono componenti di colore. Anche in questo caso è estremamente intuitivo collegare questo tipo di sistema ad una tecnologia di rappresentazione visiva riconoscendo tale approccio applicato normalmente alla stampa. Infatti, di norma, in fase di stampa partiamo dal foglio bianco per arrivare, come massima combinazione di colori al nero. I colori utilizzati in questo schema sono normalmente il ciano, il giallo e il magenta, in inglese, Cyan, Magenta, Yellow, da cui il nome dello schema CYM. Per produrre il nero si applicano al massimo le componenti dei tre colori citati. Tuttavia, il colore nero ottenuto non è sempre soddisfacente per cui a tali colori si aggiunge una quarta componente di nero puro ottenendo un sistema noto come CYMK.

Ovviamente, non è sufficiente conoscere i modelli ed i codici dei colori per produrre una composizione degli stessi che sia gradevole all’occhio e consistente per lo specifico progetto. In tale ambito, ci vengono in aiuto alcuni specifici strumenti che ci consentono di realizzare una scelta oculata grazie alla guida di una serie di vincoli che legano tra loro i colori. Infatti, la teoria dei colori è più complessa di quanto si possa immaginare. Per avere un’idea di tali strumenti e della complessità della scelta è possibile fare riferimento ai seguenti due strumenti web:

http://paletton.com/

https://color.adobe.com/

Si vedrà come risulta maggiormente agevole la scelta di determinate combinazioni in quanto guidati, ad esempio,  in modo automatico dal legame che esiste tra i colori cosiddetti primari  (così denominati in quanto essi non possono essere ottenuti dalla mescolanza di altri colori) ed i colori secondari che appunto si ottengono dalla combinazione di colori primari. Per agevolare tali operazioni i colori vengono disposti di norma su di una sorta di rosa dei colori (ache detta scala cromatica dei colori )in cui i colori si collocano per vicinanza cromatica. In tal modo, determinate coppie di colori possono essere scelte in base alla vicinanza oppure in base al fatto che si trovino ad essere in un certo senso completamente diversi tra loro. Tali colori collocati sulla rosa dei colori in posizione opposta vengono definiti colori complementari.

Per finire questo breve viaggio nel mondo dei colori vi segnalo un interessante post di Jesse Miller che potete trovare all’indirizzo:

https://www.jenreviews.com/color-meaning/

Il post ha come titolo “Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean” ovvero il significato dei colori con un particolare accento rivolto all’ambito del simbolismo e del condizionamento psicologico che i colori realizzano su di noi. Un viaggio davvero interessante che vale la pena di fare a costo di un eventuale piccolo sforzo di traduzione dall’originale inglese.

 

Carlo A. Mazzone

Supportaci condividendo sui social il nostro articolo!