Convertitore di Colori
Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
Aggiornato aprile 2026
Revisionato da Rafael Duarte
Anteprima attiva
#197FE6
Colori complementari
Conversioni di formato
Suggerimento: fai clic su un colore complementare per usarlo. Premi Shift+Enter per copiare il valore HEX.
Come usare il convertitore di colori
Da HEX a RGB, HSL e CMYK in un solo passaggio
1. Scegli o digita il colore
Usa il selettore di colore oppure scrivi un codice HEX a 6 cifre, con o senza #, ad esempio #1A73E8.
2. Copia il formato che ti serve
HEX, RGB, HSL e CMYK compaiono insieme: clicca l'icona di copia accanto a quello che vuoi usare.
3. Salva la palette ed esportala
Aggiungi i colori alla palette e scaricali tutti in un file CSS con variabili già pronte.
Cosa fa questo convertitore HEX RGB
Quattro formati e un controllo di contrasto
HEX, RGB, HSL e CMYK insieme
Inserisci un solo codice esadecimale e leggi subito gli altri tre formati, senza passare da un convertitore all'altro.
Contrasto WCAG sul bianco
Calcola il rapporto di contrasto con lo sfondo bianco e indica se supera i livelli AA (4,5:1) e AAA (7:1).
Colori complementari
Quattro varianti ottenute ruotando la tonalità di 90°, 150°, 180° e 270°: clicca un campione per usarlo come colore attivo.
Esportazione in CSS
La palette salvata diventa un file palette.css con custom properties (--palette-1, --palette-2...) da incollare nel progetto.
Scorciatoia per copiare l'HEX
Premi Shift+Invio fuori da un campo di testo per copiare il codice HEX attivo senza usare il mouse.
Esempi di conversione colore
Valori calcolati dallo strumento, arrotondati all'intero
Quando ti serve convertire un colore
Gli scenari più comuni
Dal design al codice
Il file di Figma riporta l'HEX, ma nel CSS ti serve rgb() o hsl() per gestire varianti e trasparenze.
Verifiche di accessibilità
Controlla in un attimo se il colore del brand usato per il testo su sfondo bianco rispetta il livello AA delle WCAG.
Materiale da stampare
Ottieni un valore CMYK di partenza per biglietti da visita o volantini, da confermare poi con la tipografia.
Costruire un design system
Raccogli i colori del brand nella palette ed esportali come variabili CSS in un unico file.
Errori comuni con i colori
Approvare un colore a occhio
Un grigio può sembrare abbastanza scuro e fallire comunque il contrasto AA: #777777 si ferma a 4,48:1. Fidati del calcolo, non della percezione.
Considerare il CMYK come valore di stampa definitivo
La conversione è matematica e non usa profili colore ICC: alcuni blu e verdi molto saturi dello schermo non sono riproducibili in quadricromia. Chiedi sempre una prova alla tipografia.
Incollare un HEX abbreviato a 3 cifre
Il campo richiede esattamente 6 cifre esadecimali. Raddoppia ogni carattere prima di incollare: #0AF diventa #00AAFF.
Confondere la luminosità HSL con quella HSV
In HSL il 50% è il colore puro: sopra si schiarisce verso il bianco, sotto si scurisce verso il nero. Non è la stessa scala della luminosità HSV di molti programmi di grafica.
Perché usare questo convertitore di colori
HEX, RGB, HSL e CMYK sono visibili tutti insieme, con il controllo di contrasto WCAG accanto: sai subito se il colore funziona per il testo prima di lasciare la pagina.
Non serve registrarsi né installare nulla, e il colore non viene inviato a nessun server. È il modo più rapido per controllare un colore del brand senza aprire un programma di grafica.
Domande frequenti
Digita o incolla il codice HEX a 6 cifre e il valore RGB appare subito. Ogni coppia di cifre esadecimali corrisponde a un canale da 0 a 255: #FF8000 diventa rgb(255, 128, 0).
Riferimenti
La spiegazione ufficiale (in inglese) dei rapporti di contrasto minimi richiesti dalle WCAG.
La specifica (in inglese) dei formati di colore supportati dai browser moderni, inclusi `rgb()` e `hsl()`.
Il modello di colore sottrattivo usato nella stampa, spiegato in italiano.
Strumenti correlati
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
- Generatore CSS Flexbox Design Generatore CSS Flexbox gratuito: anteprima live, export Tailwind, CSS e React/JSX in schede, 11 layout predefiniti e proprietà dei singoli elementi incluse nel codice. Senza registrazione.
