Convertitore di Codici Colore (Tutti i Formati)

Benvenuto nel Convertitore di Codici Colore Tutti i Formati, uno strumento online gratuito che converte contemporaneamente qualsiasi valore di colore in tutti i formati più comuni. Incolla un codice HEX, una tripletta RGB, una definizione HSL o HSV, un quartetto CMYK o persino un colore con nome CSS — e leggi istantaneamente i valori equivalenti, visualizza un campione in anteprima live, controlla il contrasto per l'accessibilità WCAG ed esplora una tavolozza generata automaticamente con colori complementari, triadici, analoghi, tinte e sfumature.

Perché usare un convertitore di colore all-in-one?

La maggior parte dei convertitori di colore online gestisce solo una direzione (da HEX a RGB, o da RGB a CMYK), costringendoti a concatenare più strumenti quando hai bisogno di una visione d'insieme. Questo convertitore accetta tutti i formati comuni in un unico campo, rileva automaticamente il formato inserito e restituisce tutti e cinque i formati contemporaneamente con un'anteprima live — facendoti risparmiare diversi passaggi quando lavori tra web, mobile, stampa e strumenti di design.

Formati di input supportati

Qual è la differenza tra i modelli di colore HSL e HSV?

Sia HSL che HSV descrivono un colore attraverso tre canali intuitivi — Tonalità, Saturazione e un terzo valore legato alla luminosità — ma differiscono proprio in questo terzo canale.

• HSL — Hue (Tonalità), Saturation (Saturazione), Lightness (Luminosità): la luminosità va dallo 0% (nero puro) al 50% (la versione più vivida della tonalità) fino al 100% (bianco puro). L'HSL è preferito nel CSS perché rende lo schiarimento o lo scurimento di un colore simmetrico e prevedibile.
• HSV / HSB — Hue (Tonalità), Saturation (Saturazione), Value/Brightness (Valore/Brillantezza): il valore va dallo 0% (nero puro) fino al 100% (la versione più piena e satura della tonalità). L'HSV è il modello alla base dei selettori di colore in Photoshop, Figma e nella maggior parte degli strumenti di progettazione desktop.

Ad esempio, un rosso completamente saturo è hsl(0, 100%, 50%) in HSL ma hsv(0, 100%, 100%) in HSV. Lo stesso colore in due modelli mentali diversi — entrambi utili, a seconda che tu stia pensando come un autore CSS o come un pittore.

Perché i miei valori CMYK sembrano leggermente diversi dai software di stampa?

L'RGB è un modello additivo usato dagli schermi, mentre il CMYK è un modello sottrattivo usato dalle stampanti. La conversione matematica eseguita da questo strumento è un'approssimazione rapida che non include alcun profilo colore ICC, limiti di copertura dell'inchiostro o regolazioni specifiche per la carta. Per lavori di stampa professionali, affidati sempre al profilo CMYK gestito dal tuo software di progettazione (come US Web Coated SWOP v2 o Coated FOGRA39). Usa questo convertitore come riferimento veloce quando hai semplicemente bisogno di un quartetto CMYK che sia "abbastanza vicino" per le fasi iniziali di progettazione.

Come funziona il controllo del contrasto WCAG?

Le Linee guida per l'accessibilità dei contenuti Web definiscono un rapporto di contrasto tra due colori basato sulla loro luminanza relativa — un modello di luminosità percettiva che pesa il verde più del rosso e il rosso più del blu. Il rapporto va da 1:1 (nessun contrasto) a 21:1 (nero puro su bianco puro).

• AAA — rapporto ≥ 7:1, soddisfa il livello di accessibilità più rigoroso per il testo del corpo
• AA — rapporto ≥ 4.5:1, il minimo per il testo del corpo nella maggior parte delle normative
• AA Large — rapporto ≥ 3:1, sufficiente per testo grande (18pt+ o 14pt grassetto) ed elementi grafici dell'interfaccia utente
• Fail — rapporto < 3:1, non utilizzare questa combinazione per il testo

Lo strumento calcola il contrasto rispetto al bianco puro e al nero puro, quindi evidenzia la scelta migliore come colore del testo predefinito quando questa tonalità viene utilizzata come sfondo.

Il convertitore genera una tavolozza di colori?

Sì. Dopo ogni conversione, lo strumento crea una tavolozza per designer partendo dalla stessa tonalità, includendo:

• Complementare — il colore direttamente opposto sulla ruota (rotazione della tonalità di 180°), utile per accenti ad alto contrasto
• Triadici — due colori equamente distanziati di 120°, equilibrati e vibranti
• Analoghi — tonalità vicine a ±30°, utili per sfumature e sfondi armoniosi
• Tinte — tre variazioni più chiare (stessa tonalità, maggiore luminosità)
• Sfumature — tre variazioni più scure (stessa tonalità, minore luminosità)

Clicca su qualsiasi campione della tavolozza per caricarlo istantaneamente nel convertitore come nuovo punto di partenza — perfetto per iterare rapidamente sul colore di un brand, un set di icone o un tema UI.

Come usare questo strumento

1. Inserisci o seleziona un colore — digita qualsiasi valore (HEX, RGB, HSL, HSV, CMYK o un nome di colore CSS) nel campo di input, oppure clicca sul piccolo campione di colore per aprire il selettore colore nativo del tuo browser.
2. Converti — fai clic sul pulsante Converti. Lo strumento rileva automaticamente il formato fornito e calcola tutti gli altri formati.
3. Copia ciò che ti serve — fai clic su qualsiasi pulsante di copia accanto a un valore di formato. Il pulsante mostrerà brevemente un segno di spunta per confermare che il valore è negli appunti.
4. Controlla l'accessibilità — rivedi i rapporti di contrasto WCAG rispetto al bianco puro e al nero puro per confermare se il colore è leggibile come testo o sfondo.
5. Esplora la tavolozza — clicca su qualsiasi campione nella sezione della tavolozza per designer per convertirlo, espandendo la tua esplorazione senza lasciare la pagina.

Casi d'uso pratici

Per gli sviluppatori web

• Converti un HEX da un file Figma in hsl() per l'uso con le proprietà personalizzate CSS e i moderni sistemi di tematizzazione
• Genera valori rgba() per sovrapposizioni traslucide direttamente dal colore HEX di un brand
• Verifica che il colore di un marchio soddisfi lo standard WCAG AA su sfondi bianchi prima della pubblicazione

Per i grafici

• Traduci un colore CSS da un sito web in un'approssimazione CMYK per mockup di stampa
• Costruisci una scala tonale (tinte e sfumature) da una singola tonalità di partenza
• Trova un accento complementare o triadico senza lasciare il browser

Per i designer UI e di prodotto

• Passa da HSV (selettore di Figma) a HSL (CSS) durante la documentazione dei design token
• Identifica automaticamente il miglior colore del testo (nero o bianco) per qualsiasi sfondo
• Salva o condividi rapidamente un colore convertito tramite l'URL della pagina dei risultati

Suggerimenti per i migliori risultati

• Flessibilità con i separatori — il parser accetta virgole, spazi o barre all'interno delle parentesi, quindi rgb(79 70 229) funziona altrettanto bene di rgb(79, 70, 229).
• Usa le percentuali quando appropriato — rgb(31%, 27%, 90%) è valido; lo strumento converte internamente le percentuali in valori 0–255.
• Prova i colori con nome CSS — funzionano oltre 140 nomi, incluse aggiunte moderne come rebeccapurple.
• Leggi le barre dei canali — la scomposizione visiva dei canali rosso/verde/blu e CMYK rende facile vedere quali inchiostri dominano la versione stampata del colore.
• Considera il CMYK solo come guida — apri il risultato nel tuo software di stampa con gestione del colore per il valore finale e accurato.

Domande frequenti

Devo includere il simbolo # quando inserisco un valore HEX?

No. Sono accettati sia #4f46e5 che 4f46e5. Il simbolo # iniziale è opzionale.

Sono supportati i valori HEX a 4 e 8 cifre (con alfa)?

Il parser li accetterà, ma il canale alfa viene rimosso durante la conversione perché RGB, HSL, HSV e CMYK nelle loro forme classiche non lo supportano. Lo strumento si concentra solo sulla parte cromatica.

Posso condividere o salvare nei segnalibri un colore convertito?

Sì. Il modulo viene inviato tramite GET, quindi l'URL contiene il colore convertito. Copia l'URL della pagina dopo la conversione per condividere o salvare nei segnalibri l'esatta pagina dei risultati.

Perché alcuni valori HEX sono mostrati in lettere maiuscole?

L'output normalizza l'HEX in maiuscolo (es. #4F46E5), che è la convenzione utilizzata in molte guide di stile e di design. Puoi incollarlo di nuovo in minuscolo se preferisci — sono equivalenti.

Funziona sui dispositivi mobili?

Sì. L'interfaccia è completamente reattiva e il modulo, la tavolozza e le schede di contrasto si adattano a layout a colonna singola sugli schermi più piccoli per una comoda esperienza touch.

Risorse aggiuntive

• HSL e HSV - Wikipedia
• Modello di colore CMYK - Wikipedia
• Requisito WCAG 2.1 Contrasto (Minimo)