Converti HEX, RGB, HSL, HSV, CMYK — anteprima dal vivo, tonalità, ombre e contrasto di accessibilità
I codici colore sono il linguaggio universale del design digitale. Che tu stia costruendo un sito web, creando arte digitale, progettando un'app mobile o scegliendo colori per il tuo marchio, comprendere i codici colore è essenziale. Ogni colore sullo schermo è definito matematicamente come una combinazione di valori che dicono al display quanto rosso, verde e blu emettere — e ogni strumento di design professionale parla questa lingua in più dialetti: HEX, RGB, HSL, HSV, CMYK e altro.
Comprendere i Codici Colore e gli Spazi Colore
Cosa Sono i Codici Colore?
Un codice colore è un modo standardizzato per rappresentare un colore specifico come un valore numerico o un insieme di valori. I display digitali mescolano luce rossa, verde e blu a diverse intensità per creare qualsiasi colore visibile — questo è chiamato mescolanza di colori additiva. I codici HEX rappresentano questi valori RGB in notazione base-16 (esadecimale): #FF0000 significa rosso massimo (FF), nessun verde (00), nessun blu (00). La notazione RGB esprime gli stessi valori come interi decimali da 0 a 255. HSL e HSV separano la tonalità (il tipo di colore) dalla saturazione (ricchezza del colore) e dalla luminosità o valore (luminosità), che sono più intuitivi per gli esseri umani. CMYK, utilizzato nella stampa, funziona con la mescolanza di colori sottrattiva utilizzando inchiostri ciano, magenta, giallo e nero. Ogni formato è matematicamente equivalente — descrivono tutti lo stesso insieme di colori, solo in notazioni diverse ottimizzate per diversi casi d'uso.
Come Vengono Calcolate le Conversioni di Colore?
Convertire tra formati di colore implica formule matematiche precise. HEX a RGB è semplice: ogni coppia di cifre esadecimali (00-FF) si converte in un intero decimale (0-255) utilizzando aritmetica base-16. RGB a HSL richiede di normalizzare i valori RGB a 0-1, trovare i valori massimi e minimi dei canali, calcolare il delta e derivare la tonalità da quale canale è dominante, la saturazione dal delta rispetto alla luminosità e la luminosità come media di max e min. RGB a CMYK prima identifica il componente chiave (nero) come 1 meno il rapporto RGB massimo, poi deriva C, M, Y dall'inchiostro rimanente necessario. CMYK a RGB inverte questo: ogni canale è calcolato come 255 volte (1 meno la frazione di inchiostro) volte (1 meno la frazione di nero). Tutte le conversioni preservano la precisione matematica attraverso l'intero spettro di colori visualizzabili.
Perché i Codici Colore Sono Importanti per il Design?
L'uso coerente dei codici colore è fondamentale per il lavoro di design professionale. Senza codici colore precisi, i colori possono variare tra strumenti di design, browser e ambienti di stampa, rompendo la coerenza del marchio. I designer web utilizzano codici HEX e RGB per garantire una corrispondenza di colore pixel-perfetta tra browser e dispositivi. I designer di stampa si affidano ai valori CMYK per comunicare esatti rapporti di inchiostro alle tipografie, poiché schermi e stampanti utilizzano metodi di mescolanza di colori completamente diversi. Le linee guida di accessibilità (WCAG) richiedono rapporti di contrasto minimi tra i colori del testo e dello sfondo per garantire la leggibilità per le persone con scarsa visione o daltonismo — controllare i rapporti di contrasto è un requisito legale per molte organizzazioni. I sistemi di design utilizzano token di colore precisamente definiti (di solito valori HEX o HSL) per mantenere la coerenza tra i prodotti, e HSL è spesso preferito perché consente regolazioni programmatiche come rendere un colore più chiaro del 10% senza cambiare la sua tonalità.
Limitazioni e Considerazioni degli Spazi Colore
Sebbene HEX, RGB, HSL e CMYK coprano la stragrande maggioranza delle esigenze pratiche di design, ci sono importanti limitazioni da comprendere. Il modello di colore RGB è dipendente dal dispositivo — gli stessi valori RGB possono apparire diversi su schermi diversi a causa di variazioni nella calibrazione del monitor, profili colore (sRGB vs Display P3) e illuminazione ambientale. I valori CMYK mostrati in questo strumento sono approssimazioni per la conversione standard da sRGB a CMYK; il lavoro di stampa professionale richiede spesso la gestione dei profili colore con strumenti come Adobe Illustrator o InDesign per una corrispondenza Pantone accurata. I 140 colori nominati CSS sono definiti dalla specifica CSS Color e sono esatti — tuttavia, la funzione 'colore nominato più vicino' utilizza la distanza euclidea nello spazio RGB, che è un'approssimazione percettiva. Gli spazi colore moderni come OKLCH e OKLAB (non inclusi qui) offrono gradienti più uniformi percettivamente ma richiedono supporto del browser per il CSS Color Level 4.
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).