Converti un codice HEX in valori RGB
Scrivi un codice HEX e i valori RGB compaiono mentre digiti: #3B82F6 è rgb(59, 130, 246). Il convertitore legge codici di tre, quattro, sei e otto caratteri, quindi coglie anche l'opacità di #3B82F680. Il selettore sotto i campi ti dà i canali come 0–255 oppure come 0–1.
Come si converte HEX in RGB?
Leggi il codice a coppie di caratteri e porta ogni coppia dal sistema esadecimale a quello decimale. La prima coppia è il canale rosso, la seconda il verde, la terza il blu, e ogni valore sta fra 0 e 255. Il codice #3B82F6 si divide in 3B, 82 e F6, e dà rgb(59, 130, 246).
Formula: R, G e B sono le coppie successive di caratteri del codice lette come numeri esadecimali.
Una singola coppia si calcola anche a mente, perché sono una moltiplicazione e un'addizione. Moltiplica il primo carattere per 16 e somma il secondo, tenendo presente che A vale 10, B vale 11 e F vale 15. Per la coppia 3B viene 3 × 16 + 11, cioè 59.
Alcuni codici tornano più spesso di altri. Il nero #000000 è rgb(0, 0, 0), il bianco #FFFFFF è rgb(255, 255, 255) e il grigio #808080 è rgb(128, 128, 128), esattamente metà di ogni canale.
Nella direzione opposta il calcolo poggia sullo stesso numero, con una differenza: dividi il canale per 16 e scrivi il resto come secondo carattere della coppia. Il convertitore da RGB a HEX fa tutto il lavoro al posto tuo.
Che cos'è un codice HEX e che cos'è RGB?
RGB descrive un colore con tre numeri: uno per il canale rosso, uno per il verde e uno per il blu, tutti fra 0 e 255. Lo schermo compone il colore con la luce, quindi più alti sono i numeri più luminoso è il punto, e tre valori massimi danno il bianco[1].
Il codice HEX descrive lo stesso colore in modo più breve. Il valore di un canale entra nel sistema esadecimale in esattamente due caratteri, quindi l'intero colore occupa sei caratteri dopo il cancelletto.
Nel lavoro di ogni giorno le due notazioni compaiono in posti diversi. Il codice HEX te lo danno Figma, il pannello colore del sistema di gestione dei contenuti e il manuale di marca, perché è corto e facile da passare. I valori RGB entrano dove il colore va calcolato: nel contrasto secondo le WCAG, nella notazione con trasparenza e nei motori 3D.
La specifica CSS Color Level 4 ammette quattro lunghezze di codice: tre, quattro, sei o otto caratteri[2]. La versione a tre è un'abbreviazione in cui il browser raddoppia ogni carattere, così #123 significa lo stesso di #112233. Le versioni a quattro e a otto aggiungono l'opacità alla fine, dove 00 è trasparenza totale e FF opacità piena.
Entrambe le forme descrivono il colore nello spazio sRGB. Hewlett-Packard e Microsoft proposero lo standard nel 1996, e il W3C lo adottò per HTML e CSS con la sigla IEC 61966-2-1[3]. Per questo lo stesso codice dà lo stesso colore su ogni schermo conforme.
Codici HEX dei colori CSS con nome e i loro valori RGB
| Nome in CSS | Codice HEX | Valori RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| white | #FFFFFF | 255, 255, 255 |
| red | #FF0000 | 255, 0, 0 |
| lime | #00FF00 | 0, 255, 0 |
| blue | #0000FF | 0, 0, 255 |
| yellow | #FFFF00 | 255, 255, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| fuchsia | #FF00FF | 255, 0, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| maroon | #800000 | 128, 0, 0 |
| olive | #808000 | 128, 128, 0 |
| green | #008000 | 0, 128, 0 |
| purple | #800080 | 128, 0, 128 |
| teal | #008080 | 0, 128, 128 |
| navy | #000080 | 0, 0, 128 |
| orange | #FFA500 | 255, 165, 0 |
| pink | #FFC0CB | 255, 192, 203 |
In CSS la parola green indica un colore con metà della luminosità del canale verde, mentre un 255 pieno su quel canale porta il nome lime.
Codici HEX dalle interfacce: valori RGB e notazione 0–1
| Codice HEX | Valori RGB | Notazione 0–1 |
|---|---|---|
| #FAFAFA | 250, 250, 250 | 0.9804, 0.9804, 0.9804 |
| #F5F5F5 | 245, 245, 245 | 0.9608, 0.9608, 0.9608 |
| #333333 | 51, 51, 51 | 0.2, 0.2, 0.2 |
| #1A1A1A | 26, 26, 26 | 0.102, 0.102, 0.102 |
| #3B82F6 | 59, 130, 246 | 0.2314, 0.5098, 0.9647 |
| #EF4444 | 239, 68, 68 | 0.9373, 0.2667, 0.2667 |
| #EE3333 | 238, 51, 51 | 0.9333, 0.2, 0.2 |
| #22C55E | 34, 197, 94 | 0.1333, 0.7725, 0.3686 |
La notazione frazionaria nasce dividendo ogni canale per 255, quindi 128 dà 0.502 e 255 dà un 1 tondo.
Quali caratteri si aggiungono al codice HEX per impostare l'opacità?
| Opacità | Caratteri nel codice | Valore del canale | Opacità esatta |
|---|---|---|---|
| 100% | FF | 255 | 100% |
| 90% | E6 | 230 | 90,20% |
| 80% | CC | 204 | 80% |
| 75% | BF | 191 | 74,90% |
| 70% | B3 | 179 | 70,20% |
| 60% | 99 | 153 | 60% |
| 50% | 80 | 128 | 50,20% |
| 40% | 66 | 102 | 40% |
| 30% | 4D | 77 | 30,20% |
| 25% | 40 | 64 | 25,10% |
| 20% | 33 | 51 | 20% |
| 10% | 1A | 26 | 10,20% |
| 5% | 0D | 13 | 5,10% |
| 0% | 00 | 0 | 0% |
Il canale dell'opacità ha 256 passi, come ogni canale di colore. Cadono esattamente su una percentuale tonda i valori ogni 20%, cioè 0, 20, 40, 60, 80 e 100. Le altre coppie restano due decimi di punto percentuale accanto al valore della prima colonna e sullo schermo appaiono identiche.
Dove trovi il codice HEX nel programma che usi?
Ognuno di questi programmi mostra il codice dell'elemento selezionato, solo in un punto diverso.
Figma
Seleziona il livello e clicca sul campione quadrato nella sezione Fill del pannello di destra. Si apre il selettore, e sotto i cursori di tinta e opacità c'è un elenco con cui cambi la notazione fra Hex, RGB, HSB, HSL e CSS. Figma mostra Hex come impostazione iniziale.Photoshop
Fai doppio clic sul quadrato del colore in basso nella barra degli strumenti. Nella finestra Selettore colore il codice sta nel campo contrassegnato dal cancelletto, sotto i valori R, G e B.Canva
Seleziona l'elemento e clicca sul colore nella barra in alto. Sotto i colori del documento premi Aggiungi un nuovo colore, e nel campo con il cancelletto scrivi o leggi il codice di sei caratteri.Browser
Clicca con il tasto destro sull'elemento e scegli Ispeziona. Nel pannello degli stili accanto a ogni proprietà di colore c'è un piccolo campione, e cliccandolo con il tasto Maiusc premuto la notazione passa fra HEX, RGB e HSL.
Come si converte HEX in RGB in Excel?
Metti il codice nella cella A1 e scrivi in tre celle accanto le formule =HEX.DECIMALE(STRINGA.ESTRAI(A1;2;2)), =HEX.DECIMALE(STRINGA.ESTRAI(A1;4;2)) e =HEX.DECIMALE(STRINGA.ESTRAI(A1;6;2)). Per il codice #3B82F6 restituiscono 59, 130 e 246.
La prima di queste funzioni legge un numero esadecimale[4], la seconda ritaglia dal codice le coppie successive di caratteri. STRINGA.ESTRAI vuole la cella, la posizione del primo carattere e il numero di caratteri, e poiché il codice inizia con un cancelletto i canali stanno alle posizioni 2, 4 e 6.
Copiando quelle tre celle verso il basso converti un'intera colonna di codici. Nella versione inglese del programma le funzioni si chiamano HEX2DEC e MID, e gli argomenti si separano con una virgola.
Fonti
- RGB — Wikipedia
- CSS Color Module Level 4 — notazione esadecimale — W3C
- Spazio colore sRGB — Wikipedia
- HEX.DECIMALE — funzione di Excel — Microsoft Support
Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.
Ultima revisione dei contenuti: · scritto e verificato dal team Arteon
Domande frequenti sulla conversione da HEX a RGB
#FFF e #FFFFFF sono lo stesso colore?
Sì. La notazione a tre caratteri raddoppia ciascuno, quindi #FFF si espande in #FFFFFF e #38F in #3388FF[2]. Entrambi danno in RGB esattamente gli stessi tre numeri.
Che codice HEX hanno il bianco e il nero?
Il bianco è #FFFFFF, cioè rgb(255, 255, 255), e il nero è #000000, cioè rgb(0, 0, 0). In forma breve sono #FFF e #000.
Che cosa significa il cancelletto davanti al codice colore?
Il cancelletto apre la notazione esadecimale e dice al browser che i caratteri seguenti sono un codice colore. Di per sé non porta alcun valore, quindi il convertitore accetta il codice con e senza cancelletto.
Quanti colori si possono descrivere con un codice HEX?
Ognuno dei tre canali ha 256 passi, il che dà 16.777.216 combinazioni[3]. Un codice di otto caratteri aggiunge inoltre 256 passi di opacità.
Come si scrive la trasparenza in un codice HEX?
Aggiungi alla fine due caratteri di opacità: #3B82F680 è lo stesso blu a metà opacità. Il convertitore legge un codice così e dà il risultato come rgba(59, 130, 246, 0.5). Le coppie per i valori tondi stanno nella tabella dell'opacità in questa pagina.
In che cosa differiscono le notazioni 0–255 e 0–1?
È lo stesso colore su due scale. CSS, Figma e i programmi di grafica contano il canale in byte da 0 a 255, mentre Unity, three.js, OpenGL e matplotlib lo fanno in frazioni da 0 a 1. Il selettore Notazione dei canali RGB sotto i campi dà il risultato sulla scala che ti serve.
Si può usare un codice HEX in un lavoro di stampa?
Una macchina da stampa lavora con quattro inchiostri, quindi un file di stampa descrive il colore in valori CMYK. Porta i tre numeri ottenuti qui nel convertitore da RGB a CMYK e otterrai le quote di ciano, magenta, giallo e nero.
Come si verifica se un colore ha contrasto sufficiente?
Le WCAG calcolano il contrasto a partire dai valori dei canali, quindi il lavoro inizia convertendo il codice in RGB. Il verificatore di contrasto dei colori ti dà il valore finale insieme alle soglie per il testo.
Aiutaci a migliorare i nostri strumenti
Hai un'idea, hai trovato un errore o vuoi proporre uno strumento? Scrivici: rispondiamo entro 24 ore.