Convertitore colori

Converti tra HEX, RGB, HSL, HSV e CMYK. Anteprima live. Verifica del contrasto WCAG per l'accessibilità. Niente lascia il tuo browser.

Come funziona Convertitore colori

Convertitore di colori traduce qualsiasi colore tra i formati HEX, RGB, HSL, HSV e CMYK istantaneamente mentre digiti. Esegue anche un controllo del contrasto WCAG tra due colori qualsiasi scelti, mostrando il rapporto di contrasto e il risultato di superamento/non superamento AA/AAA per testo normale, testo grande e componenti UI. Tutti i calcoli avvengono nel browser senza dati inviati da nessuna parte; nulla di ciò che digiti lascia il dispositivo.

Capire come lo stesso colore appare nei diversi modelli di colore è utile negli handoff di design. Un designer potrebbe specificare un colore del brand come HEX #1A4F8C; uno sviluppatore CSS ha bisogno dell'equivalente HSL per il theming; un team di stampa ha bisogno della scomposizione CMYK. Questo strumento esegue la conversione in tutte le direzioni contemporaneamente in modo da non dover usare più convertitori separati.

Scritto da Bastien Sulyan

Come usare Convertitore colori, passo dopo passo

Digita un valore HEX, fai clic su un campione di colore, o inserisci valori RGB, HSL, HSV o CMYK nei rispettivi campi.
Tutte le altre rappresentazioni di formato si aggiornano immediatamente per mostrare il colore equivalente.
Per eseguire un controllo del contrasto, seleziona un colore di primo piano e uno di sfondo usando i due selettori di colore.
Leggi il rapporto di contrasto WCAG e i badge superamento/non superamento per i livelli di conformità AA e AAA.
Copia qualsiasi valore di colore usando l'icona copia accanto a ogni campo.

Casi d'uso comuni

Un designer UI converte un codice HEX del brand in HSL per scrivere una proprietà CSS personalizzata per un sistema di theming.
Uno sviluppatore web controlla il rapporto di contrasto tra il colore del testo e lo sfondo prima di distribuire un componente per confermare la conformità WCAG AA.
Un designer per la stampa riceve un colore web HEX e ha bisogno dell'equivalente CMYK per abbinarlo in una brochure stampata.
Uno sviluppatore ha bisogno della scomposizione RGB di un token di design per passare i singoli valori dei canali a una funzione di disegno canvas.

Domande frequenti

Lo strumento supporta i valori alfa (trasparenza)?

Il convertitore attuale funziona con colori completamente opachi (alfa = 1). HEXA (esadecimale a 8 cifre) e RGBA non sono ancora nell'ambito. Per l'opacità, imposta il canale alfa nel CSS separatamente usando la notazione rgba() o oklch().

I colori che inserisco vengono memorizzati o inviati da qualche parte?

No. La conversione dei colori è pura aritmetica (rimappatura dei canali e scalatura degli intervalli) che avviene interamente nel motore JavaScript del browser. Nulla di ciò che digiti qui raggiunge alcun server o servizio esterno.

Quali livelli di contrasto WCAG supporta il verificatore?

Lo strumento riporta rispetto ai criteri di successo WCAG 2.1: AA richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale (sotto i 18pt o 14pt in grassetto) e 3:1 per il testo grande e i componenti UI. AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande.

Perché i valori CMYK differiscono tra questo strumento e il software di design professionale?

La conversione RGB-CMYK eseguita da questo strumento è una formula matematica senza profilo colore. Le applicazioni di design professionale applicano profili colore ICC che tengono conto del dot gain dell'inchiostro e delle proprietà del substrato. I valori CMYK qui sono utili per l'approssimazione; per la stampa in produzione, applica sempre il profilo della tua macchina da stampa in un software dedicato.

Posso convertire un nome di colore CSS come «cornflowerblue» qui?

I colori con nome CSS non vengono digitati direttamente nei campi del convertitore. Per convertire un colore con nome, trova prima il suo valore HEX in una guida CSS (cornflowerblue è #6495ED), poi incolla quel HEX nel campo HEX per vedere tutti gli altri formati.

Lo strumento funziona offline dopo il caricamento della pagina?

Sì. La conversione dei colori è aritmetica senza dipendenze esterne. Una volta che la pagina è nella cache del browser puoi aprirla senza connessione di rete e tutte le conversioni funzioneranno normalmente.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti per sviluppatori