La codifica RGB dei colori

E' comunemente accettato che qualsiasi tonalità di colore possa essere ottenuta mescolando insieme rosso, giallo e blu. Giallo e blu danno il verde, il rosso e il giallo l'arancione, e così via. Questi tre colori vengono chiamati "primari" perchè da essi derivano tutti gli altri. Anche in un computer i colori vengono gestiti tramite la combinazione di tre diversi colori, anche se in questo caso il giallo viene sostituito dal verde: in informatica i colori primari sono rosso, verde e blu. Dalla miscelazione delle loro diverse tonalità vengono rappresentati tutti i colori che vediamo su schermo:

La rappresentazione RGB (Red, Green, Blue) di un colore è quindi un codice che identifica le tre diverse tonalità, e viene indicato con una stringa di sei caratteri, dove i primi due indicano la tonalità di rosso, i due al centro indicano quella di verde, e gli ultimi due rappresentano il blu. Ogni singolo carattere indica un numero esadecimale.

La numerazione esadecimale

Nel sistema decimale, i numeri vanno da 0 a 9, combinandoli assieme generiamo tutti gli altri. In un sistema esadecimale, i numeri vanno da 0 a 15, con le cifre maggiori di 9 indicate da una lettera:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Ad esempio, A0 in decimale è 160, mentre FF è 255.

La codifica RGB nell'HTML

Mi è capitato spesso di parlare di codifica RGB per i colori del testo o dello sfondo nel codice HTML. In una pagina web, infatti, i colori vengono rappresentati nel modo in cui "li capisce" il computer, usando sei caratteri esadecimali accoppiati a due a due, formando una combinazione di 16 milioni di colori che vanno dal 000000 (bianco) al FFFFFF (nero).

Non è necessario comprendere appieno questo meccanismo, ma ho voluto dare comunque l'infarinatura per afferrare i concetti di base. Quello che è più importante, è come fare a scegliere la giusta codifica RGB quando vogliamo usare un colore. Aumentando la prima coppia di caratteri aumentiamo il valore di rosso, con la seconda aumentiamo il verde, e con la terza il blu, tenendo presente che FF è il massimo. Quindi se vogliamo usare il blu per il colore di un elemento HTML, useremo:

0000FF

cioè azzeriamo rosso e verde e massimizziamo il blu per avere solo quello. In base all'immagine in alto, il giallo si ottiene miscelando rosso e verde, quindi:

FFFF00

cioè escludiamo il blu e massimizziamo gli altri. Possiamo scurire la tonalità usando valori meno alti, per esempio:

999900

ci darà un giallo più scuro del precedente.

Proviamo le combinazioni con Color Scheme Online

Per provare le combinazioni di colori, possiamo usare Color Scheme Online:

Basta inserire il valore esadecimale nella casella di testo con # davanti e cliccare su Set HEX per vedere in alto il colore generato:

In questo caso ho creato il giallo usando il codice indicato prima. E' possibile inserire anche i valori decimali delle tonalità di colore (da 0 a 255) se ci viene difficile ragionare in esadecimale. Cliccando su Set RGB i tre valori generano il colore finale e vengono convertiti nella codifica esadecimale che potremo usare nelle nostre pagine HTML.

Per aiutarci, lo strumento ha sotto uno spettro di colori, cliccandoci sopra ci viene data la codifica esadecimale, pronta per essere copiata e incollata nel nostro codice o per essere cambiata quel tanto che ci serve. Se vi cimentate spesso in modifiche del vostro template, Color Scheme Online va sicuramente messo nei vostri siti preferiti.

Sapere la codifica RGB di un colore su schermo

Potreste trovarvi davanti una pagina web o una foto e voler sapere la codifica RGB di un particolare colore. Un buon strumento è ColorPic, che potete scaricare gratuitamente (vi verrà richiesto di registrarvi alla mailling list, ma potete evitarlo cliccando su "Skip Joining and Download Now"). Una volta scaricato ed eseguito il programma, vi basterà avviarlo, selezionare una casella vuota e muovere il mouse sullo schermo:

Quando siete sopra il colore che vi interessa, usate la combinazione di tasti CTRL+ G per memorizzarla.

Per concludere

Per qualsiasi perplessità, o per maggiori chiarimenti, lasciatemi un commento.

L'immagine all'inizio del post è stata prelevata da Wikipedia.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!