HEX, RGB, HSL o CMYK: quale formato colore usare e quando

Lo stesso colore, quattro lingue diverse

Scegli un colore qualsiasi, per esempio un corallo caldo. Ora descrivilo in quattro modi:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Tutti e quattro descrivono esattamente lo stesso colore. Non sono standard in competizione: sono rappresentazioni diverse del colore, ottimizzate per contesti diversi. La confusione nasce dal non sapere quale contesto richieda quale formato.

Questa guida analizza ogni formato in parole semplici: che cos'è, come funziona, quando usarlo e quando è la scelta sbagliata. Se lavori con il colore a qualsiasi titolo — design, sviluppo, stampa, marketing — ti eviterà di scegliere il formato sbagliato per il tuo progetto.

HEX: lo standard del web

Che cos'è

HEX (esadecimale) è un codice di sei caratteri preceduto dal cancelletto: #E8635A. Ogni coppia di caratteri rappresenta i canali Rosso, Verde e Blu in notazione base 16 (da 00 a FF).

È funzionalmente identico a RGB, solo scritto in modo diverso. #E8635A equivale a rgb(232, 99, 90). HEX è semplicemente un modo più compatto di scrivere valori RGB.

Quando usare HEX

• CSS e sviluppo web: HEX è la notazione colore predefinita nel CSS. Tutti i browser la comprendono. color: #E8635A; è il modo più comune di specificare un colore sul web.
• Strumenti di design: Figma, Sketch, Adobe XD e Canva usano HEX come input principale. Quando un designer dice «il blu è #3B82F6», tutti capiscono di cosa si tratta.
• Linee guida di marca: le brand guide digitali includono quasi sempre valori HEX perché sono brevi, inequivocabili e facili da copiare e incollare.
• Comunicazione rapida: «usa #333» è più veloce di «usa rgb(51, 51, 51)» in un messaggio su Slack.

Quando NON usare HEX

• Quando serve la trasparenza: l'HEX standard a 6 cifre non supporta il canale alfa né l'opacità. Serve l'HEX a 8 cifre (#E8635A80), meno leggibile, oppure occorre passare a RGBA.
• Quando devi modificare i colori via codice: «rendilo più chiaro del 20%» è quasi impossibile da calcolare a mente in HEX. HSL è molto più adatto.
• Produzione per la stampa: le tipografie non usano HEX. Mai.

Esempio reale

Stai scrivendo il CSS di una landing page. Il designer ti consegna una style guide con i colori del brand. Scrivi:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

Qui HEX è perfetto: compatto, leggibile e supportato ovunque.

RGB: il modello colore degli schermi

Che cos'è

RGB sta per Red, Green, Blue (rosso, verde, blu): i tre colori di luce che gli schermi mescolano per produrre ogni colore che vedi. Ogni canale va da 0 a 255. rgb(232, 99, 90) significa 232 unità di rosso, 99 di verde e 90 di blu.

RGB è la base di tutto il colore digitale. HEX è solo RGB in un'altra notazione. HSL è una trasformazione di RGB pensata per le persone. Tutto ciò che sta sul tuo schermo diventa alla fine valori RGB inviati ai pixel.

Quando usare RGB

• Quando serve la trasparenza: RGBA aggiunge un canale alfa: rgba(232, 99, 90, 0.5) per il 50% di opacità. È più pulito dell'HEX a 8 cifre ed è ampiamente supportato in CSS, negli strumenti di design e nella programmazione.
• Programmazione e sviluppo di app: Swift, Kotlin, Flutter, React Native; i framework per app lavorano internamente con valori RGB/RGBA.
• LED e illuminazione: le luci smart (Philips Hue, strisce LED) usano valori RGB. Se progetti installazioni luminose fisiche, RGB è il formato nativo.
• Matematica del colore: mescolare colori, interpolare gradienti o generare colore via codice è immediato in RGB.

Quando NON usare RGB

• Stampa: gli schermi emettono luce (sintesi additiva), la carta la riflette (sintesi sottrattiva). RGB non può rappresentare fedelmente ciò che uscirà da una stampante.
• Regolare luminosità o saturazione: «rendi questo colore meno saturo del 30%» non è intuitivo in RGB. Dovresti prima convertirlo in HSL.

Esempio reale

Stai realizzando un'app in React Native e ti serve un overlay semitrasparente:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB con alfa è la scelta naturale: diretta, leggibile e nativa per il motore di rendering.

HSL: il formato dei designer

Che cos'è

HSL sta per Hue, Saturation, Lightness (tonalità, saturazione, luminosità):

• Tonalità (0°–360°): il colore in sé, come posizione sulla ruota cromatica. 0° è rosso, 120° è verde, 240° è blu.
• Saturazione (0%–100%): quanto è vivido il colore. 0% è grigio, 100% è la forma più pura della tonalità.
• Luminosità (0%–100%): quanto è chiaro o scuro. 0% è nero, 100% è bianco, 50% è il colore «vero».

hsl(4, 75%, 63%) significa: una tonalità rossastra (4°), molto vivida (75% di saturazione) e leggermente chiara (63%).

Quando usare HSL

• Design system e temi: HSL è il formato migliore per creare scale cromatiche coerenti. Vuoi 10 sfumature del tuo colore principale? Mantieni la tonalità e fai variare la luminosità dal 10% al 95%. Vuoi una versione smorzata? Abbassa la saturazione. In HEX o RGB è quasi impossibile farlo in modo intuitivo.
• Modalità scura / modalità chiara: cambiare tema significa regolare luminosità e saturazione, cioè proprio i parametri di HSL. Tailwind CSS, Radix Colors e molti design system moderni sono costruiti su HSL.
• Generazione di colore via codice: creare stati hover, stati disabilitati, sfondi e bordi partendo da un unico colore base è banale in HSL: hsl(4, 75%, 73%) per una variante più chiara, hsl(4, 75%, 43%) per una più scura.
• Accessibilità: le verifiche sul rapporto di contrasto diventano più intuitive quando puoi vedere e regolare direttamente la luminosità.

Quando NON usare HSL

• Comunicazione tra team: la maggior parte delle persone non ragiona in gradi e percentuali. Dire «il pulsante è hsl(4, 75%, 63%)» è meno chiaro di «il pulsante è #E8635A» in una consegna di design.
• Stampa: come RGB, anche HSL è un modello colore da schermo.

Esempio reale

Stai costruendo un design system in Tailwind CSS e ti serve una scala cromatica coerente:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Stessa tonalità, stessa saturazione, luminosità diversa. Una scala perfetta in 30 secondi. Prova a farlo in HEX.

CMYK: il formato della stampa

Che cos'è

CMYK sta per Cyan, Magenta, Yellow, Key (ciano, magenta, giallo e nero). Descrive il colore come una miscela di inchiostro applicata su carta bianca. Ogni valore va dallo 0% al 100%: 0, 57, 61, 9 significa 0% di ciano, 57% di magenta, 61% di giallo e 9% di nero.

A differenza di RGB (che somma luce per creare i colori), CMYK sottrae luce alla carta bianca. Più inchiostro = colore più scuro. Per questo si parla di modello colore sottrattivo.

Quando usare CMYK

• Design per la stampa: biglietti da visita, brochure, packaging, manifesti, riviste. Qualsiasi file inviato a una tipografia commerciale dovrebbe essere in modalità colore CMYK.
• Preparare file per la stampa in InDesign o Illustrator: questi programmi permettono di lavorare in modalità CMYK per vedere in anteprima come appariranno i colori su carta (sempre meno vivaci che a schermo).
• Prova colore: verificare se i colori del tuo progetto sono riproducibili in CMYK. Alcuni colori RGB molto accesi (soprattutto verdi fluo e blu elettrici) sono fisicamente impossibili da stampare in CMYK: cadono «fuori gamut».

Quando NON usare CMYK

• Tutto ciò che sta su uno schermo: siti web, app, social media, presentazioni, email. Gli schermi usano RGB. Specificare CMYK per un sito è come dare indicazioni stradali in miglia nautiche: tecnicamente è una distanza, ma inutile per il tragitto.
• Editing fotografico: lavora in RGB e converti in CMYK solo alla fase finale di esportazione per la stampa.

Esempio reale

Hai progettato un manifesto in Illustrator. Prima di inviarlo in tipografia converti il documento in modalità colore CMYK (File → Document Color Mode → CMYK Color), controlli gli avvisi di fuori gamut e correggi i blu elettrici virati in un verde-azzurro spento. Il PDF finale viene salvato in CMYK con il profilo ICC della tipografia.

La tabella di riferimento rapido

Il promemoria: quale formato per quale lavoro

Si possono convertire tra loro?

Sì, con qualche riserva.

• HEX ↔ RGB: senza perdite, sono gli stessi dati in una notazione diversa.
• RGB ↔ HSL: senza perdite, è una trasformazione matematica.
• RGB → CMYK: con perdite. Alcuni colori RGB (blu accesi, fluo, verdi brillanti) non possono essere riprodotti in CMYK. La conversione li sposta sull'equivalente stampabile più vicino, che spesso appare più spento.
• CMYK → RGB: tecnicamente possibile, ma il risultato dipende dal profilo ICC usato. Due convertitori possono restituire valori RGB leggermente diversi per lo stesso input CMYK.

Per conversioni rapide sul campo, un selettore di colori sul telefono che mostri tutti e quattro i formati insieme è il flusso di lavoro più veloce. Color Picker Camera: HEX RGB fa esattamente questo: punta la fotocamera su un colore qualsiasi e vedi HEX, RGB, HSL e CMYK affiancati. Un tocco copia qualsiasi valore. Disponibile su iPhone e Android.

Errori comuni

1. Progettare per la stampa in RGB

È il classico errore da principianti. Realizzi un manifesto vivace in Photoshop in modalità RGB, lo mandi in tipografia e il risultato appare slavato, soprattutto nei verdi e nei blu. Converti sempre in CMYK prima di esportare per la stampa e controlla gli avvisi di gamut.

2. Usare HEX quando serve la trasparenza

Se il tuo progetto prevede overlay semitrasparenti, ombre o effetti glassmorphism, passa a RGBA o HSLA. L'HEX standard a 6 cifre non contiene informazioni sull'opacità e quello a 8 cifre si usa raramente perché è difficile da leggere.

3. Costruire un design system in HEX

«#3B82F6 ma più chiaro del 20%» richiede conversione, calcolo e riconversione. In HSL: aumenta la luminosità del 20%. I design token, i generatori di temi e le moderne custom property CSS funzionano molto meglio in HSL.

4. Convertire il CMYK in HEX per il web aspettandosi lo stesso colore

Un brand definito in CMYK per la stampa apparirà diverso se convertito ingenuamente in HEX per il web. L'approccio corretto: far corrispondere visivamente il colore a schermo con la versione stampata e poi definire valori HEX distinti per l'uso digitale. Le linee guida di marca dovrebbero contenerli entrambi.

Domande frequenti

Qual è la differenza tra HEX e RGB?

Nessuna sul colore, solo sulla notazione. HEX scrive gli stessi valori di rosso, verde e blu in base 16. #FF0000 è identico a rgb(255, 0, 0). HEX è più breve da digitare; RGB è più facile da modificare via codice e supporta un canale alfa (RGBA).

Quando dovrei usare CMYK al posto di RGB?

Ogni volta che il risultato finale viene stampato su un materiale fisico: carta, cartone, tessuto, plastica. Se resta su uno schermo, usa RGB (o HEX/HSL). Se viene stampato, passa a CMYK in fase di esportazione.

HSL è meglio di HEX?

Per design system, temi e manipolazione del colore, sì. Per comunicare in fretta e incollare valori negli strumenti, HEX è più pratico. Descrivono gli stessi colori; HSL organizza semplicemente le informazioni nel modo in cui le persone pensano al colore (tonalità → vivacità → luminosità).

Il mio telefono può mostrare tutti e quattro i formati insieme?

Sì. Color Picker Camera: HEX RGB cattura un colore dalla fotocamera o da una foto e mostra HEX, RGB, HSL e CMYK contemporaneamente. Tocca un valore per copiarlo. Funziona come un calcolatore di formati colore del mondo reale: una cattura, quattro formati.

In conclusione

HEX per il web e la comunicazione rapida. RGB per lo sviluppo di app e la trasparenza. HSL per i design system e la manipolazione del colore. CMYK per la stampa.

Non devi sceglierne uno: devi usare quello giusto per ogni contesto. E quando ti serve convertirli o catturare un colore del mondo reale in tutti e quattro i formati insieme, un selettore di colori sul telefono è lo strumento più veloce a disposizione.

Scarica Color Picker Camera per iPhone | Scaricala per Android

Scarica PDF

Altri formati: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Licenza: CC BY 4.0