HEX e RGB: due modi per scrivere lo stesso colore
Ogni colore che vedi su uno schermo è ottenuto mescolando tre luci: rosso, verde e blu. Alzale tutte e tre al massimo e ottieni il bianco; spegnile tutte e ottieni il nero. HEX e RGB sono semplicemente due notazioni per descrivere quanto deve essere luminoso ciascuno dei tre canali. Indicano esattamente lo stesso colore, quindi un buon convertitore traduce semplicemente tra i due sistemi di scrittura senza mai cambiare la tonalità effettiva. Questo è ciò che fa questo strumento, interamente nel tuo browser, mostrando in tempo reale un campione di colore così puoi confermare il risultato con i tuoi occhi.
Come leggere un codice esadecimale
Un colore hex ha l'aspetto di #1E90FF. Il cancelletto indica solo l'inizio; i sei caratteri successivi sono tre coppie, scritte nel pattern #RRGGBB. La prima coppia è il rosso, la seconda è il verde, la terza è il blu. Ogni coppia è un numero scritto in esadecimale, ovvero in base 16, dove le cifre vanno da 0 a 9 e poi A, B, C, D, E, F rappresentano i valori da 10 a 15. Una coppia può contenere valori da 00 (canale completamente spento) a FF (completamente acceso). In decimale normale quell'intervallo è esattamente da 0 a 255, la stessa scala usata da RGB. Con 256 livelli possibili per canale, il formato a sei cifre può descrivere 16.777.216 colori distinti.
Conversione in entrambe le direzioni, con un esempio pratico
Per passare da HEX a RGB, dividi il codice nelle sue tre coppie e converti ciascuna dalla base 16 al decimale ordinario. Prendi #1E90FF. La coppia del rosso è 1E: è 1 moltiplicato per 16, più 14 (E), che fa 30. La coppia del verde 90 è 9 moltiplicato per 16, più 0, che fa 144. La coppia del blu FF è 15 moltiplicato per 16, più 15, che fa 255. Quindi #1E90FF diventa rgb(30, 144, 255) — il familiare dodger blue.
Il percorso inverso è lo stesso processo al contrario. Prendi ciascun numero RGB e scrivilo come due cifre esadecimali. Il rosso puro, rgb(255, 0, 0), dà FF, 00 e 00, che si uniscono in #FF0000. Vale la pena ricordare: se un valore è inferiore a 16, servono comunque entrambe le cifre, quindi 5 si scrive 05 e non solo 5. Il convertitore gestisce quel padding per te, ma mette in difficoltà chi lo fa a mano.
Dove viene usato ciascun formato
HEX è il linguaggio quotidiano del web. CSS, HTML e la maggior parte del codice che scrivi ricorrono ai codici hex perché sono compatti e facili da copiare. RGB tende a comparire all'interno di strumenti di design e di elaborazione immagini — Figma, Photoshop, Sketch e Illustrator mostrano di solito cursori o campi nell'intervallo 0-255, e le app di registrazione schermo o video spesso si aspettano RGB. Quindi capita spesso di prendere un codice hex da un foglio di stile e aver bisogno della forma RGB da digitare in un pannello di design, o viceversa. Quel passaggio di andata e ritorno è il motivo principale per cui un convertitore è utile. Se devi costruire un intero set di toni coordinati invece di tradurre un singolo colore, il nostro generatore di palette di colori è il punto di partenza migliore, e troverai ulteriori utilità come questa tra gli strumenti per sviluppatori.
Alpha, opacità e HSL
Entrambe le notazioni hanno una forma estesa che aggiunge la trasparenza. RGB diventa rgba(30, 144, 255, 0.5), dove il quarto valore è l'alpha — 0 è completamente trasparente e 1 è completamente solido. HEX aggiunge una quarta coppia allo stesso scopo, dando un codice a otto cifre #RRGGBBAA; 80, ad esempio, corrisponde a circa il 50% di opacità. Alcuni convertitori offrono anche HSL (hue, saturation, lightness), che descrive il colore nel modo in cui potrebbe farlo un essere umano — scegli una tonalità sulla ruota, poi regola la vivacità e la luminosità. HSL è un modello mentale diverso piuttosto che una palette diversa, quindi può essere più intuitivo quando vuoi rendere un colore più chiaro o più smorzato senza dover gestire tre numeri separati.
Domande frequenti
Il cancelletto fa parte di un codice hex?
Il cancelletto è un indicatore che segnala a CSS e agli strumenti di design che stai fornendo un colore esadecimale. Il colore vero e proprio è nei sei caratteri successivi. La maggior parte degli strumenti accetta il codice con o senza cancelletto e lo aggiunge da sola.
Qual è la differenza tra un codice hex a 3 cifre e uno a 6 cifre?
Un codice a 3 cifre è una forma abbreviata in cui ogni cifra viene raddoppiata, quindi #1AF significa #11AAFF. Raggiunge solo 4.096 colori, mentre il formato completo a 6 cifre ne raggiunge oltre 16 milioni.
Perché il mio codice hex ha otto caratteri?
Un codice hex a 8 cifre aggiunge una quarta coppia per l'alpha, ovvero la trasparenza. I primi sei caratteri sono ancora rosso, verde e blu, e gli ultimi due impostano l'opacità da 00 (invisibile) a FF (solido).
I codici hex sono case sensitive?
No. #1e90ff e #1E90FF descrivono esattamente lo stesso colore. Le lettere esadecimali funzionano allo stesso modo in maiuscolo o minuscolo, quindi usa quello che preferisce il tuo team.
HEX e RGB appaiono mai diversi sullo schermo?
No. Quando descrivono gli stessi valori di canale sono il colore identico. Qualsiasi differenza visibile deriva da un errore di battitura o dal fatto che un codice include la trasparenza che l'altro omette.
Quanti colori può mostrare un codice hex standard?
Un codice hex a 6 cifre offre 256 livelli per ciascuno dei tre canali, che si moltiplicano per dare 16.777.216 colori possibili.