Color Converter
Converti colori tra HEX, RGB e HSL con anteprima live e copia rapida.
Inserisci i dati
Come funziona
Formati supportati
HEX è la notazione esadecimale usata nel CSS: può essere scritta in forma breve #RGB (3 cifre) o completa #RRGGBB (6 cifre), ad esempio #C4480E. Ogni coppia di cifre rappresenta l'intensità di rosso, verde e blu da 00 a FF. RGB esprime il colore con tre valori decimali da 0 a 255, separati da virgola, corrispondenti ai canali rosso, verde e blu. HSL descrive il colore in modo più intuitivo: la tonalità (hue) va da 0 a 360 gradi sulla ruota cromatica, la saturazione da 0% a 100% e la luminosità da 0% (nero) a 100% (bianco).
Teoria del colore digitale
I monitor utilizzano il modello additivo dei colori: combinando luce rossa, verde e blu a diverse intensità si ottiene qualsiasi colore visibile a schermo. Con 8 bit per canale (256 livelli) e 3 canali, si possono rappresentare 16,7 milioni di colori (256 x 256 x 256 = 16.777.216). Questo è lo standard usato nel web, nei formati immagine come PNG e JPEG, e in tutti i CSS moderni.
Quando usare quale formato
HEX è ideale per i fogli di stile CSS grazie alla sua sintassi compatta e alla leggibilità immediata nei file di design. RGB è preferibile nella programmazione, ad esempio quando si lavora con il canvas HTML5 o si manipolano colori via JavaScript, perché i valori numerici sono più facili da calcolare. HSL è il formato migliore per i design system e la manipolazione dei colori: modificare luminosità o saturazione è immediato senza alterare la tonalità di base, rendendo semplice creare palette coerenti.
Conversione tra formati
La conversione da HEX a RGB è diretta: ogni coppia esadecimale viene convertita nel corrispondente valore decimale. La conversione da RGB a HSL richiede di calcolare il valore massimo e minimo tra i tre canali per determinare luminosità e saturazione, mentre la tonalità dipende da quale canale è dominante. Questo tool esegue tutte le conversioni istantaneamente nel browser, aggiornando i tre campi e l'anteprima colore in tempo reale ad ogni modifica.
Domande frequenti
RGB descrive i colori come combinazione di tre canali — rosso, verde e blu — con valori da 0 a 255 ciascuno. È il modello nativo dei monitor. HSL invece usa tonalità (0-360 gradi), saturazione e luminosità (0-100%), risultando più intuitivo per i designer perché permette di regolare la vivacità o la chiarezza di un colore senza cambiarne la tinta di base.
In Figma, seleziona un elemento e copia il valore HEX dal pannello proprietà a destra. Incollalo nel campo HEX di questo tool e otterrai automaticamente le conversioni RGB e HSL. Questo è utile quando devi trasferire i colori del design in codice CSS, poiché Figma non mostra nativamente il formato HSL.
Il tool visualizza il formato RGBA con canale alpha impostato a 1 (opacità piena). Per ora non supporta l'inserimento diretto di valori HSLA o RGBA con alpha variabile. Per usare la trasparenza nel tuo CSS, puoi copiare il valore RGBA mostrato e modificare manualmente il quarto parametro (da 0 a 1).
Al momento il tool non supporta i nomi colore CSS come "red", "steelblue" o "coral". È necessario inserire il valore numerico equivalente in formato HEX o RGB. Ad esempio, "red" corrisponde a #FF0000 ovvero rgb(255, 0, 0). Puoi trovare la lista completa dei 148 colori CSS nominati nella documentazione MDN.
Sì, i valori HSL vengono arrotondati all'intero più vicino per garantire praticità d'uso nel CSS. Le conversioni matematiche tra RGB e HSL producono spesso numeri decimali, ma nel CSS i valori interi sono lo standard più comune e garantiscono la massima compatibilità tra browser e strumenti di design.