Convertitore colori
Converti tra HEX, RGB e HSL con anteprima.
Convertitore di colori HEX, RGB e HSL per il web design
Nel web design e nello sviluppo frontend, i colori vengono rappresentati in diversi modelli a seconda del contesto. Il formato HEX (#RRGGBB) è il più utilizzato nei fogli di stile CSS per la sua brevità. Il modello RGB (Red, Green, Blue) definisce i colori attraverso la miscelazione additiva di rosso, verde e blu con valori da 0 a 255, ed è il modello nativo degli schermi digitali. HSL (Hue, Saturation, Lightness) organizza i colori in modo più intuitivo per i designer, permettendo di regolare tinta, saturazione e luminosità in modo indipendente.
Il nostro convertitore trasforma qualsiasi colore tra questi tre formati in tempo reale. Questo è particolarmente utile quando lavori con strumenti di design come Figma o Adobe XD che esportano colori in HEX, ma hai bisogno di valori RGB per animazioni JavaScript, o quando vuoi creare variazioni di un colore regolando solo la luminosità in HSL. L'anteprima dal vivo ti permette di verificare esattamente come appare il colore prima di copiarlo.
Puoi inserire valori manualmente in qualsiasi dei tre formati o usare il selettore di colori nativo del browser per scegliere visivamente. Ogni formato include un pulsante di copia che inserisce il valore negli appunti pronto per l'uso nel tuo codice CSS, JavaScript o qualsiasi altro strumento di design.
Domande frequenti
Qual è la differenza tra HEX e RGB?
Entrambi rappresentano esattamente gli stessi colori, cambia solo la notazione. HEX usa numeri esadecimali (base 16) nel formato #RRGGBB, mentre RGB usa numeri decimali da 0 a 255 per ogni canale. Ad esempio, il bianco è #FFFFFF in HEX e rgb(255, 255, 255) in RGB. HEX è più compatto per il CSS, mentre RGB è più facile da manipolare a livello programmatico.
Quando usare HSL?
HSL è ideale quando hai bisogno di creare palette di colori armoniche o variazioni di una stessa tonalità. Separando la tinta (H) dalla saturazione (S) e dalla luminosità (L), puoi creare versioni più chiare o scure di un colore semplicemente regolando la luminosità, o versioni più vivaci o spente cambiando la saturazione, senza alterare la tinta base.
Quale modello di colore usano i browser?
I browser supportano nativamente HEX, RGB, HSL e nomi di colori predefiniti in CSS. Internamente usano RGB per il rendering a schermo. Il formato più comune nei fogli di stile è HEX per la sua compattezza, ma HSL sta guadagnando popolarità per la sua facilità nel creare variazioni di colore coerenti.
Vuoi saperne di più? Leggi la nostra guida completa →