Convertitore da RGB a Hex

Trasforma valori rosso, verde e blu in codici colore esadecimali.

Colore rosso (R):
Colore verde (G):
Colore blu (B):

Un selettore di colori nel tuo software grafico restituisce rgb(46, 134, 171), ma il foglio di stile su cui stai lavorando adotta solo codici esadecimali. Uniformare la notazione nel CSS evita discrepanze e mantiene il codice pulito.

Come funziona la conversione da RGB a esadecimale

Ciascuno dei tre canali RGB, compreso tra 0 e 255, corrisponde a una coppia di cifre in base 16. Unendo le tre coppie precedute dal simbolo # ottieni la stringa finale. Prendiamo rgb(46, 134, 171): il valore 46 diventa 2E, 134 corrisponde a 86 e 171 produce AB, generando #2E86AB, una tonalità blu ottanio.

Il calcolo matematico richiede attenzione manuale, in particolare vicino agli estremi della scala: il numero 15 corrisponde a 0F. Dimenticare lo zero iniziale produce una coppia incompleta a una sola cifra, rendendo la stringa esadecimale non valida.

Esempi di conversione da RGB a valori hex

Valore RGBCoppia hexEsempio completo
000#000000 (black)
150Fa dark, easy-to-drop leading zero
8757#FF5733 (orange-red)
171AB#2E86AB (teal blue)
255FF#FFFFFF (white)

Gestione della trasparenza con RGBA ed esadecimale a 8 cifre

Quando un elemento richiede un livello di trasparenza, il formato RGB introduce un quarto parametro alfa, come in rgba(46, 134, 171, 0.5) per indicare il 50% di opacità. Nei fogli di stile esiste la variante a 8 cifre: #2E86AB80. I due caratteri terminali codificano la medesima opacità sulla scala 0–255, equivalente all’intervallo da 00 a FF, anziché come percentuale diretta.

Non tutti gli ambienti grafici o vecchi motori di rendering interpretano la variante esadecimale a 8 cifre; controlla sempre i requisiti del tuo progetto prima di rimpiazzare completamente la sintassi rgba().

Linee guida sul contrasto visivo dei codici hex

  • I criteri delle Web Content Accessibility Guidelines richiedono un rapporto di contrasto minimo pari a 4,5:1 tra il testo normale e il suo sfondo.
  • Per i testi grandi, definiti da 18pt in su oppure 14pt in grassetto, la soglia minima scende a 3:1.
  • Un grigio chiaro come #AAAAAA posizionato su sfondo bianco non rispetta questi parametri e risulta poco leggibile per molte persone.
  • Ottenere la notazione esadecimale per entrambi i colori permette di verificare facilmente i requisiti di accessibilità prima della pubblicazione.

Domande sulla conversione tra RGB ed esadecimale

Come si calcola a mano la coppia esadecimale da un valore RGB come 171?

Dividi 171 per 16: il quoziente intero è 10 e il resto è 11. Nella numerazione in base 16 il dieci corrisponde a A e l’undici corrisponde a B, formando così la coppia AB.

A cosa servono le ultime due cifre in un codice esadecimale a 8 caratteri?

Rappresentano il canale alfa, ovvero il livello di opacità: FF indica opacità totale e 00 trasparenza completa, con i valori intermedi espressi sulla medesima scala esadecimale.

Per quale motivo è fondamentale inserire lo zero iniziale nei valori inferiori a 16?

Ogni canale colore in notazione esadecimale deve essere composto da due caratteri esatti. Convertire 5 in 5 anziché 05 altera la lunghezza della stringa e sballa la lettura dei canali successivi.

Quale rapporto di contrasto minimo richiede il livello WCAG AA per i testi?

Serve un rapporto di almeno 4,5:1 per il testo comune e di 3:1 per i caratteri grandi, considerati da 18pt in su o da 14pt in grassetto.

Nei file CSS conviene usare la notazione rgba() oppure la sintassi hex a 8 cifre?

Entrambe le soluzioni sono supportate dai browser moderni ed esprimono gli stessi valori. La sintassi rgba() è più esplicita, mentre l’esadecimale a 8 cifre è più compatto; scegli quella coerente con il resto del tuo codice.

Cookie
Abbiamo a cuore i tuoi dati e ci piacerebbe utilizzare i cookie per migliorare la tua esperienza.