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.

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 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.

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 sta per Hue, Saturation, Lightness (tonalità, saturazione, luminosità):

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

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 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.

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.

È 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.

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.

«#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.

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.

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).

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.

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à).

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.