Convertitore di colori

Converti colori tra formati HEX, RGB e HSL con anteprima in tempo reale

Che cos'è e come funziona?

Un convertitore di colore traduce uno stesso colore tra i formati usati nel design e nel codice: HEX (#3B82F6), RGB (rgb(59, 130, 246)) e HSL (hsl(217, 91%, 60%)). Tutti descrivono lo stesso pixel, ma ciascuno è comodo in un posto diverso — HEX è compatto e domina nel CSS e nei file di design, RGB corrisponde direttamente a come gli schermi mescolano luce rossa, verde e blu, e HSL descrive il colore come lo pensa la gente: una tonalità, quanto è vivace e quanto è chiaro o scuro. Convertire ti permette di portare un colore in modo pulito tra uno strumento di design, un foglio di stile e un programma di grafica senza che si discosti.

Le conversioni sono corrispondenze matematiche esatte, quindi #3B82F6, la sua tripletta RGB e i suoi valori HSL sono tre modi di scrivere uno stesso colore. Il formato che rende di più è HSL: poiché separa la tonalità dalla luminosità, puoi costruire una palette coerente tenendo fissa la tonalità e regolando solo la luminosità per ombre e sfumature, cosa scomoda da fare a mano in HEX. Questo strumento mostra i tre formati e un campione dal vivo insieme, così scegli la rappresentazione che serve a ogni strumento e la copi all'istante.

Casi d'uso

• Abbinare un colore di brand: incolla un HEX da una guida di stile e leggi i suoi valori RGB e HSL per uno strumento che ne accetta solo uno.
• Creare ombre per una palette: parti da un colore base in HSL e regola solo la luminosità per generare varianti più chiare e più scure coerenti.
• Tradurre il design in codice: converti il valore RGB di un designer nell'HEX che si aspetta un file CSS, con anteprima per confermare che sia il colore giusto.

Domande frequenti

HEX, RGB e HSL descrivono gli stessi colori?

Sì. HEX e RGB sono la stessa informazione scritta in modo diverso — ogni coppia di cifre HEX è un canale RGB. HSL è un diverso sistema di coordinate sullo stesso spazio colore, quindi qualsiasi colore si converte in modo pulito tra i tre senza perdita per i colori opachi standard.

Quando dovrei usare HSL invece di HEX?

HSL brilla quando regoli un colore invece di limitarti a nominarlo: schiarire, scurire o desaturare. Tenere fisse tonalità e saturazione e cambiare solo la luminosità produce un insieme armonioso di ombre, molto più difficile da stimare a occhio in HEX.

Come gestisco la trasparenza?

La trasparenza è un canale alfa aggiuntivo, scritto come HEX a 8 cifre (#RRGGBBAA) o come rgba()/hsla(). La conversione opaca copre il colore in sé; aggiungi il valore alfa separatamente per i colori semitrasparenti.

Perché il mio colore convertito appare un po' diverso sullo schermo?

I numeri sono esatti, ma come appare un colore dipende dal display, dalla sua calibrazione e dal profilo colore. La conversione non cambia il colore; le differenze che percepisci derivano dal monitor che rende gli stessi valori in modo diverso.

Sviluppatore

Generatore UUID · Convertitore di timestamp · Codificatore Base64 · Decodificatore Base64 · Generatore di hash · Convertitore di basi numeriche