Convertire HEX in RGB Hexadecimal ↔ Red Green Blue Gratis Online Sicuro
Scriva un valore in HEX e lo legga subito in RGB. Il conto si fa nel suo browser, non si manda nulla da nessuna parte, e da che cosa dipende il risultato è scritto più sotto invece di essere dato per scontato.
Non si carica niente
Da dove vengono queste notazioni
L'esadecimale e l'RGB sono la stessa cosa scritta due volte. Un colore da schermo sono tre numeri — quanta luce rossa, verde e blu emettere — ciascuno da 0 a 255, cioè un byte; l'esadecimale scrive semplicemente quei byte in base sedici, sicché #FF8800 e rgb(255, 136, 0) sono lo stesso ordine allo stesso pixel. L'HSL fu inventato perché nessuno dei due è leggibile da un essere umano: dà la tinta come un angolo su una ruota dei colori, con saturazione e luminosità in percentuale, così che un progettista possa schiarire qualcosa senza ricalcolare tre cifre. Il CMYK appartiene a un mondo del tutto diverso: l'inchiostro, non la luce. È sottrattivo, costruito su quattro lastre di stampa, e non raggiunge tutti i colori di uno schermo, perché lo schermo emette luce mentre la carta la rimanda soltanto.
Dove le incontra
L'esadecimale è ciò che si scrive in un foglio di stile e ciò che uno strumento di progetto vi porge. L'RGB compare ovunque un colore richieda aritmetica: sfumature, trasparenza, codice che calcola un tono. All'HSL si ricorre quando si mette a punto una tavolozza a mano, perché i cambiamenti voluti sono di solito cambiamenti di uno dei suoi tre numeri. Il CMYK è ciò che chiede la tipografia, e convertirvi è l'istante in cui un progetto smette di essere luce e diventa inchiostro.
Domande frequenti
Perché il mio risultato CMYK differisce da quello della tipografia?
Perché non esiste una sola conversione corretta. L'aritmetica di questa pagina è quella semplice, indipendente dal dispositivo, ed è la risposta giusta quando serve un punto di partenza o un equivalente approssimato. Una tipografia converte attraverso un profilo colore che tiene conto dell'inchiostro, della carta e della macchina specifici, e lo stesso colore RGB darà valori CMYK diversi su patinata lucida e su carta non patinata. Per ciò che deve corrispondere, chiedete alla tipografia il loro profilo invece di fidarvi di una formula.
Perché certi colori da schermo non si possono stampare?
Perché i due non raggiungono gli stessi colori. Uno schermo fa colore sommando luce e può dare un ciano o un verde vivo e saturo che l'inchiostro semplicemente non eguaglia; la carta fa colore assorbendo luce, e il più chiaro che possa essere è il bianco della pagina. L'insieme dei colori raggiungibili si chiama gamut, e dove i due non si sovrappongono una conversione deve scegliere il colore disponibile più vicino. Ecco perché un colore acceso sullo schermo appare spesso un po' spento in stampa.
Il risultato è esatto?
Dove le due unità si definiscono l'una per mezzo dell'altra con numeri interi, sì: la pagina lo dice sopra la cifra, e l'unico arrotondamento sta in quante cifre si mostrano. Dove il rapporto non ha decimale finita, la pagina mostra dodici cifre significative e dice che la relazione è approssimata invece di fingere il contrario.
Qualcosa di quel che scrivo lascia il mio dispositivo?
No. Il calcolo avviene nel suo browser; non viene inviato nulla, e non c'è nemmeno un server a cui inviarlo. Caricata una volta, la pagina continua a funzionare con la rete spenta.
Perché si converte HEX in RGB
Uno strumento di design ti dà un colore come #5A4632. Un foglio di stile, uno script per canvas, una libreria di grafici o un programma di grafica lo chiedono come rgb(90, 70, 50). Sono lo stesso colore, e il lavoro di passare da una scrittura all'altra si ripresenta di continuo: una guida di marca elenca codici esadecimali e il tuo codice ha bisogno di numeri per calcolare una tonalità più chiara, un cliente manda un colore da un logo e devi riempire un rgba() con la trasparenza, una libreria accetta solo tre valori separati. Convertire HEX in RGB è un compito piccolo, e un convertitore affidabile ti evita di fare a mente l'aritmetica in base sedici e di sbagliare.
La conversione è esatta, il che non è vero per ogni conversione di colore. L'esadecimale e rgb() sono due scritture degli stessi tre numeri, le quantità di luce rossa, verde e blu che uno schermo deve emettere, ciascuna da 0 a 255. Nulla è approssimato, e un'andata e ritorno restituisce ciò da cui è partita. Questa pagina lo fa nel tuo browser e non viene caricato nulla. Qui sotto trovi come le cifre esadecimali corrispondono ai tre numeri, come viene riportata la trasparenza, che cosa fa la forma abbreviata, i limiti di sRGB e le situazioni in cui sviluppatori e designer hanno bisogno di convertire HEX in RGB.
Come funziona la conversione
Tre coppie di cifre diventano tre numeri
Un colore esadecimale è un simbolo di cancelletto seguito da sei cifre esadecimali, che si leggono a coppie: la prima coppia è il rosso, la seconda il verde, la terza il blu. Ogni coppia è un numero in base sedici tra 00 e FF, cioè da 0 a 255 nel sistema decimale che usi ogni giorno. Quindi #5A4632 si divide in 5A, 46 e 32. 5A è 5 × 16 + 10 = 90, 46 è 4 × 16 + 6 = 70 e 32 è 3 × 16 + 2 = 50. Il colore è rgb(90, 70, 50), l'esempio con cui inizia la pagina.
Perché le cifre vanno da 0 a F
La base sedici richiede sedici simboli, quindi dopo il 9 vengono le lettere da A a F, che valgono da 10 a 15. Una coppia di queste cifre dà 16 × 16 = 256 valori, esattamente quanti ne può contenere un byte. Un colore dello schermo è fatto di tre byte, e l'esadecimale è semplicemente un modo compatto di scriverli: sei caratteri invece di tre numeri con virgole e parentesi.
Maiuscole e minuscole
#5a4632 e #5A4632 sono lo stesso colore. CSS accetta entrambi, e lo stesso fa questo convertitore. Scegli una convenzione per un progetto e mantienila, perché mescolare maiuscole e minuscole rende più difficile cercare in un foglio di stile.
Che cosa la conversione conserva e che cosa non può
Conserva il colore, esattamente
L'esadecimale e rgb() sono due scritture degli stessi tre numeri, da 0 a 255 per rosso, verde e blu, quindi nulla è approssimato e un'andata e ritorno restituisce ciò da cui è partita. Converti HEX in RGB e di nuovo indietro, e hai lo stesso codice da cui sei partito, con la possibile eccezione delle lettere maiuscole.
Riporta la trasparenza
Viene riportato anche un quarto valore per la trasparenza: #RRGGBBAA diventa rgba(), e viceversa. L'ultima coppia è il canale alfa, da 00, completamente trasparente, a FF, completamente opaco. Quindi #5A463280 è rgba(90, 70, 50, 0.5), poiché 80 in esadecimale è 128, e 128 su 255 è circa una metà. Otto cifre sono accettate da tutti i browser attuali.
Non può descrivere colori fuori da sRGB
Entrambe le scritture descrivono sRGB, lo spazio colore che gli schermi usano da trent'anni. Non possono descrivere un colore al di fuori di esso, ed è per questo che esistono le notazioni CSS più recenti, lab(), oklch() e color(). I display moderni possono mostrare colori più saturi di quelli che sRGB contiene, e un designer che ha scelto un colore simile in uno strumento a gamma estesa lo vedrà tagliato a sRGB quando viene scritto come esadecimale.
L'abbreviazione viene espansa, non conservata
L'abbreviazione viene espansa anziché conservata: #abc torna come #AABBCC, che è lo stesso colore scritto per esteso. Ogni cifra viene raddoppiata. Significa che puoi incollare un codice a tre cifre e ottenere i numeri giusti, ma non puoi recuperare la scrittura breve da quella lunga guardandola, solo verificando che ogni coppia si ripeta.
Colori comuni e i loro numeri
Alcuni da ricordare
Il bianco è #FFFFFF, cioè rgb(255, 255, 255): tutte e tre le luci a piena potenza. Il nero è #000000, rgb(0, 0, 0): nessuna luce. Il rosso puro è #FF0000, il verde #00FF00 e il blu #0000FF. Un grigio medio è qualsiasi codice con tre coppie uguali, come #808080, che è rgb(128, 128, 128). Coppie uguali significano sempre grigio, perché quantità uguali delle tre luci non danno alcuna tinta.
Leggere un codice a colpo d'occhio
Una volta che conosci lo schema puoi stimare un colore dalle sue cifre esadecimali. Un codice che comincia con una prima coppia alta è rossastro, una coppia centrale alta è verdastra, una coppia finale alta è bluastra. #FF8800 è molto rosso, un po' di verde e nessun blu, cioè arancione. Per questo non ti serve uno strumento, ma te ne serve uno per i numeri esatti.
Come convertire HEX in RGB qui
Digita o incolla il codice esadecimale
Inserisci il colore nel primo campo, con o senza il simbolo del cancelletto. Sono accettate le forme a tre, sei e otto cifre.
Leggi il valore rgb
La risposta appare subito nell'altro campo, nella forma rgb(90, 70, 50), o rgba() se il codice portava la trasparenza. La pagina mostra la frase #5A4632 = rgb(90, 70, 50) così puoi controllare a colpo d'occhio.
Copialo nel tuo codice
Incolla il risultato nel foglio di stile, nello script o nello strumento che lo ha richiesto. Se ti servono i tre numeri separati, sono quelli tra le parentesi.
Da dove vengono queste notazioni
Esadecimale e RGB sono la stessa cosa scritta due volte
Un colore dello schermo è fatto di tre numeri, quanta luce rossa, verde e blu emettere, ciascuno da 0 a 255, cioè un byte. L'esadecimale scrive semplicemente quei byte in base sedici, quindi #FF8800 e rgb(255, 136, 0) sono la stessa istruzione data allo stesso pixel.
HSL e CMYK
HSL è nato perché nessuno dei due è leggibile da una persona: dà la tinta come angolo su un cerchio cromatico, con saturazione e luminosità in percentuale, così un designer può schiarire qualcosa senza ricalcolare tre cifre. Il CMYK appartiene a un mondo del tutto diverso, quello dell'inchiostro anziché della luce. È sottrattivo, costruito da quattro lastre di stampa, e non può raggiungere tutti i colori che uno schermo raggiunge, perché uno schermo emette luce mentre la carta la riflette soltanto. Per quelli, vedi da HEX a HSL e da HEX a CMYK.
Dove li incontri
Nei fogli di stile
L'esadecimale è ciò che digiti in un foglio di stile e ciò che ti consegna uno strumento di design. RGB compare ovunque un colore richieda aritmetica: sfumature, trasparenza, codice che calcola una tonalità. Conoscere entrambe le scritture, e saper passare dall'una all'altra, fa parte del lavoro quotidiano del front-end.
Negli script e nel disegno su canvas
Il codice di disegno spesso vuole i tre numeri separati, per mescolare due colori, per scurirne uno di una quantità fissa o per verificare se un pixel corrisponde a un bersaglio. Convertire HEX in RGB ti dà direttamente i numeri.
Negli strumenti di grafica e immagini
Gli editor di immagini di solito mostrano un colore come tre numeri o come codice esadecimale, e ti lasciano digitare l'uno o l'altro. Passare dall'uno all'altro ti permette di riprodurre un colore di una pagina web in un programma che vuole numeri.
Nella documentazione e nelle guide di marca
Una guida di marca può elencare un colore in esadecimale per il web, in RGB per gli schermi e in CMYK per la stampa. Far concordare i primi due è questione di una conversione, ed è il tipo di controllo che coglie un refuso prima che venga stampato su mille volantini.
Usi pratici della forma RGB
Trasparenza senza un secondo colore
Con rgba(90, 70, 50, 0.5) ottieni il colore a metà intensità, così ciò che sta dietro traspare. È il modo standard di fare sovrapposizioni, ombre e sfondi colorati a partire da un colore di marca senza inventarne uno nuovo.
Calcolare tonalità più chiare e più scure
Per rendere uno stato al passaggio del mouse un po' più scuro, uno script può sottrarre una quantità fissa da ciascuno dei tre numeri. Farlo su una stringa esadecimale è scomodo; su rgb è semplice aritmetica. Se ti serve una regolazione basata sulla tinta, converti invece HEX in HSL.
Controlli di contrasto
Gli strumenti di accessibilità calcolano il contrasto tra due colori dai loro valori di rosso, verde e blu. Avere i numeri ti permette di fare il calcolo da solo, o di incollarli in un verificatore, per confermare che il testo su uno sfondo sia leggibile.
Trappole quando converti HEX in RGB
Dimenticare la coppia alfa
Un codice a otto cifre ha la trasparenza nelle ultime due. Se le togli, la perdi. Controlla la lunghezza del codice prima di decidere che il risultato è il colore.
Confondere l'ordine
L'esadecimale è rosso, verde, blu. Alcuni formati, e alcune vecchie API grafiche, usano blu, verde, rosso. Se un colore esce sbagliato in un certo programma, controlla l'ordine dei suoi canali.
Copiare da una schermata
Un colore letto da una schermata è il colore dopo la gestione del colore dello schermo e l'eventuale compressione. Può differire leggermente dal colore nel file di origine. Usa il file di design quando puoi.
Presumere che gli schermi concordino
Due schermi mostrano lo stesso codice in modo leggermente diverso. I numeri sono esatti; ciò che vedi dipende dal display e dal suo profilo.
Domande che le persone fanno prima di convertire
Che cos'è #FF0000 in RGB?
rgb(255, 0, 0), rosso puro.
Che cos'è #FFFFFF in RGB?
rgb(255, 255, 255), bianco.
Posso convertire un codice a tre cifre?
Sì. Ogni cifra viene raddoppiata: #09C diventa #0099CC, cioè rgb(0, 153, 204).
La conversione è esatta?
Sì. Sono due scritture degli stessi tre numeri.
Il mio colore viene caricato?
No. L'aritmetica gira nel tuo browser e non viene inviato nulla da nessuna parte.
Come torno indietro?
Con da RGB a HEX, che scrive i tre numeri come codice esadecimale.
Scegliere con saggezza quando converti HEX in RGB
Sapere che cosa ti serve dopo
Se ti serve la trasparenza, rgba() è la forma naturale. Se devi regolare luminosità o tinta, HSL è più facile. Se il colore andrà in stampa, il passo successivo è il CMYK, con le avvertenze che quella conversione porta con sé. Vedi da RGB a CMYK.
Tieni l'esadecimale come originale
Per i colori di una palette di marca, tieni il codice esadecimale come riferimento. È breve, non ambiguo e compreso ovunque. Ricava le altre forme da esso quando servono.
Usa le proprietà personalizzate
In CSS, definisci i colori una volta sola, come --brand: #5A4632, e richiamali per nome. Se ti servono i numeri per rgba(), definisci anche --brand-rgb: 90 70 50. La conversione si fa così una volta sola.
CSS moderno e la forma RGB
Sintassi separata da spazi
Il CSS attuale accetta rgb() con gli spazi e una barra per la trasparenza, come in rgb(90 70 50 / 50%). I numeri sono gli stessi della forma con le virgole, quindi il risultato di una conversione funziona in entrambe. I browser più vecchi e alcuni strumenti si aspettano le virgole, quindi la forma con le virgole resta la scelta sicura quando non sai dove verrà usato il colore.
Percentuali e frazioni
RGB si può scrivere anche con le percentuali, come rgb(35% 27% 20%), dove il 100 per cento è 255. La pagina dà numeri interi perché sono ciò che l'esadecimale memorizza e ciò che la maggior parte degli strumenti si aspetta. Se ti servono le percentuali, dividi ciascun numero per 255 e moltiplica per 100.
Proprietà personalizzate per i tre numeri
Un trucco comune è memorizzare solo i tre numeri in una proprietà personalizzata, --brand-rgb: 90 70 50, e usarla come rgb(var(--brand-rgb) / 0.5). Permette a un'unica definizione di servire sia gli usi pieni sia quelli traslucidi. Quando converti HEX in RGB per questo scopo, copia solo i numeri dalla risposta.
Lavorare con il colore nella pratica
Controlla con la guida di marca
Se una guida di marca dà sia l'esadecimale sia l'rgb per lo stesso colore, converti uno e confrontalo con l'altro. Una discrepanza di solito significa un refuso nella guida, e trovarlo prima che venga usato su ogni pagina vale il minuto che richiede.
Tieni una palette come breve elenco
La maggior parte dei siti usa da cinque a otto colori. Scrivili in una nota in entrambe le forme. Ogni volta che devi convertire HEX in RGB per un nuovo componente, puoi consultarla invece di rifare il calcolo, e la palette resta coerente.
Dai ai colori nomi per ruolo
Nomi come primario, superficie e avviso sopravvivono ai rifacimenti meglio di nomi come verde o marrone. La conversione ti dà i numeri; il nome dice a che cosa servono.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare indietro, usa da RGB a HEX. Per i colori descritti dalla tinta, da HEX a HSL e da HSL a HEX sono a portata di mano, e per la stampa, da HEX a CMYK, da CMYK a HEX e da CMYK a RGB. Per le dimensioni nello stesso foglio di stile, da px a rem e da px a em fanno per le lunghezze ciò che questa pagina fa per i colori.
Un esempio svolto
Diciamo che il tuo colore di marca è #1E7A5C e vuoi una versione traslucida per lo sfondo di una scheda. Digiti il codice e leggi rgb(30, 122, 92). Nel foglio di stile scrivi background: rgba(30, 122, 92, 0.12), una sfumatura molto chiara dello stesso verde, e un bordo di rgba(30, 122, 92, 0.4). La scheda sta comodamente su una pagina bianca e su una grigia, perché la trasparenza lascia passare la pagina. Quando il colore di marca verrà cambiato, sostituisci i tre numeri in una sola proprietà personalizzata e ogni sfumatura segue.
Una breve lista di controllo
Prima di convertire
Controlla la lunghezza del codice: tre, sei o otto cifre. Decidi se ti serve la trasparenza.
Mentre converti
Incolla il codice, leggi il valore rgb e copialo con le sue parentesi, oppure i soli tre numeri.
Dopo aver convertito
Prova il colore nel contesto, sullo sfondo reale, e controlla il contrasto di qualsiasi testo che vi poggia.
Errori comuni
Perdere la coppia della trasparenza
Otto cifre significano alfa. Tienila o convertila in rgba().
Confondere l'ordine dei canali
L'esadecimale comincia dal rosso. Alcuni strumenti si aspettano prima il blu.
Trattare lo schermo come la verità
I numeri sono esatti. L'aspetto dipende dal display.
I tuoi colori restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori sono usati dal tuo browser e non viene inviato nulla da nessuna parte. Non c'è nulla da cancellare dopo e nessun account da creare. È il modo semplice per convertire HEX in RGB.
Riepilogo
Per convertire HEX in RGB qui, digita o incolla il codice esadecimale e leggi subito il valore rgb. La conversione conserva il colore esattamente: l'esadecimale e rgb() sono due scritture degli stessi tre numeri, da 0 a 255 per rosso, verde e blu, quindi nulla è approssimato e un'andata e ritorno restituisce ciò da cui è partita. Viene riportato anche un quarto valore per la trasparenza, poiché #RRGGBBAA diventa rgba(), e viceversa. Entrambe le scritture descrivono sRGB, quindi non possono descrivere colori al di fuori di esso, e l'abbreviazione viene espansa anziché conservata: #abc torna come #AABBCC. Non viene caricato nulla.