Codici colore HEX, RGB e HSL spiegati

Se ti è mai capitato di aprire un file di progettazione, copiare #3B82F6 e chiederti perché lo stesso blu compare anche come rgb(59, 130, 246) e hsl(217, 91%, 60%), ti sei imbattuto nei tre formati di colore in cui ogni web designer e sviluppatore front-end prima o poi deve diventare fluente. Descrivono tutti esattamente lo stesso pixel. Lo descrivono solo in lingue diverse, e ciascuna lingua è brava in un lavoro diverso.

Ho realizzato design system in cui scegliere il formato sbagliato è costato ore. Consegna a uno sviluppatore un muro di codici esadecimali per lo stato hover di un pulsante e ottieni un tiro a indovinare. Consegnagli una scala HSL e la relazione tra i colori è ovvia. Quindi questa è meno una sterile carrellata di specifiche e più il modello mentale operativo che avrei voluto qualcuno mi desse all'inizio: cosa codifica davvero ciascun formato e quando usarlo.

HEX: il formato che copi, non quello in cui ragioni

Un codice colore esadecimale non è altro che l'RGB con un altro vestito. #RRGGBB sono sei cifre esadecimali divise in tre coppie — rosso, verde, blu — e ogni coppia è un byte. L'esadecimale (base 16) va da 0 a 9 e poi da A a F, quindi due cifre esadecimali coprono da 00 a FF, cioè da 0 a 255 in decimale. È esattamente un canale a 8 bit per colore. Tre canali, tre byte, e i familiari 16.777.216 colori possibili (256 × 256 × 256).

È proprio per questo che le cifre sono sei: un byte ciascuno per R, G e B. Prendi #3B82F6. Dividilo: 3B, 82, F6. Converti ogni coppia da esadecimale a decimale — 3B è 59, 82 è 130, F6 è 246 — e hai appena fatto una conversione manuale da hex a RGB. È rgb(59, 130, 246). Stesso colore, nessuna magia.

Esiste una forma abbreviata: #RGB si espande raddoppiando ogni cifra, così #F00 diventa #FF0000 (rosso puro) e #0AF diventa #00AAFF. Funziona solo quando ogni canale risulta essere una cifra ripetuta, ed è per questo che la vedi soprattutto per valori tondi come #FFF, #000 o #333. Comoda nel CSS scritto a mano, inutile per i blu arbitrari che un brand effettivamente pubblica.

L'esadecimale gestisce anche la trasparenza, cosa che sorprende molti. Il CSS Color Module Level 4 ha aggiunto l'esadecimale a otto cifre, #RRGGBBAA, dove l'ultima coppia è l'alpha: 00 completamente trasparente, FF completamente opaco. Così #3B82F680 è quello stesso blu a circa il 50% di opacità. Esiste anche una forma abbreviata a quattro cifre (#RGBA), dove valgono le stesse regole in stile #3B8 e ogni cifra si raddoppia. È supportato in tutti i principali browser attuali; solo il vecchissimo Internet Explorer ne è privo, nel qual caso rgba() è il fallback.

Il punto di forza dell'esadecimale è che è compatto e non ambiguo — un solo token, facile da copiare, facile da incollare in uno strumento di design o in una variabile CSS. Il suo punto debole è che non dice quasi nulla al tuo cervello. #3B82F6 è più chiaro o più scuro di #2563EB? Davvero non riesci a dirlo leggendoli. È lì che l'esadecimale precipita.

RGB: come ragiona davvero lo schermo

L'RGB è il modello di colore additivo su cui gira il tuo monitor. Ogni pixel è composto da tre minuscole luci — rossa, verde, blu — e i valori indicano quanto è accesa ciascuna luce, da 0 a 255. Tutte e tre a 0 dà il nero (ogni luce spenta). Tutte e tre a 255 dà il bianco (ogni luce a tutta potenza). Spingi rosso e verde, lascia spento il blu, e ottieni il giallo, cosa che suona controintuitiva se sei cresciuto miscelando colori a tempera, dove rosso e verde fanno fango. Gli schermi aggiungono luce; la tempera la sottrae. È l'idea centrale del colore additivo, e vale la pena tenerla a mente perché spiega molti di quei momenti "perché questo colore si comporta così".

In CSS scrivi rgb(59 130 246) (sintassi moderna separata da spazi) o rgb(59, 130, 246) (con le virgole, legacy); vanno bene entrambe. Aggiungi l'alpha con una barra — rgb(59 130 246 / 50%) — che ha silenziosamente rimpiazzato la vecchia funzione separata rgba(), anche se rgba() funziona ancora ovunque.

L'RGB è più leggibile dell'esadecimale perché i numeri sono in decimale e i canali sono espliciti. Se vedi rgb(250, 250, 250) capisci subito che è un quasi-bianco, perché tutti e tre sono fissati in alto. Ma condivide il vero difetto dell'esadecimale: è pessimo per regolare un colore. Per rendere rgb(59, 130, 246) più scuro del 10% non basta ritoccare un numero — devi muovere tutti e tre i canali in sintonia, e azzeccare le proporzioni a mano è un'impresa votata al fallimento. Il che ci porta al formato che risolve davvero la questione.

HSL: quello in cui dovresti ragionare

HSL — tonalità (hue), saturazione (saturation), luminosità (lightness) — è il formato in cui faccio quasi tutti i miei ragionamenti, ed è quello che il generatore di palette mostra per ogni colore che produce, accanto all'RGB. Invece di descrivere un colore in base a quanta luce mescolare da tre fonti, lo descrive come farebbe un essere umano.

• La tonalità è un angolo sulla ruota dei colori, da 0 a 360 gradi. 0 (e 360) è il rosso, 120 è il verde, 240 è il blu. Ruota l'angolo e percorri l'arcobaleno.
• La saturazione è quanto è vivido il colore, da 0% a 100%. A 0% ottieni grigio a prescindere dalla tonalità; a 100% è intenso quanto lo schermo consente.
• La luminosità è quanto è chiaro o scuro, da 0% a 100%. 0% è sempre nero, 100% è sempre bianco e 50% è la versione "pura" della tonalità.

Il nostro blu è hsl(217, 91%, 60%). Ora guarda cosa rende banale l'HSL. Vuoi una sfumatura più scura per lo stato di pulsante premuto? Abbassa la luminosità: hsl(217, 91%, 45%). Una tinta più chiara per uno sfondo in hover? Alzala: hsl(217, 91%, 92%). Una versione smorzata e più polverosa per un controllo disabilitato? Abbassa la saturazione: hsl(217, 40%, 60%). La tonalità non si è mai mossa, quindi si legge inequivocabilmente come la stessa famiglia di blu per tutto il tempo. Prova a fare una qualsiasi di queste cose modificando i canali RGB e capirai perché esiste l'HSL.

È anche per questo che l'HSL è il linguaggio naturale per costruire scale, tinte e sfumature. Blocca la tonalità, fai marciare la luminosità per gradini — 95%, 85%, 70%, 55%, 40%, 25% — e ottieni una rampa coerente da una pallida tinta di sfondo a un profondo colore per il testo, tutte dimostrabilmente in relazione. È la spina dorsale di come costruisco i token di colore scalabili per un design system, ed è la meccanica dietro tinte, sfumature e toni. L'HSL rende l'armonia cromatica addirittura aritmetica: un colore complementare è semplicemente la tua tonalità più 180 gradi, una triade sono tre tonalità a 120 gradi di distanza l'una dall'altra. Se ne vuoi la versione più approfondita, capire l'armonia dei colori nell'UI design la analizza nel dettaglio.

La sintassi CSS rispecchia il resto: hsl(217 91% 60%) oppure la forma legacy hsl(217, 91%, 60%), con l'alpha tramite hsl(217 91% 60% / 50%). La tonalità può portare un'unità deg ma non ne ha bisogno. Una doverosa precisazione: la luminosità dell'HSL non è la stessa cosa della luminosità percepita. Un giallo completamente saturo al 50% di luminosità appare al tuo occhio molto più brillante di un blu all'identico 50%. È un limite del modello, non un difetto dei tuoi occhi, ed è esattamente il motivo per cui esiste un contrast checker invece di fidarsi del valore L — ne parliamo più avanti.

Quindi quale usi davvero?

In pratica li usi tutti e tre, per motivi diversi, e il trucco sta nell'abbinare il formato al momento.

• HEX per memorizzare e condividere un singolo colore — linee guida del brand, una variabile CSS, l'invio di un valore a un collega. È la lingua franca; tutto la legge.
• RGB quando lavori canale per canale o ti interfacci con codice che si aspetta canali numerici — canvas, elaborazione di immagini, o ogni volta che ti servono i valori grezzi da 0 a 255. Anche quando vuoi un alpha semplice e preferiresti non pensare in coppie esadecimali.
• HSL nel momento esatto in cui devi modificare o mettere in relazione i colori: costruire stati hover e active, generare una scala di tinte, trovare un accento armonioso o mettere a punto una palette per la dark mode dove sposti di continuo la luminosità e riduci la saturazione perché i colori non vibrino su uno sfondo scuro.

Il mio flusso di lavoro reale: ragiono ed esploro in HSL, poi consegno i valori finali come variabili esadecimali. Scelgo la tonalità, trovo la rampa di luminosità, verifico la vividezza con la saturazione — poi congelo ogni passo come token esadecimale che il resto del team utilizza.

Una cosa da cui nessun formato ti salva è il contrasto. Né HEX, né RGB, né HSL ti dicono se un testo sarà leggibile su uno sfondo; per questo serve un vero calcolo della luminanza rispetto ai rapporti WCAG. La guida ufficiale del W3C sul contrasto richiede almeno 4.5:1 per il testo di corpo normale. È per questo che il generatore affianca ai suoi valori HSL e RGB un contrast checker integrato — così puoi regolare lo slider della luminosità e guardare il rapporto aggiornarsi in tempo reale, invece di pubblicare un bel blu che nessuno riesce a leggere.

Una volta che questi tre formati smettono di sembrare stringhe criptiche e iniziano a sembrare tre viste di un unico colore — un token copiabile, le luci grezze dello schermo e un set di manopole a misura d'uomo — smetti di combattere i tuoi colori e inizi a guidarli. Apri il generatore di palette, genera qualcosa e osserva come si muovono i numeri HSL mentre regoli un campione. Quel feedback in tempo reale è il modo più rapido perché tutto questo faccia clic.