Qual è il codice esadecimale? Tutto quello che devi sapere

Lavorare con i colori in HTML è relativamente semplice. Con poche semplici dichiarazioni CSS, puoi modificare il colore di qualsiasi testo o sfondo sulla tua pagina web. Ma come si specifica un colore? La risposta a questa domanda ci porterà in una tana del coniglio che alla fine ci porterà al concetto di codici colore esadecimali.

Se hai già lavorato con HTML o CSS, probabilmente hai sentito il termine codice esadecimale. Ma cos'è esattamente un codice esadecimale? Quali sono alcuni esempi di codici esadecimali? Qual è la differenza tra un codice esadecimale e un codice colore RGB?

Che cos'è il codice esadecimale?

Quando inizi a lavorare con il colore per la prima volta, potresti utilizzare un'interfaccia grafica per scegliere i colori da applicare agli elementi della tua pagina. Quando inizi a guardare il codice sottostante piuttosto che solo il tuo editor grafico, scopri che i colori appaiono come sequenze di caratteri dall'aspetto strano. Tali sequenze sono note come codici esadecimali; assomigliano a questo:

#FF0092

Imparentato: Termini di progettazione grafica essenziali che devi conoscere

Puoi specificare i colori nei CSS in diversi modi. È possibile utilizzare i nomi di alcuni colori predefiniti come rosso e magenta scuro. Per specificare le sfumature di colore esatte, tuttavia, dovrai utilizzare una misurazione più precisa: qualcosa di numerico.

CSS offre due opzioni principali: RGB ed esadecimale. In entrambi i formati, specifichi le quantità di rosso, verde e blu che compongono il colore finale. RGB utilizza tre numeri compresi tra 0 e 255. Hex fa esattamente lo stesso, solo con una base diversa (16) rispetto al decimale (10) a cui sei abituato.

Hex utilizza le lettere A-F, oltre alle cifre 0-9, per un totale di 16 simboli. A in esadecimale è l'equivalente di 10 in decimale. F in esadecimale è 15 in decimale.

Come funzionano i codici colore esadecimali?

Nella sua forma più elementare, un codice esadecimale è una rappresentazione di quanto rosso, verde e blu esistono in un colore. Un codice esadecimale è composto da sei caratteri. Le prime due si riferiscono alla quantità di rosso presente nel mix, le due successive si riferiscono alla quantità di verde presente e le ultime due cifre riflettono la quantità di blu. I codici esadecimali si riferiscono a colori specifici, consentendo a designer e sviluppatori di comunicare facilmente sulle combinazioni di colori.

Con 16 × 16 (256) valori per ogni componente di colore, sono quindi possibili 256 × 256 × 256 combinazioni. In esadecimale, vanno da #000000 (nero puro) a #FFFFFF (bianco puro).

Come leggere i codici colore esadecimali

Dare un senso ai codici colore esadecimali è facile. Prendiamo l'esempio di #FF5733. Per prima cosa, dividi i sei caratteri in tre parti contenenti due caratteri ciascuna. Come sapete, le prime due parti rappresentano il rosso, le seconde due parti rappresentano il verde e le terze due parti rappresentano il blu. Quindi, nel nostro esempio:

• La componente rossa, RR, ha il valore FF.
• La componente verde, GG, è 57.
• La componente blu, BB, è 33.

Ora, per trovare l'intensità di questi segmenti di colore, devi calcolare il numero esadecimale usando questi tre passaggi:

1. Moltiplica il primo carattere esadecimale di RR per 16. Se il carattere è una lettera, convertilo nel valore corrispondente. In questo caso, il primo carattere è F che è 15. Quindi, per il nostro esempio, stai moltiplicando 15 × 16 che equivale a 240.
2. Quindi, aggiungi il secondo carattere di RR. Di nuovo, converti una lettera nel valore corrispondente, se necessario. Nel nostro esempio, il secondo carattere è F che è uguale a 15.
3. Una volta fatto, aggiungi i totali per ottenere un unico valore. Se aggiungi 240 e 15 dal nostro esempio, vedrai che il valore di FF è 255.

Ripeti la stessa formula per i restanti due segmenti, GG indicato con 57 e BB indicato con 33. Se i calcoli manuali sembrano troppo complicati, puoi sempre utilizzare uno strumento di conversione da esadecimale a RGB (come Convertitore BinaryHex) per leggere un colore. Dovresti trovare che il valore esadecimale #FF5733 è equivalente a RGB (255, 87, 51).

Perché il codice colore esadecimale è così popolare?

Sebbene esistano diversi modelli di colore (RGB, CMYK, HSL), i codici colore esadecimali sono forse la rappresentazione più utilizzata. Questo perché sono semplici e facili da capire.

Anche un formato a larghezza fissa è molto utile. I colori esadecimali a lunghezza intera sono sempre sette caratteri, compreso l'inizio # simbolo.

I colori esadecimali sono molto efficienti, utilizzando solo questi sette caratteri per rappresentare più di 16 milioni di colori. E la differenziazione tra questi colori è un processo semplice.

esadecimale vs. RGB: c'è qualche differenza?

Il sistema RGB di codifica a colori utilizza tre numeri decimali per indicare le intensità relative di rosso, verde e blu. Utilizza le cifre 0-9.

Hex usa anche tre numeri per rappresentare rosso, verde e blu, ma usa cifre extra (AF) per soddisfare la base 16. Non c'è differenza nei colori risultanti, sono semplicemente formati diversi per comunicare le stesse informazioni.

Imparentato: Fondamenti di CSS: lavorare con i colori

A cosa serve il codice esadecimale?

Una varietà di applicazioni diverse utilizza l'RGB, dagli schermi televisivi ai dispositivi mobili, ai giochi e alla segnaletica. Vedrai principalmente codici colore esadecimali nel web design e in altri programmi di grafica.

Potresti anche vedere i codici esadecimali come un modo universale per identificare i colori. Molti siti Web li utilizzano per identificare un colore specifico poiché sono brevi e, di solito, non ambigui nel contesto.

Il codice colore esadecimale non è scienza missilistica

Quindi, ecco le basi dei codici colore esadecimali. Non sono esattamente una scienza difficile, ma servono a uno scopo preciso nel design (e nel mondo tecnologico). Se stai cercando uno strumento che ti aiuti a capire come funzionano i colori esadecimali, o uno che ti insegni la teoria del mix RGB, ce ne sono molti online. Ricorda, la chiave per imparare qualcosa di nuovo è fare un passo alla volta.

I codici colore esadecimali non sono la cosa più eccitante del mondo, ma è fondamentale capirli se lavori nel web design. Essere in grado di lavorare con codici colore esadecimali renderà il lavoro di progettazione molto più semplice.

Come trovare il valore esadecimale di qualsiasi colore sullo schermo

Scopri come scegliere qualsiasi valore di colore dallo schermo in pochi secondi. Particolarmente utile per i web designer!

Leggi Avanti

Circa l'autore