Inserisci un Colore
Selettore di Colore Visivo
Inserisci un codice HEX a 6 cifre con o senza il prefisso #
Inserisci un Colore da Convertire
Digita un codice HEX, inserisci valori RGB o HSL, usa il selettore di colori, o clicca su 'Colore Casuale' per iniziare. Tutti i formati si aggiornano in tempo reale.
Come Utilizzare il Grafico dei Codici Colore
Inserisci il Tuo Colore
Digita un codice HEX direttamente (ad es., #FF5733) nel campo HEX, inserisci valori RGB decimali (0–255 ciascuno), inserisci valori HSL o CMYK, oppure clicca sul campione di colore per aprire il selettore di colore visivo. Puoi anche cliccare su 'Colore Casuale' per ispirazione immediata. Tutti i metodi di input aggiornano il risultato in tempo reale mentre digiti.
Visualizza Tutti i Formati Convertiti
Il pannello dei risultati mostra il tuo colore in formato HEX, RGB, HSL, HSV, CMYK e intero simultaneamente. Ogni formato ha un pulsante di copia in modo da poter prendere esattamente ciò di cui hai bisogno. Usa il pulsante 'Copia Tutto' per copiare ogni formato in una volta, o esporta in CSV per documentazione.
Genera Ombre, Tinte e Controlla l'Accessibilità
Scorri verso il basso nei risultati per vedere una striscia di 9 ombre (varianti più scure) e 9 tinte (varianti più chiare) — clicca su qualsiasi campione per caricare quella variante nel convertitore. La sezione di contrasto WCAG mostra i rapporti di contrasto rispetto al bianco e al nero, con indicatori di passaggio AA/AAA per verificare che il tuo colore soddisfi gli standard di accessibilità.
Esplora il Riferimento dei Colori Nominati
Passa alla scheda 'Grafico dei Colori Nominati' per esplorare tutti i 140 colori nominati CSS organizzati per famiglia (rossi, verdi, blu, viola, ecc.). Ogni riga mostra il campione di colore, il nome CSS, il codice HEX e i valori RGB. Clicca su 'Usa Colore' in qualsiasi riga per caricarlo istantaneamente nel convertitore.
Domande Frequenti
Qual è la differenza tra i codici colore HEX e RGB?
HEX e RGB descrivono esattamente lo stesso colore utilizzando sistemi di notazione diversi. RGB separa i canali rosso, verde e blu in tre interi decimali da 0 a 255. Ad esempio, rgb(59, 130, 246) è un blu medio. HEX rappresenta questi stessi tre valori in esadecimale (base-16): 59 diventa 3B, 130 diventa 82 e 246 diventa F6, dando #3B82F6. HEX è più compatto ed è il formato standard per HTML e CSS. RGB è più facile da leggere matematicamente ed è utilizzato in CSS così come nei software di design grafico. Entrambi sono equivalenti: qualsiasi colore esprimibile in un formato può essere espresso nell'altro.
Perché HSL è migliore per le regolazioni di design rispetto a HEX o RGB?
HSL (Tonalità, Saturazione, Luminosità) separa l'identità del colore puro (tonalità, 0–360 gradi) da quanto è vivido (saturazione) e quanto è chiaro o scuro (luminosità). Questo lo rende molto più intuitivo per il lavoro di design. Ad esempio, per rendere un colore più chiaro del 20%, basta aumentare il valore L di 20 — in HEX o RGB, la stessa operazione richiederebbe di calcolare tutti e tre i canali separatamente. HSL è anche come gli esseri umani descrivono naturalmente i colori: 'un blu brillante e medio-chiaro' si mappa direttamente a un'alta saturazione e a una luminosità media a una tonalità blu. CSS supporta nativamente la notazione hsl(), e strumenti di design come Figma utilizzano modelli simili a HSL internamente. Molti sistemi di design definiscono i token di colore in HSL per questo motivo.
Cos'è il CMYK e quando dovrei usarlo?
CMYK sta per Ciano, Magenta, Giallo e Nero (Key) — i quattro colori di inchiostro utilizzati nella stampa a colori. A differenza di RGB, che aggiunge luce insieme (miscelazione additiva), CMYK sottrae luce sovrapponendo inchiostri che assorbono determinate lunghezze d'onda (miscelazione sottrattiva). Questo è il motivo per cui un colore che appare vivace sullo schermo può apparire più opaco quando stampato: la gamma RGB (intervallo di colori visualizzabili) è più ampia di quella che la stampa CMYK può riprodurre. Usa i valori CMYK quando prepari file per la stampa professionale, inclusi biglietti da visita, brochure, manifesti e imballaggi. La maggior parte delle tipografie professionali e dei software di design (Adobe Illustrator, InDesign) lavora in CMYK per progetti di stampa. Per design web e su schermo, attieniti a HEX o RGB.
Cos'è il rapporto di contrasto WCAG e perché è importante?
Il rapporto di contrasto WCAG (Web Content Accessibility Guidelines) misura quanto un colore di primo piano e un colore di sfondo appaiono diversi a qualcuno con scarsa visione o daltonismo. Viene calcolato utilizzando la luminanza relativa — una misura della luminosità percepita. Un rapporto di 1:1 significa nessun contrasto (stesso colore), mentre 21:1 è il massimo contrasto (nero su bianco). Lo standard WCAG AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande. WCAG AAA richiede 7:1. Soddisfare questi standard garantisce che il tuo sito web sia leggibile per gli utenti con disabilità visive ed è spesso richiesto per la conformità legale con l'ADA (Americans with Disabilities Act) e gli standard WCAG 2.1/2.2. Questo strumento calcola automaticamente i rapporti di contrasto rispetto sia al bianco che al nero per qualsiasi colore tu inserisca.
Come vengono generate le ombre e le tinte?
Un'ombra è creata mescolando un colore con il nero — matematicamente, moltiplicando ciascun canale RGB per un fattore inferiore a 1. Ad esempio, un'ombra del 50% di rosso (255, 0, 0) sarebbe (128, 0, 0). Una tinta è creata mescolando con il bianco — mescolando il valore del canale originale verso 255. Una tinta del 50% di rosso sarebbe (255, 128, 128). Questo strumento genera 9 ombre equidistanti (da quasi nero all'originale) e 9 tinte equidistanti (dall'originale a quasi bianco), dandoti un totale di 19 varianti. Queste strisce sono molto utili per costruire palette di sistemi di design — ad esempio, Tailwind CSS utilizza una scala di 10 ombre simile da 50 (più chiaro) a 950 (più scuro) per ciascuna delle sue 22 famiglie di colori.
Quali sono i 140 colori nominati CSS?
I 140 colori nominati CSS sono un insieme di parole chiave di colore definite nella specifica CSS Color (CSS Colors Level 4). Includono colori web classici come 'rosso', 'blu' e 'verde', così come nomi descrittivi come 'blu fiordaliso', 'blush lavanda' e 'whip di papaya'. Ogni nome corrisponde a un valore HEX/RGB specifico che è coerente su tutti i browser e sistemi operativi. Hanno avuto origine dal sistema di colori X11 utilizzato negli ambienti Unix e sono stati successivamente standardizzati per CSS. Sebbene siano convenienti per colori comuni, i colori nominati coprono solo una piccola frazione dei 16,7 milioni di colori rappresentabili in RGB a 24 bit. Per lavori di design precisi, utilizza sempre valori HEX o RGB piuttosto che fare affidamento sui colori nominati, poiché i nomi possono essere fuorvianti (ad esempio, 'grigio' e 'grey' sono leggermente diversi).