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:

Esadecimali0123456789ABCDEF
Interi0123456789101112131415

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

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)

colori esadecimali

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!

Blue TG

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.

Color Palettes – Color Scheme

BrandColors.net

Brand-Colors

Divertitevi!