domenica 23 ottobre 2011

RGB e i codici esadecimale dei colori

Parliamo un pò di colori!

Sapete, dopo tre giorni trascorsi con la mia nipotina a colorare disegnini .....qualcosa la dovevo pur scrivere sull'argomento :)

Spesso ci imbattiamo in sigle quali RGB, #FFFFFFF, CMYK, HSV, o in parole criptiche quali esadecimale, decimale, truecolor, HEX etc.

Vabbè, mi rendo conto che il discorso da fare sarebbe lunghissimo, mi limito perciò all'essenziale. Non escludo approfondimenti in futuri post!

Partiamo dall'acronimo RGB. Esso è un modello di colori che permette di rappresentare gli stessi in forma numerica.

E modelli di colori sono anche CMYK e HSV. In questo post, tuttavia, mi soffermerò solo sul modello RGB

Il modello RGB si basa su tre colori: Il rosso, il verde e il blu.

Lo stesso nome RGB è costituito dalle iniziali dei rispettivi nomi in inglese (Red, Green, Blue)

Ora, miscelando questi tre colori tra loro otterremo lo spettro di tutti i colori visibili, eccetto alcuni.


 E' bene tenere presente due cose:
  • Ogni punto di un'immagine è rappresentato da un livello di «rosso», uno di «verde» e uno di «blu».
  • ognuno di questi tre colori ha 256 livelli di intensità.

Cosa significa tutto questo?
In sintesi, ogni immagine è data sempre dalla somma di tre colori: Il rosso, il verde e il blu.
Dato che ogni colore può avere 256 intensità, se ne deduce che abbiamo ben 16.777.216 colori. Basta moltiplicare 256*256*256, che avremo tutte le combinazioni possibili.

L'intensità massima di ciascuno di questi tre colori ci dà il bianco che, secondo il modello RGB, viene rappresentato dalla seguente tripletta: 255 255 255.
Basta cambiare l'intensità di uno solo dei tre colori,  che avremo un colore diverso.

Ad es.
255 0 0 indica evidentemente il rosso.
0 127 255 indica l'azzurro. etc. etc.

Da questi due esempi possiamo trarne due dati:
  • lo zero rappresenta l'assenza del colore
  • il valore 255 rappresenta la massima intensità di un colore
Come dicevo sopra, spesso i colori vengono indicate con sigle di questo genere: #FFFFFF, #0000FF, #00A86B, etc

Queste sigle altro non sono che i codici esadecimale dei colori.

I numeri esadecimali 
  • I numeri esadecimali sono numeri in base 16 e più precisamente sono: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
  • Seguendo questa scaletta potete notare che dopo il 9 ci sta la lettera A, B e via dicendo sino alla lettera F.
  • Diciamo subito che A sta per 10; B sta per 11...F sta per 15.

Ritorniamo alla tripletta (decimale) RGB

Prendiamo, ad esempio, l'azzurro, che abbiamo detto essere rappresentato da 0 127 255.

Bene! Ora farò la conversione dell'azzurro, dal sistema decimale a quello esadecimale. Solo così ne coglieremo veramente la portata.

Piccola premessa
Anche il codice esadecimale di un colore è costituito da una tripletta preceduta da questo simbolo "#"
Se un valore è maggiore di 16 va diviso per 16. E si tiene conto sia del risultato della divisione che del resto.
Se il valore è minore di 16 avremo le seguenti equivalenze:
0=00; 1=01; 2=02; 3=03; 4=04 e così fino a 9; poi avremo: 10=A; 11=B; 12=C; 13=D; 14=E; 15=F


Iniziamo con la conversione
Prendiamo il primo numero dell'azzurro, lo zero. In esadecimale diventa "00" Abbiamo così il primo binomio della tripletta.

Passiamo al secondo numero, il 127. Va diviso per 16. il risultato sarà 7, il resto 15. Dato che il 15 è pari, nella scala esadecimale, a F avremo che il secondo binomio della tripletta sarà 7F

Passiamo all'ultimo numero, 255. Dividendolo per 16 avremo: 15 come risultato e 15 come resto. Quindi il terzo binomio della tripletta sarà pari a FF. Questo perchè 15, nel sistema esadecimale, è F.

Avremo così che azzurro= 0 127 255 (sistema decimale)= #007FFF (sistema esadecimale)

Vi lascio con la lista dei colori (qui) Spero che ora sia più chiara! :D

 Ciao!

6 commenti:

  1. Ottimo post! Sei stato molto chiaro, come sempre :)

    RispondiElimina
  2. Complimenti!! ho scoperto da poco questo blog ma è davvero una miniera di informazioni speciali...

    RispondiElimina
  3. @Carlo
    Grazie tante. Troppo gentile. :)

    RispondiElimina
  4. Gran bell'articolo.. Perché non fai uno scripttino ;)

    RispondiElimina
  5. @Lightuono
    Lo sto preparando :D

    RispondiElimina