Colori esadecimali, come funzionano?
Tutti noi abbiamo visto almeno una volta i colori esadecimali, assomigliano a qualcosa di simile #efefef. Questo è un grigio molto tenue, ad esempio. Ma, esattamente, cosa significa questo?
Esadecimale
Tutti abbiamo sentito barlare di “binari”, ma gli esadecimali? Esadecimale – o “hex” oppure “base 16” è una alternativa al binario, che è a base 2. Esadecimale, quindi, può essere utilizzato per “memorizzare” numeri. Ok, ma come funziona allora?
Esadecimali – Le basi per capirli
Negli esadecimali ci sono 16 possibili caratteri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F. Ogni carattere rappresente un numero intero da 0 a 15. Date un occhio alla tabella che c’è di seguito:
| Esadecimali | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Interi | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Qualche esempio
Ora che sappiamo cosa significano tutti i caratteri, grazie alla nostra tabella, iniziamo a convertire interi in esadecimali.
Iniziamo dividendo 5.051 per 16. Questo ci da 315 con un avanzo di 11 (315*16=5040). Guardando la tabella sopra, scopriamo che 11 è uguale a “B”. Perfetto, accantoniamo “B” e proseguiamo.
Dividiamo 315 per 16; otteniamo 19 e avanza 11 (ancora), quindi mettiamo da parte un’altra “B” e andiamo avanti.
Dividiamo 19 per 16 e otteniamo 1 con un avanzo di 3. Il 3 nella nostra tabella è uguale a “3”, quindi accantoniamolo e accantoniamo anche l’1, che – in esadecimale – è uguale a 1.
Ottimo, abbiamo la nostra sequenza di caratteri: B – B – 3 – 1
Li metteremo insieme in ordine inverso per ottenere il nostro valore esadecimale, prima – però – aggiungiamo “0x” che simboleggia un valore esadecimale e otterremo – finalmente – il nostro esadecimale completo: 0x13BB
Proviamo ancora: convertiamo 353 in esadecimale.
Come sempre dividiamo 353 per 16. Abbiamo un risultato di 22, con un avanzo di 1 (22*16=352). 1, nella nostra tabella, equivale a “1” anche in esadecimale; accantoniamolo e proseguiamo.
Dividiamo 22 per 16 e otteniamo 1 con un avanzo di 6. 6 in esadecimale è “6”. Accantoniamolo ancora una volta e proseguiamo.
L’1 che è rimasto, in esadecimale, è “1”.
Abbiamo ora il nostro esadecimale: aggiungiamo sempre “0x” davanti e invertiamo i risultati. 0x161
Ora abbiamo – spero – capito come funzionano i numeri esadecimali.
Codici Colore
Come ho detto ad inizio articolo, i codici colore esadecimali di solito assomigliano a: #efefef , ma cosa significa? Bene, “traduciamolo”!
RGB
RGB sta per Rosso, Verde e Blu (Red – Green – Blu). Questi sono i colori primari della luce.
Un valore RGB è una cosa simile a questo: rgb(0, 136, 204)
Visto così, questo codice potrebbe non rappresentare molto, ma se osserviamo meglio capiremo che il primo codice è relativo al Rosso, il secondo è relativo al verde e il terzo al blu.
Cosa possiamo capire ora?
Possiamo capire che nel codice è presente molto blu (80 su 100) e un po’ di verde (53 su 100); questo dovrebbe farci intuire che il colore è un blu tenue.
Colori esadecimali
Ora che abbiamo capito come funzionano i colori RGB, proviamo a capire come funzionano i colori hex.
Un colore esadecimale come già detto (un paio di volte), sarà così: #efefef. Ma cosa significa esattamente?
Proviamo a combinare ciò che sappiamo su RBG ed esadecimali per capirlo.
Partiamo da due punti fissi:
Il bianco in RBG è rgb (255, 255, 255) – FFFFFF
Il nero in RGB è rgb (0, 0, 0) – 000000
FF in esadecimale significa 255 e sappiamo che 255 è il valore massimo per RGB.
Quindi il nostro #efefef cosa significa?
14-15-14-15-14-15
Traduciamo! I codici vanno suddivisi così: (14 – 15) – (14 – 15) – (14 – 15)
Come abbiamo visto prima, dobbiamo semplicemente moltiplicare il primo (14) per 16 e otterremo un risultato di 224. A questo dobbiamo sommare il 15. Risultato? 239
Perché? Dovrete fare così: [(14*16)+15]
Ora sappiamo che il nostro #efefef è RGB (239,239,239)
Conclusione
Ottimo! Dopo aver letto questo articolo, spero tu sia in grado di capire come funzionano i colori esadecimali, come i primi due caratteri siano relativi all’intensità di rosso, di verde e di blu per i colori RGB.
Spero tu abbia imparato qualcosa di nuovo e spero tu voglia commentare qui sotto…
Extra
Sapevate che esistono siti che raggruppano i colori di tutti i brand più famosi? Esatto, qualcuno ha raggruppato i codici colore dei marchi più famosi, dei siti internet più famosi, delle case, ecc. Ad esempio il primo esempio che vi ho fatto sul “blu tenue” è il codice colore del blu di Telegram!
Questi sono i siti che mi sento di consigliarvi per cercare il codice colore di un marchio o brand che vi interessa. Potrete utilizzarlo per – ad esempio – personalizzare la vostra firma nelle mail, personalizzare le vostre pagine web, ecc.
Divertitevi!
