RGB, HEX o HSL: quale notazione scegliere?

Sul Web la stessa colore può essere scritta in modi diversi. Un blu può apparire come #2563eb, rgb(37 99 235) o hsl(221 83% 53%). Il risultato visivo può essere identico, ma le notazioni rappresentano la colore in modi differenti.

HEX, RGB e HSL non sono tre livelli di qualità: sono modi diversi di esprimere o manipolare una colore.

Differenza in una frase

• RGB descrive la colore tramite componenti rosso, verde e blu;
• HEX codifica normalmente le stesse componenti RGB in forma esadecimale compatta;
• HSL descrive hue, saturazione e lightness.

Il convertitore di colori permette di passare da una notazione all’altra.

RGB

Gli schermi producono colori combinando luce rossa, verde e blu. È un sistema additivo: valori bassi portano verso il nero, valori alti verso il bianco.

Nella rappresentazione comune a 8 bit per canale, ogni componente va da 0 a 255:

rgb(255 0 0)   /* rosso */
rgb(0 0 0)     /* nero */
rgb(255 255 255) /* bianco */

Con tre canali da 256 valori si ottengono 16.777.216 combinazioni possibili.

Perché da 0 a 255?

8 bit permettono 2⁸ = 256 valori. Poiché si parte da zero, l’intervallo è 0–255.

Questa struttura spiega anche la notazione HEX.

HEX

L’esadecimale usa 16 simboli, da 0 a F. Una coppia va da 00 a FF, cioè da 0 a 255.

Una colore è spesso scritta come:

#RRGGBB

#FF0000 equivale quindi a rgb(255 0 0). #2563EB equivale a rgb(37 99 235).

HEX non è un altro spazio colore: è soprattutto un modo compatto di scrivere valori RGB.

Notazione abbreviata

Quando ogni coppia contiene due caratteri identici, alcune colorazioni possono essere abbreviate:

#ffffff → #fff
#336699 → #369

L’abbreviazione rappresenta esattamente la stessa colore.

Alpha e trasparenza

CSS permette di associare un valore alpha. In RGB moderno:

rgb(37 99 235 / 50%)

indica lo stesso colore con opacità al 50%. HEX può anche usare una componente alpha in notazioni a otto cifre.

L’alpha non cambia le coordinate cromatiche sottostanti; cambia quanto il colore viene composto con lo sfondo.

HSL

HSL separa tre concetti:

• Hue: posizione sulla ruota cromatica, normalmente in gradi;
• Saturation: intensità cromatica;
• Lightness: posizione tra nero e bianco nel modello HSL.

Per esempio:

hsl(221 83% 53%)

può rappresentare lo stesso blu di #2563eb.

Perché HSL è pratico?

Quando si costruiscono varianti di una stessa tinta, modificare numericamente hue, saturation o lightness può essere più intuitivo che cambiare tre canali RGB.

Per un sistema di design, può essere comodo partire da una tinta e creare versioni più chiare o scure.

Ma lightness non è luminanza WCAG

Un punto fondamentale: L=50% in HSL non significa che due colori abbiano la stessa luminosità percepita o lo stesso contrasto.

Giallo e blu con la stessa lightness HSL possono avere luminanze relative molto diverse. Per il contrasto accessibile, usa quindi il verificatore di contrasto, non la sola HSL.

Quale notazione scegliere?

Usa quella che rende il codice più leggibile e il sistema più facile da mantenere.

HEX è compatto e molto diffuso. RGB è diretto quando si ragiona sui canali o sull’alpha. HSL è utile per modifiche intuitive e palette.

Nei sistemi moderni esistono anche altri spazi e notazioni, come Lab, LCH e OKLCH, che rispondono a esigenze di percezione e gamut più avanzate.

Da ricordare

RGB, HEX e HSL possono descrivere la stessa colore sRGB. Cambiare notazione non migliora la qualità del colore: cambia soltanto il modo in cui lo esprimi o lo manipoli. Per accessibilità e percezione, usa strumenti e modelli adatti al problema specifico.