Home » Convertitori » Convertitore codici colore

Convertitore codici colore: HEX, RGB e HSL

Converti un colore da HEX a RGB e HSL, e viceversa, con l’anteprima del colore, il CMYK indicativo per la stampa e il contrasto con il testo bianco e nero. Utile per siti web, grafica e presentazioni.

Una mazzetta di campioni colore aperta a ventaglio, rosa, giallo, verde e blu, con i codici HEX stampati

Convertitore codici colore

Converti i colori tra HEX, RGB e HSL, con l’anteprima e il contrasto per il testo.

Il colore

Accetta 6 cifre (#1A5CFF), 3 cifre (#15F) e 8 cifre con la trasparenza (#1A5CFF80); il simbolo # è facoltativo. Puoi anche scegliere il colore con la tavolozza.

Scrivi il codice del colore: le conversioni e l’anteprima compaiono qui mentre scrivi.

Come funziona

Scegli il formato di partenza: Da HEX per i codici come #1A5CFF, Da RGB per i tre valori di rosso, verde e blu, Da HSL per tonalità, saturazione e luminosità.

Nella scheda HEX puoi anche toccare il quadratino accanto al campo e scegliere il colore con la tavolozza del tuo dispositivo.

Nel risultato vedi il colore con un testo bianco e uno nero sopra, i codici in tutti i formati e il rapporto di contrasto, utile per capire se un testo sarà leggibile.

✔ HEX, RGB e HSL

✔ Anteprima del colore

✔ Contrasto per i testi (WCAG)

✔ Gratuito e senza registrazione

I formati dei colori

#

HEX

Sei cifre esadecimali, due per il rosso, due per il verde e due per il blu. È il formato più usato nei siti web.

RGB

Rosso, verde, blu

Tre numeri da 0 a 255 che indicano quanta luce rossa, verde e blu compone il colore.

HSL

Tonalità, saturazione, luminosità

La tonalità in gradi sul cerchio dei colori e due percentuali: comodo per schiarire o scurire un colore.

CMYK

Per la stampa

Ciano, magenta, giallo e nero in percentuale. La conversione è indicativa: in tipografia dipende da carta e inchiostri.

Gli schermi mostrano i colori in RGB: HEX e HSL sono solo modi diversi di scrivere lo stesso colore.

Le formule

1

Da HEX a RGB

Valore = prima cifra × 16 + seconda cifra

Ogni coppia di cifre esadecimali è un numero da 0 a 255. Le lettere valgono A = 10, B = 11 fino a F = 15.

Esempio: 1A = 1 × 16 + 10 = 26; 5C = 92; FF = 255

2

Da RGB a HEX

Ogni valore diviso per 16: quoziente e resto in cifre esadecimali

Si scrive ogni componente in base 16 con due cifre e si mettono in fila dopo il simbolo #.

Esempio: rgb(26, 92, 255) = #1A5CFF

3

Il rapporto di contrasto

Contrasto = (L₁ + 0,05) ÷ (L₂ + 0,05)

L₁ e L₂ sono le luminanze relative del colore più chiaro e di quello più scuro, da 0 (nero) a 1 (bianco). Per un testo normale serve almeno 4,5:1.

Esempio: bianco su #1A5CFF: 5,23:1

Esempi pratici

Il blu di un pulsante

Il colore #1A5CFF in RGB e HSL.

rgb(26, 92, 255)

hsl(223, 100%, 55%)

Il rosso puro

hsl(0, 100%, 50%) in esadecimale.

#FF0000

rgb(255, 0, 0)

Testo bianco leggibile?

Testo bianco su sfondo #1A5CFF.

Contrasto 5,23:1

Va bene per i testi normali (AA)

Valori calcolati con il convertitore di questa pagina.

Domande frequenti

Che differenza c’è tra HEX e RGB?

Nessuna nel colore: sono due modi di scrivere gli stessi tre valori di rosso, verde e blu. RGB li scrive in decimale (da 0 a 255), HEX in esadecimale (da 00 a FF).

Cosa sono le 8 cifre in un codice HEX?

Le ultime due cifre sono la trasparenza, detta canale alfa: FF è del tutto opaco, 00 del tutto trasparente, 80 circa metà. Il convertitore la mostra in percentuale e come rgba.

Cosa vuol dire contrasto AA e AAA?

Sono i livelli delle linee guida WCAG sull’accessibilità: AA richiede almeno 4,5:1 per i testi normali e 3:1 per quelli grandi, AAA almeno 7:1. Un buon contrasto rende il testo leggibile anche a chi vede meno bene.

Perché il CMYK è solo indicativo?

Perché lo schermo crea i colori con la luce e la stampa con gli inchiostri: il risultato dipende da carta, stampante e profilo colore. Per lavori tipografici chiedi al tipografo il profilo da usare.

Come trovo il codice di un colore che vedo sullo schermo?

Nella scheda HEX tocca il quadratino accanto al campo: su molti computer la tavolozza ha un contagocce che preleva un colore dallo schermo. In alternativa i programmi di grafica mostrano il codice HEX del colore selezionato.

Posso scrivere il codice senza il cancelletto?

Sì: 1A5CFF, #1A5CFF e #1a5cff vanno tutti bene. Puoi usare anche la forma breve a tre cifre, come #15F, che vale #1155FF.

Ti servono altre conversioni?

Binario ed esadecimale, numeri romani, colori delle resistenze e valute: tutti gratuiti e con i passaggi spiegati.

Vai alla pagina Convertitori →