In breve: HEX, RGB e HSL descrivono tutti gli stessi colori, ma in modi diversi. HEX e RGB sono due notazioni per gli stessi valori di rosso-verde-blu; l'HSL li riesprime come tonalità, saturazione e luminosità, molto più facili da regolare a mano. Sapere quale formato usare fa risparmiare molte congetture quando abbini o ritocchi i colori.
Un colore sul web è in definitiva tre canali — rosso, verde e blu — ma il modo in cui scrivi quei canali cambia quanto è facile ragionarci.
HEX e RGB: la stessa cosa, scritta due volte
RGB elenca i tre canali direttamente: rgb(37, 99, 235). HEX impacchetta i valori identici in una stringa esadecimale: #2563EB, dove 25, 63 ed EB sono i byte di rosso, verde e blu. Sono intercambiabili — HEX è compatto e comune negli strumenti di design, RGB è comodo nel codice perché puoi calcolare ogni canale. Nessuno è più «preciso»; sono due grafie di uno stesso colore.
HSL: il formato pensato per i ritocchi
HSL descrive un colore come tonalità (la sua posizione sulla ruota dei colori, 0–360°), saturazione (quanto è vivido, 0–100%) e luminosità (quanto è chiaro, 0–100%). È il formato da usare quando vuoi regolare anziché sostituire un colore: abbassa la luminosità per uno stato hover, riduci la saturazione per una variante attenuata, o sposta la tonalità per trovare un colore complementare. Fare le stesse modifiche in HEX significa indovinare i valori dei byte.
Alfa e HEX a 8 cifre
La trasparenza si esprime con un canale alfa: rgba() e hsla() aggiungono un quarto valore da 0 (trasparente) a 1 (opaco). Il CSS moderno supporta anche l'HEX a 8 cifre, dove gli ultimi due caratteri codificano l'alfa — #2563EB80 è lo stesso blu a circa il 50% di opacità.
Il CMYK è un altro mondo
HEX, RGB e HSL sono tutti modelli di colore per schermo (luce additiva). Il CMYK è per la stampa (inchiostro sottrattivo). Una conversione tra loro è sempre approssimata perché i due non possono riprodurre esattamente la stessa gamma di colori, quindi tratta una conversione schermo-stampa come un punto di partenza da verificare, non come una corrispondenza esatta.
Un flusso pratico
- Incolla il colore di partenza — in qualsiasi formato — nel Convertitore di Colori per vedere tutti i formati insieme.
- Passa all'HSL per costruire varianti: regola la luminosità per gli stati, la saturazione per i toni attenuati.
- Aggiungi l'alfa con
rgba()/hsla()o l'HEX a 8 cifre dove serve trasparenza. - Usa l'anteprima del gradiente per generare uno snippet CSS pronto per due o più colori.
Se stai lavorando in blocco a una palette, converti più colori insieme (separati da virgole o a capo) e tieni i risultati accanto alle note con il Contatore di Caratteri.
Errori comuni da evitare
- Modificare i colori in HEX quando l'HSL renderebbe ovvia la regolazione.
- Aspettarsi che una conversione CMYK corrisponda esattamente allo schermo.
- Dimenticare il canale alfa e ottenere un colore opaco dove volevi trasparenza.
- Mischiare i formati in modo incoerente in un foglio di stile.