Convertire RGB in HEX Red Green Blue ↔ Hexadecimal Gratis Online Sicuro
Scriva un valore in RGB e lo legga subito in HEX. 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 RGB in HEX
Un editor di immagini, un selettore di colori del sistema operativo o una riga di codice ti danno un colore come tre numeri: 90, 70, 50. Un foglio di stile, un file di design token o un messaggio a un collega lo vogliono come un unico breve codice: #5A4632. Il passaggio fra i due è ciò che fa questa pagina. Convertire RGB in HEX significa scrivere gli stessi tre numeri in base sedici, due cifre ciascuno, e mettere un cancelletto davanti. È facile da fare per un singolo colore e noioso per venti, ed è facile sbagliare quando un numero ha bisogno di uno zero iniziale o una cifra è una lettera.
La conversione è esatta, cosa che non è vera di ogni conversione di colore. HEX e rgb() sono due grafie degli stessi tre numeri, le quantità di luce rossa, verde e blu che uno schermo deve emettere, ciascuna da 0 a 255. Nulla viene approssimato, e un'andata e ritorno restituisce ciò da cui era partita. La pagina lo fa nel tuo browser, e nulla viene caricato. Più sotto trovi come ogni numero diventa due cifre esadecimali, come viene portata la trasparenza, i limiti di sRGB, i posti in cui serve convertire RGB in HEX e alcune abitudini che mantengono coerenti i colori in un progetto.
Come funziona la conversione
Ogni numero diventa due cifre esadecimali
Prendi rgb(90, 70, 50). Dividi ogni numero per sedici: 90 è 5 volte 16 più 10, e 10 è la cifra A, quindi 90 diventa 5A. 70 è 4 volte 16 più 6, quindi 46. 50 è 3 volte 16 più 2, quindi 32. Metti insieme le tre coppie e aggiungi il cancelletto: #5A4632. La pagina lo fa per te mentre scrivi, e mostra la frase rgb(90, 70, 50) = #5A4632 così puoi verificarla.
Zeri iniziali
Ogni coppia deve avere due cifre. Un numero inferiore a 16 ha bisogno di uno zero davanti: 7 diventa 07, e 0 diventa 00. Quindi rgb(0, 7, 255) è #0007FF, non #07FF, che significherebbe tutt'altro. Dimenticare lo zero è l'errore più comune quando si fa la conversione a mano.
L'intervallo
Ogni numero deve stare fra 0 e 255. Un valore superiore a 255 non può essere scritto in due cifre esadecimali, e un valore negativo non ha significato. Se un calcolo nel tuo codice ha prodotto 270 o −5, limitalo prima all'intervallo. Il convertitore fa lo stesso, in modo da non produrre mai un codice non valido.
Cosa mantiene la conversione e cosa non può
Mantiene il colore, esattamente
HEX e rgb() sono due grafie degli stessi tre numeri, da 0 a 255 per rosso, verde e blu, quindi nulla viene approssimato e un'andata e ritorno restituisce ciò da cui era partita. Converti RGB in HEX e ritorno e hai i numeri con cui eri cominciato.
Porta con sé la trasparenza
Anche un quarto valore per la trasparenza viene portato con sé: #RRGGBBAA diventa rgba(), e viceversa. Una trasparenza di 0,5 diventa la coppia 80, dato che metà di 255 è circa 128, che in esadecimale è 80. Quindi rgba(90, 70, 50, 0.5) è #5A463280. L'esadecimale a otto cifre è accettato da tutti i browser attuali.
Non può descrivere colori fuori da sRGB
Entrambe le grafie descrivono sRGB, lo spazio colore che uno schermo usa da trent'anni. Non possono descrivere un colore al di fuori, ed è per questo che esistono le notazioni CSS più nuove, lab(), oklch() e color(). Se parti da un colore in uno strumento a gamut ampio, i tre numeri che copi sono già la versione sRGB, e l'esadecimale è fedele a quelli.
Non conserva la forma abbreviata
Dove un codice potrebbe essere scritto in tre cifre, come #AABBCC come #ABC, il convertitore dà la forma lunga. La forma lunga è sempre valida e dello stesso colore; la forma breve è solo una comodità per il lettore.
Colori comuni e i loro codici
Alcuni da ricordare
rgb(255, 255, 255) è #FFFFFF, bianco: tutte e tre le luci a piena potenza. rgb(0, 0, 0) è #000000, nero: nessuna luce. rgb(255, 0, 0) è #FF0000, rosso puro; rgb(0, 255, 0) è #00FF00 e rgb(0, 0, 255) è #0000FF. Qualsiasi colore con tre numeri uguali è un grigio, e il suo codice ha tre coppie uguali: rgb(128, 128, 128) è #808080.
L'abitudine dei colori web-safe
Le vecchie guide parlavano di colori web-safe, le cui coppie erano solo 00, 33, 66, 99, CC o FF. Appartengono ai tempi degli schermi a 256 colori e non hanno motivo di sopravvivere. Usa qualsiasi valore ti piaccia; lo schermo può mostrarli tutti.
Come convertire RGB in HEX qui
Digita i tre numeri
Inserisci il colore nel primo campo nella forma rgb(90, 70, 50), oppure con i numeri separati da virgole o spazi. Le percentuali non servono; usa numeri da 0 a 255.
Leggi il codice esadecimale
La risposta compare subito nell'altro campo, che inizia con un cancelletto, in lettere maiuscole. Se hai dato un quarto valore per la trasparenza, il codice ha otto cifre.
Copialo nel tuo lavoro
Incolla il codice nel foglio di stile, nel file dei token o nel messaggio. Aggiungilo alla nota della tua palette, così la prossima conversione sarà una semplice consultazione.
Da dove vengono queste notazioni
Esadecimale e RGB sono la stessa cosa scritta due volte
Un colore dello schermo è tre numeri, quanta luce rossa, verde e blu emettere, ciascuno da 0 a 255, che è un byte. L'esadecimale scrive semplicemente quei byte in base sedici, quindi #FF8800 e rgb(255, 136, 0) sono la stessa istruzione allo stesso pixel.
HSL e CMYK
L'HSL fu inventato perché nessuno dei due è leggibile da un essere umano: dà la tinta come angolo intorno a una ruota dei colori, con saturazione e luminosità come percentuali, così un designer può rendere qualcosa più chiaro senza ricalcolare tre cifre. Il CMYK appartiene a un mondo del tutto diverso, l'inchiostro anziché la luce. È sottrattivo, costruito su quattro lastre di stampa, e non può raggiungere ogni colore che uno schermo può, perché uno schermo emette luce mentre la carta la riflette soltanto. Vedi da HEX a HSL e da RGB a CMYK.
Dove li incontri
Nella consegna del design
Un designer lavora in un editor che mostra i valori rgb o un selettore; lo sviluppatore ha bisogno dell'esadecimale per il foglio di stile. Convertire RGB in HEX è il passaggio di mezzo, e si fa per ogni colore di una palette.
Negli script che calcolano i colori
Uno script che miscela due colori o ne scurisce uno lavora con numeri e finisce con tre di essi. Per usare il risultato in un foglio di stile, o per mostrarlo, va scritto come codice esadecimale. Farlo a mano nel codice sono poche righe; controllare il risultato con un convertitore è più rapido.
Nella visualizzazione dei dati
Le librerie di grafici accettano i colori come stringhe esadecimali. Le palette generate con metodi numerici escono come terne rgb. Un passaggio di conversione trasforma l'una nell'altra.
In documenti e presentazioni
I programmi per l'ufficio mostrano i colori come numeri RGB; gli editor web vogliono l'esadecimale. Quando un colore del marchio deve comparire in entrambi, la conversione li mantiene identici.
Trappole quando converti RGB in HEX
Dimenticare lo zero iniziale
Scrivere 7 come 7 e non 07 sposta tutte le cifre seguenti. Usa sempre due cifre per coppia.
Confondere la percentuale con lo 0-255
rgb(35%, 27%, 20%) è un'altra grafia dei numeri, con il 100 per cento che vale 255. Se la tua fonte usa percentuali, convertile prima in 0-255: moltiplica per 2,55.
Errori di arrotondamento nei colori calcolati
Uno script che produce 127,5 deve decidere se sia 127 o 128. La differenza è invisibile, ma crea due codici per quello che pensavi fosse un solo colore. Arrotonda sempre allo stesso modo.
Prendere il colore da una schermata
Un colore letto da una schermata è passato attraverso la gestione del colore dello schermo e magari la compressione. Può differire di un gradino o due dall'origine. Usa il file di design quando puoi.
Domande che si fanno prima di convertire
Cos'è rgb(255, 0, 0) in esadecimale?
#FF0000, rosso puro.
Cos'è rgb(0, 0, 0) in esadecimale?
#000000, nero.
Posso usare le minuscole nel codice esadecimale?
Sì. #5a4632 e #5A4632 sono lo stesso colore. La pagina scrive le maiuscole.
La conversione è esatta?
Sì. Sono due grafie degli stessi tre numeri.
Il mio colore viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da HEX a RGB, che legge le tre coppie come numeri.
Abitudini che mantengono coerenti i colori in un progetto
Definisci ogni colore una sola volta
Metti la tua palette in proprietà personalizzate, come --brand: #5A4632, e riferisciti ai colori per nome. Quando converti RGB in HEX per un nuovo colore, aggiungi una riga, e ogni uso la segue.
Scegli un solo caso
Scegli maiuscole o minuscole per i codici esadecimali e attieniti a quella scelta. Una ricerca di un colore nel codice diventa allora affidabile.
Registra la fonte
Accanto a ogni colore, annota da dove viene: la guida del marchio, un logo, un'immagine campionata. Quando si pone la domanda se un colore sia corretto, sai dove controllare.
Prova il contrasto
Per il testo su uno sfondo colorato, controlla il rapporto di contrasto con uno strumento. I numeri della forma rgb vanno direttamente nella formula, e la forma esadecimale è ciò che digiti nella maggior parte dei verificatori.
Perché 256 gradini, e cosa c'è dietro i numeri
Otto bit per ogni luce
Ciascuno dei tre numeri è memorizzato in otto bit, che permettono 256 valori da 0 a 255. Tre di essi insieme danno 256 × 256 × 256, circa 16,7 milioni di combinazioni, più di quante l'occhio sappia distinguere nella maggior parte delle condizioni. È questo il motivo per cui i codici esadecimali sono lunghi esattamente sei cifre: due per ogni luce, né più né meno. Quando converti RGB in HEX stai scrivendo tre byte nella forma più compatta su cui le persone potessero accordarsi.
Perché gradini uguali non sembrano uguali
I numeri non sono proporzionali alla luce che raggiunge il tuo occhio. Gli schermi applicano una curva, vicina a una potenza di 2,2, in modo che i toni scuri ricevano più dei 256 gradini di quelli chiari, il che si adatta all'occhio. Un passo da 10 a 20 sembra un cambiamento maggiore di un passo da 240 a 250. Per te questo significa che fare la media di due colori facendo la media dei loro numeri non dà il colore che vedresti mescolando le luci, un fatto che conta quando calcoli sfumature e miscele nel codice.
I grigi e la diagonale
Tutti i grigi stanno sulla linea in cui i tre numeri sono uguali. Ce ne sono 256, dal nero a 0 al bianco a 255. Se converti RGB in HEX e le tre coppie coincidono, sai subito che il colore non ha tinta. Un quasi-grigio con coppie che differiscono di un gradino o due ha una lieve sfumatura, che i designer usano spesso per dare a un colore neutro un accenno di calore o di freddezza.
Costruire e controllare una palette
Da una manciata di colori scelti a una palette
Una palette tipica ha un colore primario, un accento, un neutro per il testo, un neutro più chiaro per le superfici e uno o due colori di segnalazione per il successo e l'errore. Scegli ciascuno nel tuo strumento di design, leggi i suoi numeri rgb, e converti RGB in HEX per il foglio di stile. Scrivili come proprietà personalizzate con nomi che descrivono il ruolo, e la palette è pronta per l'uso in ogni componente.
Contrasto fra testo e sfondo
Il testo leggibile ha bisogno di una differenza di luminosità sufficiente fra le lettere e lo sfondo. Le linee guida sull'accessibilità definiscono un rapporto di contrasto calcolato dai valori di rosso, verde e blu dei due colori, e chiedono almeno 4,5 a 1 per il testo normale. I verificatori accettano i codici esadecimali, quindi i codici che produci qui possono andarci direttamente. Controlla ogni accoppiamento che prevedi di usare, non solo il colore primario sul bianco.
Convertire un elenco
Quando hai molti colori da convertire, lavorali uno alla volta e incolla ogni risultato in una tabella con il suo nome e uso. Ci vuole un minuto per colore, e la tabella diventa il riferimento per l'intero progetto. Se un colore viene poi modificato, basta cambiare la sua riga.
Tenere allineati HEX e rgb
Se il tuo progetto memorizza alcuni colori come esadecimale e altri come rgb, è facile che si allontanino quando qualcuno modifica uno e dimentica l'altro. Scegline uno come originale, di solito l'esadecimale, e ricava l'altro con il convertitore ogni volta che ti serve.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare indietro, usa da HEX a RGB. 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 RGB a CMYK, da CMYK a RGB e da CMYK a HEX. Per le dimensioni nello stesso foglio di stile, da px a rem fa per le lunghezze ciò che questa pagina fa per i colori.
Un esempio svolto
Poniamo che il selettore di colori di un editor di immagini ti dica che l'accento di una fotografia è rgb(214, 98, 56). Digiti i tre numeri e leggi #D66238. Nel foglio di stile scrivi --accent: #D66238 e lo usi per pulsanti e link. Un collega chiede qual è il colore nella guida del marchio, e tu gli mandi il codice. Più tardi ti serve una versione traslucida per un banner, e la riconverti con da HEX a RGB per costruire rgba(214, 98, 56, 0.15). Entrambe le conversioni sono esatte, quindi il banner ha la stessa tinta del pulsante.
Una breve lista di controllo
Prima di convertire
Controlla che ogni numero sia fra 0 e 255. Decidi se ti serve la trasparenza.
Durante la conversione
Digita i tre numeri, leggi il codice e copialo con il suo cancelletto.
Dopo la conversione
Prova il colore nel contesto, sullo sfondo reale, e controlla il contrasto di qualsiasi testo che vi poggi.
Errori comuni
Perdere uno zero iniziale
Ogni coppia ha due cifre. 7 è 07.
Scrivere numeri superiori a 255
Non si possono scrivere in due cifre. Limitali prima.
Trattare lo schermo come la verità
I numeri sono esatti. L'aspetto dipende dallo schermo.
I tuoi colori restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori vengono usati dal tuo browser e nulla viene inviato da nessuna parte. Non c'è nulla da cancellare dopo e nessun account da creare. È il modo semplice di convertire RGB in HEX.
Riepilogo
Per convertire RGB in HEX qui, digita i tre numeri e leggi subito il codice esadecimale. La conversione mantiene esattamente il colore: HEX e rgb() sono due grafie degli stessi tre numeri, da 0 a 255 per rosso, verde e blu, quindi nulla viene approssimato e un'andata e ritorno restituisce ciò da cui era partita. Anche un quarto valore per la trasparenza viene portato con sé, dato che rgba() diventa #RRGGBBAA, e viceversa. Entrambe le grafie descrivono sRGB, quindi non possono descrivere colori al di fuori. Ogni coppia ha due cifre, quindi un numero inferiore a 16 riceve uno zero iniziale. Nulla viene caricato.