Come usare il convertitore di codici colore
- Scegli il formato che hai già: HEX, RGB o HSL. I campi cambiano in base alla rappresentazione.
- Inserisci tutti i canali. HEX accetta tre o sei cifre; RGB accetta canali interi da 0 a 255; HSL accetta qualsiasi tonalità numerica e percentuali da 0 a 100.
- Scegli il formato di destinazione e seleziona Converti colore. Il codice convertito e un campione appaiono insieme per controllare sia il testo sia il colore visibile.
- Copia il risultato per CSS o note di progettazione. Scambia formati rende modificabile la rappresentazione convertita mantenendo lo stesso colore. Modificare un campo cancella il risultato precedente fino alla nuova conversione.
HEX, RGB e HSL descrivono lo stesso colore web
HEX e RGB codificano entrambi i canali luminosi rosso, verde e blu. Un codice HEX di sei cifre memorizza due cifre esadecimali per canale: #3366FF significa rosso 0x33 = 51, verde 0x66 = 102 e blu 0xFF = 255. La forma breve a tre cifre #0F8 si espande ripetendo ogni cifra, producendo #00FF88. Il convertitore restituisce sempre un HEX di sei cifre maiuscole, per risultati copiati coerenti.
HSL rappresenta tonalità, saturazione e luminosità. La tonalità è un angolo sul cerchio cromatico, la saturazione descrive quanto il colore è vivace o grigio e la luminosità va dal nero a 0%, passando per il colore scelto intorno al 50%, fino al bianco a 100%. HSL è spesso più comodo per regolare una famiglia di colori affini senza ragionare direttamente sui canali rosso, verde e blu.
Direzione di conversione e formule
Da HEX a RGB, ogni coppia esadecimale di due cifre diventa un intero da 0 a 255. Da RGB a HEX si esegue l'inverso, aggiungendo uno zero iniziale alle singole cifre esadecimali. Da RGB a HSL si scalano prima i canali a 0–1, si trovano massimo e minimo e si ricavano luminosità, saturazione e settore della tonalità. Da HSL a RGB si calcola il croma da saturazione e luminosità, lo si colloca nel settore della tonalità e si aggiunge l'offset di luminosità prima di arrotondare ogni canale RGB finale.
Sono supportate tutte e sei le direzioni pratiche nello stesso strumento: HEX a RGB, RGB a HEX, HEX a HSL, HSL a HEX, RGB a HSL e HSL a RGB. La conversione tra HEX e HSL passa internamente per i canali RGB equivalenti. Il risultato rappresenta ancora lo stesso colore entro i limiti dei canali interi usati da CSS RGB e HEX a sei cifre.
Intervalli, ciclicità della tonalità e precisione
- L'ingresso HEX è esattamente di tre o sei cifre esadecimali, con # iniziale facoltativo. Trasparenza alfa, nomi dei colori, HEX a otto cifre, variabili CSS ed espressioni CSS arbitrarie sono esclusi.
- I canali RGB sono interi da 0 a 255. Valori decimali, negativi e fuori intervallo vengono rifiutati, non limitati silenziosamente.
- Saturazione e luminosità accettano decimali da 0% a 100%. La tonalità è periodica: 360° equivale a 0°, 420° a 60° e −120° a 240°.
- I risultati RGB e HEX usano interi. HSL mostra al massimo due decimali e rimuove gli zeri finali. Nero, bianco e grigio acromatici usano tonalità 0° perché la tonalità non ha effetti visibili quando la saturazione è 0%.
- Il campione è un controllo visivo, non una prova calibrata. Schermi, gestione del colore del browser, luce ambientale e requisiti di contrasto per l'accessibilità possono cambiare la percezione di un colore.
Usi pratici e risultati
- Trasforma un codice HEX fornito da un designer in RGB per codice, documentazione o software con canali separati.
- Converti RGB in HSL prima di regolare tonalità, saturazione o luminosità per un colore affine di passaggio del puntatore, bordo o sfondo.
- Confronta un valore incollato con il campione prima di copiarlo. L'anteprima usa localmente l'HEX calcolato di sei cifre e non invia il colore ai sistemi di analisi.
- La copia restituisce un valore di destinazione come rgb(51, 102, 255) o hsl(225deg, 100%, 60%). Lo strumento non crea palette, non estrae colori da immagini e non fornisce profili di stampa CMYK.
Direzioni di conversione HEX, RGB e HSL
Scegli la coppia adatta al codice che hai e a quello che ti serve. Ogni direzione sotto include nomi completi dei formati, regola di conversione ed esempio dal dato al risultato.
Da HEX esadecimale a RGB rosso, verde, blu
Dividi un codice HEX di sei cifre in coppie rosso, verde e blu, poi converti ogni coppia esadecimale in un intero in base 10. Esempio: #3366FF diventa 0x33 = 51, 0x66 = 102 e 0xFF = 255, quindi il risultato è rgb(51, 102, 255). Un valore a tre cifre come #0F8 si espande prima in #00FF88.
Da RGB rosso, verde, blu a HEX esadecimale
Converti ogni canale intero da 0–255 in due cifre esadecimali e uniscile dopo #. Esempio: rgb(255, 87, 51) diventa FF, 57 e 33, producendo #FF5733. Un canale minore di 16 riceve uno zero iniziale.
Da HEX esadecimale a HSL tonalità, saturazione, luminosità
Decodifica prima HEX in RGB, normalizza i canali a 0–1 e calcola tonalità, saturazione e luminosità da massimo, minimo e differenza dei canali. Esempio: #3366FF si converte in hsl(225deg, 100%, 60%).
Da HSL tonalità, saturazione, luminosità a HEX esadecimale
Usa la tonalità per scegliere il settore del cerchio cromatico, combina saturazione e luminosità nei canali RGB, arrotondali a interi e codificali come HEX. Esempio: hsl(60deg, 100%, 50%) si converte in #FFFF00. Una tonalità di 420° dà lo stesso risultato perché si ripete ogni 360°.
Da RGB rosso, verde, blu a HSL tonalità, saturazione, luminosità
Normalizza i canali RGB, trova massimo e minimo, usa il loro punto medio per la luminosità e la differenza per saturazione e tonalità. Esempio: rgb(128, 128, 128) si converte in circa hsl(0deg, 0%, 50.2%); con saturazione zero, la tonalità non cambia il grigio visibile.
Da HSL tonalità, saturazione, luminosità a RGB rosso, verde, blu
Calcola il croma da saturazione e luminosità, collocalo nel settore della tonalità e aggiungi l'offset di luminosità prima di scalare a 0–255. Esempio: hsl(240deg, 100%, 50%) si converte in rgb(0, 0, 255). I canali RGB finali vengono arrotondati a interi.
Esempi di conversione svolti
Esempio 1: da HEX a RGB e HSL
Inserisci #3366FF come HEX. Da HEX a RGB restituisce rgb(51, 102, 255). Dopo la conversione riuscita, cambia la destinazione in HSL e si aggiorna subito a hsl(225deg, 100%, 60%). Il campione resta lo stesso blu perché è cambiata solo la notazione.
Esempio 2: tonalità HSL ciclica verso HEX
Scegli HSL e inserisci H = 420, S = 100 e L = 50. Poiché la tonalità si ripete ogni 360°, 420° è lo stesso punto di 60°. Da HSL a HEX restituisce #FFFF00 e da HSL a RGB restituisce rgb(255, 255, 0), entrambi gialli.
Domande frequenti
Posso inserire la forma breve #RGB?
Sì. HEX a tre cifre si espande ripetendo ogni cifra, quindi #0F8 diventa #00FF88. Le forme alfa a quattro e otto cifre non sono supportate.
Perché il grigio ha tonalità 0°?
Quando la saturazione è 0%, ogni tonalità produce lo stesso grigio. La conversione usa 0° come valore convenzionale stabile; non significa che il grigio sia rosso.
Perché cambiare formato ha cancellato o aggiornato il risultato?
Prima della prima conversione riuscita e dopo ogni modifica ai campi, cambiare formato lascia vuoto il risultato. Dopo una conversione riuscita, cambiare solo formato aggiorna subito il risultato perché il colore confermato non cambia.
Riconvertire riproduce sempre i miei decimali HSL?
Riproduce il colore attraverso canali RGB interi. Alcuni decimali HSL corrispondono allo stesso colore RGB intero, quindi un'andata e ritorno può restituire numeri HSL leggermente diversi, mentre HEX a sei cifre e colore visibile restano equivalenti.
Può sostituire la gestione del colore per la stampa o una verifica del contrasto?
No. Riguarda solo le notazioni HEX, RGB e HSL per il browser. Profili CMYK, tinte piatte, calibrazione del display, generazione di palette e verifica del contrasto WCAG richiedono strumenti e contesto separati.