HEX vs RGB vs HSL vs CMYK: Quale formato colore usare e quando

Stesso colore, quattro linguaggi diversi

Guarda questo corallo. È esattamente lo stesso colore, ma può essere scritto in quattro modi diversi:

Ogni formato ha il suo scopo. Scegliere quello sbagliato non romperà il tuo progetto, ma scegliere quello giusto ti farà risparmiare tempo, eviterà errori di conversione e manterrà la coerenza del tuo brand su tutte le piattaforme.

Questa guida spiega esattamente quando usare ciascuno, con esempi reali e riferimenti rapidi.

HEX: Lo standard del web

Cos'è: Un codice esadecimale a 6 cifre che rappresenta i valori rosso, verde e blu. Inizia sempre con #. Esempio: #FF6F61 significa 255 di rosso, 111 di verde, 97 di blu.

Quando usare HEX

• Fogli di stile CSS — È il formato predefinito che la maggior parte degli sviluppatori web usa e si aspetta.
• Strumenti di design — Figma, Sketch e Canva mostrano HEX in evidenza nei loro selettori colore.
• Linee guida del brand — La maggior parte delle linee guida elenca i colori in HEX perché è corto e facile da copiare e incollare.
• Comunicazione — Quando devi condividere un colore esatto su Slack o via email, HEX è universalmente compreso.

Quando NON usare HEX

• Quando serve trasparenza — HEX non supporta l'alfa nativamente. Puoi usare HEX a 8 cifre (#FF6F6180), ma il supporto è inconsistente tra gli strumenti.
• Manipolazione programmatica dei colori — Schiarire o scurire un colore HEX richiede prima una conversione.
• Design per la stampa — La stampa usa CMYK. Inviare HEX a una tipografia garantisce una discrepanza di colore.

Esempio reale: Variabili CSS

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: Il modello colore per schermi

Cos'è: Tre numeri (0–255) che rappresentano rosso, verde e blu, i colori reali di luce emessi dal tuo schermo. Esempio: rgb(255, 111, 97).

Quando usare RGB

• Trasparenza (RGBA) — rgba(255, 111, 97, 0.5) offre un controllo esatto dell'opacità. È il metodo più supportato per colori semi-trasparenti in CSS.
• Sviluppo app — Swift, Kotlin e Flutter usano valori RGB internamente. Lavorare in RGB evita conversioni inutili.
• Illuminazione LED e IoT — Le strisce LED e le lampadine smart si aspettano valori RGB.
• Matematica dei colori — Mescolare due colori o interpolare tra di essi è semplice aritmetica in RGB.

Quando NON usare RGB

• Design per la stampa — I valori RGB non corrispondono direttamente alla miscelazione degli inchiostri. Converti sempre in CMYK prima di inviare in tipografia.
• Regolare saturazione o luminosità — Cambiare la saturazione in RGB richiede formule complesse. HSL è molto più facile per questo.

Esempio reale: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: Il formato del designer

Cos'è: Tre valori — Tonalità (0–360°, posizione sulla ruota dei colori), Saturazione (0–100%%, da grigio a vibrante) e Luminosità (0–100%%, da nero a bianco). Esempio: hsl(5, 100%%, 69%%).

Quando usare HSL

• Design system — Crea una scala colore completa mantenendo tonalità e saturazione fisse e cambiando solo la luminosità.
• Modalità scura — Generare varianti scure è semplice come ridurre la luminosità. Niente congetture, niente formule.
• Generazione programmatica di colori — Servono 12 colori distinti equidistanti? Incrementa la tonalità di 30° mantenendo saturazione e luminosità uguali.
• Accessibilità — Verificare il contrasto è più intuitivo quando puoi leggere il valore di luminosità direttamente.

Quando NON usare HSL

• Comunicazione tra team — La maggior parte delle persone non pensa in tonalità/saturazione/luminosità. HEX o RGB sono spesso più chiari nelle conversazioni.
• Flussi di lavoro di stampa — HSL non ha un equivalente diretto nella stampa. Converti prima in CMYK.

Esempio reale: Scala colori con Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK: Il formato di stampa

Cos'è: Quattro valori — Ciano, Magenta, Giallo e Nero (Key). A differenza di RGB (che aggiunge luce), CMYK è sottrattivo — descrive quanta inchiostro assorbe la luce dalla carta bianca. Esempio: 0, 56, 62, 0.

Quando usare CMYK

• Tutto ciò che viene stampato — Biglietti da visita, poster, packaging, riviste. Se passa per una tipografia, deve essere CMYK.
• InDesign e flussi di stampa — Progetta in CMYK dall'inizio per evitare sorprese con colori fuori gamma.
• Prove colore — Le prove a schermo simulano l'output della stampante, il che funziona solo quando i colori sorgente sono già in CMYK.

Quando NON usare CMYK

• Schermi — I monitor usano luce (RGB). I valori CMYK devono essere convertiti, e la conversione è sempre un'approssimazione.
• Editing fotografico — Lavora in RGB durante l'editing. Converti in CMYK solo come ultimo passaggio se verrà stampato.

Esempio reale: Esportare da Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

Tabella di riferimento rapido

Cheat sheet: Tipo di progetto → Formato colore

Conversioni: Quello che devi sapere

• HEX ↔ RGB — Conversione senza perdita. Sono rappresentazioni diverse dello stesso modello. #FF6F61 è esattamente rgb(255, 111, 97).
• RGB ↔ HSL — Conversione senza perdita. Sono espressioni matematiche diverse dello stesso insieme di colori.
• RGB → CMYK — Conversione con perdita. La gamma CMYK è minore di quella RGB. I colori vibranti dello schermo spesso risultano spenti in stampa.
• CMYK → RGB — Il risultato dipende dal profilo ICC utilizzato. Lo stesso valore CMYK può apparire diverso con profili diversi.

L'app Color Picker Camera mostra tutti e quattro i formati simultaneamente — punta verso qualsiasi colore nel mondo reale e ottieni HEX, RGB, HSL e CMYK istantaneamente. Senza conversione manuale.

Errori comuni (e come evitarli)

1. Inviare RGB alla tipografia

Le stampanti mescolano inchiostri, non luce. Se invii un file RGB, il software della tipografia indovinerà la conversione CMYK e i risultati raramente corrispondono a ciò che vedi sullo schermo. Progetta sempre per la stampa in CMYK dall'inizio.

2. Usare HEX per la trasparenza

L'HEX a 8 cifre (#FF6F6180) esiste, ma molti strumenti non lo riconoscono. Usa rgba() o hsla() per una trasparenza affidabile.

3. Costruire un design system solo con HEX

Generare toni chiari e scuri da un codice HEX richiede tentativi ed errori. HSL permette di cambiare la luminosità direttamente, rendendo le scale colore prevedibili e coerenti.

4. Convertire CMYK → HEX e aspettarsi lo stesso colore

CMYK ha una gamma più piccola di RGB/HEX. Quando riconverti, il colore viene approssimato e può apparire spento o leggermente alterato. Verifica sempre visivamente.

Domande frequenti

Qual è la differenza tra HEX e RGB?

Nessuna in termini di colori disponibili. Entrambi coprono gli stessi 16,7 milioni di colori. HEX è semplicemente un modo più breve di scrivere valori RGB in notazione esadecimale. #FF6F61 = rgb(255, 111, 97). L'unica differenza pratica è la trasparenza: RGB ha RGBA integrato, mentre HEX a 8 cifre ha supporto limitato.

Quando dovrei usare CMYK?

Ogni volta che il tuo design verrà stampato fisicamente: biglietti da visita, brochure, poster, packaging. Se sarà visualizzato solo su schermo, resta con HEX, RGB o HSL.

HSL è meglio di RGB?

Non è meglio, è più facile da ragionare per i designer. Se devi creare uno schema colori, generare temi in modalità scura o verificare il contrasto di accessibilità, HSL è più intuitivo. Per lo sviluppo app dove i framework si aspettano valori RGB, usa RGB.

Esiste un'app che mostra tutti e 4 i formati colore contemporaneamente?

Sì. Color Picker Camera ti permette di puntare il telefono verso qualsiasi colore del mondo reale e vedere istantaneamente HEX, RGB, HSL e CMYK su un unico schermo. Disponibile per iOS e Android.

In conclusione

Usa HEX per il web. Usa RGB per app e schermi. Usa HSL per design system e temi. Usa CMYK per la stampa.

Se lavori con colori del mondo reale — una parete dipinta, un campione di tessuto, un logo su un'insegna — Color Picker Camera funziona come la tua calcolatrice di colori. Punta, cattura e ottieni tutti e quattro i formati istantaneamente.

Scarica per iOS Scarica per Android