Codici colore HTML+CSS

Come modificare i colori in HTML con i CSS? Questa è una domanda che mi rivolgono molte persone, alle quali rispondo che, con un po' di pratica, è veramente molto semplice, anche scrivendo direttamente il codice e senza l'ausilio di editor visuali.

Per comprendere a fondo questo articolo dovresti conoscere almeno un po' di numerazione esadecimale. Nel caso tu sia del tutto digiuno, ti consiglio di leggere prima un altro mio articolo: "Bit, Byte, KiloByte, MegaByte, GigaByte, TeraByte: AIUTO!", in particolare la sezione "Il sistema esadecimale" e, se non sai cosa sono i CSS, puoi leggere l'articolo "Fogli di stile CSS: cosa sono e come applicarli".

Un po' di Fisica

Come sicuramente saprai già, è possibile riprodurre praticamente qualsiasi colore "sommando", in diverse proporzioni, tre colori primari: ROSSO (Red in inglese), VERDE (Green) e BLU (Blue), che chiameremo componenti RGB.

Questo vale della sintesi additiva, cioè quando, partendo dall'assenza di colore (nero), si sommano i colori come avviene, per esempio, sui monitor dei computer e sui televisori.

Nota: nella stampa, invece, si applica la sintesi sottrattiva, cioè si parte da "tutti i colori" (bianco) e, tramite gli inchiostri, si sottraggono quelli fondamentali, cioè ciano, magenta e giallo (CMY), che si ottengono da particolari miscele di rosso, verde e blu, come vedremo più avanti.

In informatica si è deciso di assegnare un Byte a ciascuna componente, in modo da poterla "regolare" su 256 livelli diversi (da 0 a 255).

In questo modo, miscelando diversamente le tre componenti RGB, è possibile ottenere più di 16 milioni di colori diversi (256³ = 16.777.216), che probabilmente sono molti di più di quanto possono apprezzare l'occhio e il cervello umano... femminili! Sì, perché noi maschietti ne distinguiamo molti di meno e ci basterebbe una "palette" di un centinaio di colori per soddisfare qualsiasi esigenza!
Io poi ne distinguo al massimo una trentina!

Ovviamente, come dimostrano le faccine sorridenti, sto scherzando ma... quanti di voi maschietti non si sono mai chiesti quale impercettibile differenza cromatica ci fosse tra due vestiti sui quali eravate chiamati a esprimere un'opinione, quasi sempre (giustamente) inascoltata?

Ma torniamo a parlare dei codici colore...

Dalla teoria alla pratica

Cominciamo a vedere cosa succede se misceliamo questi colori al 100%, cioè ogni colore può essere semplicemente "acceso" (255) o "spento" (0), senza valori intermedi:

ROSSO 0 + VERDE 0 + BLU 0 = NERO

ROSSO 255 + VERDE 255 + BLU 255 = BIANCO

ROSSO 0 + VERDE 255 + BLU 255 = CIANO

ROSSO 255 + VERDE 0 + BLU 255 = MAGENTA

ROSSO 255 + VERDE 255 + BLU 0 = GIALLO

Osservando i primi due esempi della tabella precedente, si può facilmente intuire che, quando i tre colori hanno livelli uguali, si ottiene un grigio che ha una gradazione uguale a quella dei tre colori che lo compongono, da 0 (nero) a 255 (bianco). Verifichiamolo con qualche esempio:

ROSSO 50 + VERDE 50 + BLU 50 = GRIGIO 50

ROSSO 100 + VERDE 100 + BLU 100 = GRIGIO 100

ROSSO 150 + VERDE 150 + BLU 150 = GRIGIO 150

ROSSO 200 + VERDE 200 + BLU 200 = GRIGIO 200

Puoi sperimentare le diverse combinazioni di colori utilizzando un ottimo "tool" presente su questa pagina di w3schools.com.

Il Codice

Per modificare il colore di un testo si può utilizzare lo stile CSS color: valore, dove il valore può essere indicato tramite tre coppie esadecimali #RRGGBB oppure in decimale con la sintassi rgb(RRR, GGG, BBB)

Per esempio, volendo scrivere "Testo di prova" col colore magenta, possiamo utilizzare il codice
<span style="color: #ff00ff;">Testo di prova</span>.
In questo modo abbiamo richiesto un rosso di valore 255 (#ff in esadecimale), un verde a 0 (#00) e un blu a 255 (#ff) ed ecco il risultato:

Testo di prova

Per ottenere un grigio 200 utilizziamo la stessa tecnica impostando i tre colori a 200 (#c8 in esadecimale) tramite il codice
<span style="color: #c8c8c8;">Testo di prova</span>.
Così facendo otteniamo:

Testo di prova

Ora riproduciamo lo stesso colore magenta utilizzando, però, l'altra sintassi per indicare il colore, cioè
<span style="color: rgb(255, 0, 255);">Testo di prova</span>.
Come puoi vedere funziona ugualmente:

Testo di prova

Un altro metodo per indicare un colore è quello di utilizzare il suo nome. Però la lista dei colori è limitata soltanto a 140 nomi.

La sintassi è simile alla precedente e, per indicare il colore magenta, si può utilizzare il codice
<span style="color: magenta;">Testo di prova</span>, con questo risultato:

Testo di prova

Analogamente, si può cambiare il colore dello sfondo, aggiungendo lo stile background-color. Questo è il codice per avere il testo bianco su fondo rosso:
<span style="color: #ffffff; background-color: #ff0000;">Testo di prova</span>.
Questo è il risultato ottenuto:

Testo di prova

Volendo possiamo cambiare il colore di fondo in "acqua marina", il testo in nero e aggiungere un bordo rosso con uno spessore di 3 pixel:
<span style="color: #000000; background-color: #7fffd4; border: 3px solid #ff0000;">Testo di prova</span>.

Testo di prova

Insomma, con i CSS praticamente è possibile modificare il colore di qualsiasi oggetto, sempre con lo stesso metodo: una miscela dei colori rosso, verde e blu e spero che questi piccoli esempi abbiano reso il funzionamento del metodo RGB un po' più chiaro.

La trasparenza

Una variante della sintassi rgb(RRR, GGG, BBB) ci permette d'impostare anche la trasparenza, detta anche alpha channel (canale alfa) utile, per esempio, quando si desidera scegliere il colore di uno sfondo lasciando intravedere gli oggetti che sono sotto quello di cui stiamo stabilendo il colore.

La sintassi è leggermente diversa dal normale colore RGB ed è rgba(RRR, GGG, BBB, A.A). Notiamo rgba utilizzato al posto di rgb e la presenza di quattro valori invece di tre tra le parentesi.
I primi tre valori continuano a rappresentare i livelli RGB mentre il quarto (A.A) rappresenta l'opacità, con un valore compreso tra 0.0 e 1.0, dove 0.0 è completamente trasparente mentre 1.0 è completamente opaco (non trasparente).

Questa possibilità può essere utile in molti casi. Eccone uno:

Immagina di avere sulla tua pagina un'immagine e di voler avere, sovrapposto a quest'immagine, un rettangolo semi-trasparente con un testo al suo interno in modo da rendere leggibile il testo che altrimenti si confonderebbe con l'immagine, come in questo esempio:

In questo caso lo stile adottato per lo sfondo del testo è background-color: rgba(0, 0, 0, 0.5);. Cioè nero (R:0 G:0 B:0) con una trasparenza del 50% (alpha:0.5).

È possibile anche impostare un gradiente di trasparenza, cioè una opacità sfumata che va da 0 ai lati (completamente trasparente) a 0,8 al centro (trasparente al 20% oppure, se preferisci, opaco all'80%), in questo modo:

La sintassi in questo caso è un po' più complessa e non voglio confonderti con ulteriori codici, ma ho voluto mostrarti questo esempio per darti una visione il più ambia delle tante possibilità che i CSS offrono, informandoti anche del fatto che lo stesso effetto di sfumatura è possibile ottenerlo anche sui colori, non solo sulla trasparenza:

Conclusioni

Ovviamente puoi divertirti a provare diverse combinazioni di colori ma ricordati che dopo ogni modifica del file .html che stai utilizzando per fare le prove, devi ricaricare la pagina nel browser (premi il tasto F5) per vederne gli effetti.

Un piccolo "trucchetto" finale: i cosiddetti "colori pastello" si ottengono miscelando valori RGB con intensità superiori al 50%, cioè 128 nella scala da 0 a 255 oppure #80 in esadecimale, nella scala da #00 a #ff.
Quindi, per esempio, un azzurro pastello si può ottenere con i valori decimali 175,238,238 o #afeeee in esadecimale, con questo risultato:

ROSSO 175 + VERDE 238 + BLU 238 = Azzurro pastello

Vuoi un libro sull'HTML?

Grazie per avermi letto fin qui!

Fabio Donna