Convertitore di colori

Il Convertitore di colori è uno strumento gratuito che converte un colore fornito in formato HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA in più formati equivalenti.

Quali formati di colore posso convertire?

Puoi inserire un valore HEX, HEX alpha, RGB, RGBA, HSV, HSL o HSLA e visualizzare i valori corrispondenti in tutti i formati supportati. È utile quando una specifica di progettazione, un foglio di stile o un'API di terze parti rappresenta lo stesso colore in modo diverso.

• HEX rappresenta i canali rosso, verde e blu tramite coppie esadecimali, solitamente nella forma #RRGGBB.
• HEX Alpha aggiunge un canale per l'opacità. Nella sintassi CSS moderna compare comunemente nella forma #RRGGBBAA.
• RGB usa i valori dei canali rosso, verde e blu, generalmente compresi tra 0 e 255.
• RGBA aggiunge la trasparenza alpha al formato RGB.
• HSV descrive tonalità, saturazione e valore. È comune nei selettori di colori, ma non è una funzione colore CSS standard.
• HSL descrive tonalità, saturazione e luminosità. CSS supporta direttamente HSL.
• HSLA è il formato HSL con un valore alpha.

RGB e HSL sono descrizioni matematiche diverse di uno stesso colore, non colori differenti. La conversione permette di cambiare rappresentazione mantenendo il colore desiderato con la massima fedeltà consentita dal formato di destinazione.

Come si usa il Convertitore di colori?

Inserisci un valore di colore completo nel campo Colore, usando uno dei formati accettati, quindi leggi o copia i valori generati dai campi di output.

1. Copia esattamente il valore di origine, includendo, se presenti, il cancelletto iniziale, le virgole, le parentesi, i simboli di percentuale o il componente alpha.
2. Incollalo nel campo Colore.
3. Leggi i valori equivalenti mostrati nei campi HEX, HEX Alpha, RGB, RGBA, HSV, HSL e HSLA.
4. Scegli uno dei formati di colore supportati dal sistema di destinazione. Per una regola CSS, le opzioni più comuni sono HEX, RGB, RGBA, HSL e HSLA. HSV viene usato più spesso nelle interfacce di modifica e nei calcoli sui colori.

La conversione viene eseguita sul server. Il valore inserito viene inviato al server tramite HTTPS e non viene memorizzato. Anche se un singolo colore raramente costituisce un dato sensibile, prima di inviarlo a un servizio online valuta se una palette non ancora pubblicata o un insieme di design token debba restare riservato.

Spazi e segni di punteggiatura fanno parte della sintassi di RGB, HSL e dei formati correlati, mentre i simboli di percentuale identificano i valori percentuali. Un numero isolato, un valore vuoto o un testo arbitrario non identificano un colore. Anche il testo accentato o scritto con caratteri non latini non ha un significato definito in questi formati numerici.

Come si interpretano i valori convertiti?

Ogni risultato è una notazione diversa dello stesso colore. Presta particolare attenzione agli intervalli dei canali, alle percentuali e alla trasparenza alpha. Il campo da copiare dipende dalla notazione supportata dal sistema di destinazione.

Nel formato HEX a sei cifre, la prima coppia rappresenta il rosso, la seconda il verde e la terza il blu. Ad esempio, #336699 contiene i valori esadecimali 33, 66 e 99 per i rispettivi canali, che corrispondono ai valori RGB decimali 51, 102 e 153.

La tonalità viene normalmente espressa come un angolo lungo una ruota dei colori. La saturazione e la luminosità o il valore sono in genere espressi in percentuale. La luminosità HSL e il valore HSV vengono calcolati in modo diverso, quindi le rispettive percentuali non devono essere confrontate come se misurassero la stessa proprietà.

Il canale alpha descrive l'opacità. Un colore completamente opaco non richiede un formato con supporto alpha, mentre un colore semitrasparente sì. Se copi un colore RGBA o HSLA in un semplice formato RGB, HSL o HEX a sei cifre, la notazione di destinazione non può registrare il canale alpha.

Questo convertitore non è documentato come validatore sintattico dotato di messaggi diagnostici dettagliati. Non fare affidamento sullo strumento per individuare con precisione il carattere errato in un valore non valido. Tra gli errori più comuni nella sintassi dei colori vi sono un cancelletto mancante in HEX, parentesi non corrispondenti, simboli di percentuale omessi, un valore alpha fuori dall'intervallo previsto o l'uso combinato delle convenzioni dei canali HSL e RGB.

Esempi di conversione dei colori

Un semplice esempio mostra il rapporto tra HEX, RGB, HSL e HSV. Il rosso puro può essere scritto nelle seguenti forme equivalenti.

• Valore HEX #ff0000
• Equivalente RGB rgb(255, 0, 0)
• Equivalente HSL hsl(0, 100%, 50%)
• Equivalente HSV hsv(0, 100%, 100%)

Per un colore meno saturo, #336699 equivale a rgb(51, 102, 153). La sua rappresentazione HSL è hsl(210, 50%, 40%), mentre quella HSV ha una tonalità di 210 gradi, una saturazione di circa il 66,7% e un valore del 60%. Un'interfaccia può arrotondare i valori decimali o usare una spaziatura diversa senza modificarne il significato pratico.

La trasparenza offre un altro esempio immediato. rgba(255, 0, 0, 0.5) e hsla(0, 100%, 50%, 0.5) descrivono entrambi un rosso con opacità dimezzata. Secondo la comune convenzione CSS HEX a otto cifre, il valore corrispondente è #ff000080, dove 80 è il byte alpha quantizzato.

Quando conviene convertire un colore?

Conviene convertire un colore quando l'applicazione di destinazione richiede una notazione diversa o quando un'altra rappresentazione semplifica il debug. Alcuni casi tipici sono la conversione di un valore Figma in una proprietà personalizzata CSS, la verifica di un valore RGBA trovato in Chrome DevTools, la preparazione dei campi colore per il payload di un'API o il controllo dei dati di un tema di terze parti prima della distribuzione.

In genere la conversione non serve se la notazione esistente è già supportata dal sistema di destinazione. Convertire un valore HEX a sei cifre in RGB solo per inserirlo in codice CSS elaborabile automaticamente offre pochi vantaggi. Inoltre, le conversioni ripetute da un formato all'altro possono introdurre arrotondamenti nei valori HSL o HSV. Allo stesso modo, non aggiungere un canale alpha se sai che tutti i colori sono completamente opachi.

Se devi scegliere visivamente un colore invece di convertire un valore già noto, il Selettore di colori è lo strumento più diretto. La conversione, inoltre, non sostituisce la verifica del contrasto, la simulazione del daltonismo o la gestione dei profili colore. L'equivalenza dei valori numerici non dimostra che un testo in primo piano rispetti i requisiti di contrasto WCAG.

Domande frequenti

Il convertitore accetta i nomi dei colori CSS?

No. I formati accettati indicati nella documentazione sono HEX, HEX alpha, RGB, RGBA, HSV, HSL e HSLA. Nomi come red, rebeccapurple o transparent non risultano quindi supportati come valori di input. Prima di inserirlo, converti il nome del colore in un valore CSS numerico.

Posso inserire valori HEX a tre cifre?

Tra i valori accettati è incluso HEX, ma le lunghezze HEX supportate non sono documentate. Per ottenere un input prevedibile, espandi una forma abbreviata come #369 in #336699. Lo stesso principio vale per le abbreviazioni a quattro cifre che includono il canale alpha.

Posso incollare una dichiarazione CSS invece del solo colore?

Inserisci il valore del colore, non l'intera dichiarazione. Ad esempio, usa #336699 invece di color: #336699;, perché il nome della proprietà e il punto e virgola non fanno parte del colore. Se copi un valore da JSON o da un file di configurazione, rimuovi le virgolette che lo racchiudono.

Il risultato mantiene le informazioni sulla gamma cromatica estesa o sul profilo colore?

No, tra i formati supportati non sono indicati formati a gamma cromatica estesa o profili colore incorporati. Display P3, Lab, LCH e i dati dei profili ICC contengono informazioni che i campi HEX, RGB, HSL e HSV disponibili non possono rappresentare. Quando è necessaria una conversione che tenga conto del profilo, usa un'applicazione con gestione del colore.

Perché i valori convertiti a volte contengono decimali?

I calcoli HSL e HSV possono produrre percentuali frazionarie anche quando i canali RGB di origine sono numeri interi. Arrotondando questi valori, una successiva conversione in RGB potrebbe restituire un colore leggermente diverso. Quando memorizzi i design token, conserva la precisione disponibile e arrotonda solo se richiesto dal formato di destinazione o dagli standard di programmazione adottati.