Formati di colore spiegati: HEX, RGB e HSL

Sul web, lo stesso colore si può scrivere in più modi — #3498db, rgb(52, 152, 219) e hsl(204, 70%, 53%) sono esattamente lo stesso blu. Sapere cosa significa ogni formato (e quando ricorrere a quale) rende scegliere, ritoccare e abbinare i colori molto più facile. Questa guida analizza HEX, RGB e HSL, e come si relazionano.

Tutto inizia con rosso, verde e blu

Gli schermi creano il colore mescolando tre luci colorate: rosso, verde e blu. Ogni colore che vedi è una qualche combinazione di questi tre canali, ciascuno impostato su un'intensità da 0 (spento) a 255 (pieno). Il nero totale è 0, 0, 0; il bianco totale è 255, 255, 255. HEX e RGB sono solo due notazioni per questi stessi tre numeri.

RGB

RGB indica direttamente i tre valori di canale:

rgb(52, 152, 219)
     R    G    B

È il più leggibile dei tre perché i numeri corrispondono direttamente a «quanto rosso, verde, blu». Ottimo quando vuoi ragionare sui canali stessi.

HEX

HEX codifica quegli stessi valori di canale 0–255 in esadecimale (base 16), come un # seguito da tre coppie:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Ogni coppia va da 00 (0) a ff (255). HEX è compatto ed è il predefinito nella maggior parte degli strumenti di design e in CSS, ecco perché è il formato che copierai e incollerai di più. Esiste anche una forma abbreviata: #39f si espande in #3399ff raddoppiando ogni cifra.

HSL

HSL descrive il colore nel modo in cui le persone ci pensano intuitivamente, con tre assi diversi:

• Tonalità (Hue) (0–360°) — il colore stesso su una ruota: 0° rosso, 120° verde, 240° blu.
• Saturazione (Saturation) (0–100%) — quanto è vivido, dal grigio al colore pieno.
• Luminosità (Lightness) (0–100%) — quanto è chiaro, dal nero al bianco passando per il colore.

hsl(204, 70%, 53%)
    hue  sat  light

Il superpotere di HSL è regolare il colore. Vuoi una versione più scura di un colore? Abbassa la luminosità e lascia stare tonalità e saturazione. Vuoi un set di sfumature coordinate? Tieni fissa la tonalità e varia la luminosità. Farlo in HEX o RGB significa ricalcolare tutti e tre i canali; in HSL è un solo numero.

Alpha: aggiungere trasparenza

Ogni formato ha una variante con un canale alpha per l'opacità, da 0 (del tutto trasparente) a 1 (del tutto opaco): rgba(52, 152, 219, 0.5) e hsla(204, 70%, 53%, 0.5). Il CSS moderno consente anche un HEX a 8 cifre in cui l'ultima coppia è l'alpha — #3498db80 è lo stesso blu al 50%.

Quale dovresti usare?

• HEX — copiare un colore di brand fisso, o incollare in uno strumento di design. Compatto e universale.
• RGB / RGBA — quando ragioni sui canali grezzi o ti serve una trasparenza semplice.
• HSL / HSLA — quando progetti: costruire palette, sfumature hover/attivo, o ritoccare un colore a sensazione.

La buona notizia è che non devi convertire a mano. Il nostro convertitore HEX↔RGB traduce tra i formati all'istante, e il selettore di colori ti fa scegliere un colore visivamente e leggerne i valori HEX, RGB e HSL tutti insieme — oltre a costruire gradienti e palette. Devi estrarre un colore da un'immagine? Il selettore di colori da immagine fa esattamente questo.