HEX, RGB, HSL: Capire i codici colore web

Stai modificando un sito web e vedi #FF5733 nel CSS. Oppure stai lavorando con un designer che ti invia rgb(255, 87, 51). O uno strumento di design mostra un colore come hsl(11, 100%, 60%). Tutti descrivono lo stesso identico colore, un rosso-arancio vivace, ma in tre formati diversi.

Se i codici colore web ti hanno mai confuso, questa guida chiarirà tutto in cinque minuti.

Come funzionano i colori digitali

Ogni colore sul tuo schermo viene creato mescolando tre colori primari di luce: Rosso, Verde e Blu. Questo è il modello di colore RGB. Variando l'intensità di ciascun canale da zero (spento) al massimo (luminosità piena), puoi creare uno qualsiasi degli circa 16,7 milioni di colori che un display standard può mostrare.

• Rosso 255, Verde 0, Blu 0 = rosso puro
• Rosso 0, Verde 255, Blu 0 = verde puro
• Rosso 0, Verde 0, Blu 255 = blu puro
• Rosso 255, Verde 255, Blu 255 = bianco (tutti i canali al massimo)
• Rosso 0, Verde 0, Blu 0 = nero (tutti i canali spenti)
• Rosso 255, Verde 255, Blu 0 = giallo (rosso + verde)

Ogni formato colore usato sul web è semplicemente un modo diverso di esprimere questi valori dei canali.

Colori HEX

Come appaiono

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Come funzionano

Un codice colore HEX è una stringa di sei caratteri preceduta da un simbolo cancelletto. I sei caratteri sono divisi in tre coppie, ciascuna rappresentante un canale colore in esadecimale (base 16):

L'esadecimale usa le cifre 0-9 e le lettere A-F, dove A=10, B=11, C=12, D=13, E=14, F=15. Quindi FF in esadecimale equivale a 255 in decimale (15 × 16 + 15 = 255).

Analizzando #FF5733:

• FF = Rosso a 255 (massimo)
• 57 = Verde a 87
• 33 = Blu a 51

Questo produce un rosso-arancio vivace.

Abbreviazione

Quando ogni coppia ha due caratteri identici, puoi usare un'abbreviazione a tre caratteri:

• #FF0000 può essere scritto come #F00
• #3366FF può essere scritto come #36F
• #000000 può essere scritto come #000

Colori RGB

Come appaiono

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Come funzionano

La notazione RGB indica direttamente i valori dei canali rosso, verde e blu come numeri decimali da 0 a 255. È il formato più intuitivo perché i numeri corrispondono direttamente all'intensità di ciascun canale luminoso.

rgb(255, 87, 51) significa:

• Rosso: 255 (massimo)
• Verde: 87 (circa un terzo)
• Blu: 51 (circa un quinto)

RGBA: Aggiungere la trasparenza

RGBA aggiunge un quarto valore per l'opacità (alfa), che va da 0 (completamente trasparente) a 1 (completamente opaco):

rgba(255, 87, 51, 0.5)   /* 50% trasparente */
rgba(0, 0, 0, 0.8)        /* 80% opaco nero */

Questo è utile per overlay, ombre e qualsiasi elemento di design che deve mostrare il contenuto dietro di esso.

Colori HSL

Come appaiono

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Come funzionano

HSL sta per Hue (Tonalità), Saturation (Saturazione), Lightness (Luminosità). Invece di ragionare in termini di mescolanza dei canali rosso/verde/blu, HSL descrive il colore nel modo in cui gli esseri umani pensano naturalmente ai colori.

Hue (Tonalità) è il colore stesso, espresso come un grado sulla ruota dei colori (0-360):

• 0° / 360° = Rosso
• 60° = Giallo
• 120° = Verde
• 180° = Ciano
• 240° = Blu
• 300° = Magenta

Saturation (Saturazione) indica quanto è vivido il colore, da 0% (grigio) a 100% (completamente saturo).

Lightness (Luminosità) indica quanto è chiaro o scuro il colore, da 0% (nero) a 100% (bianco). 50% è la luminosità "normale."

hsl(11, 100%, 60%) significa:

• Tonalità: 11° (rosso leggermente arancione)
• Saturazione: 100% (completamente vivido)
• Luminosità: 60% (leggermente più chiaro del normale)

HSLA: Aggiungere la trasparenza

Come RGBA, HSLA aggiunge un canale alfa:

hsla(11, 100%, 60%, 0.5)   /* 50% trasparente */

Quando usare quale formato

Per lo sviluppo web

HEX è lo standard di fatto. La maggior parte del CSS è scritta con codici HEX perché sono compatti e ogni sviluppatore li riconosce.

Per i sistemi di design

HSL è ideale per creare palette di colori coerenti. Per creare varianti più chiare e più scure di un colore del brand, basta regolare il valore di luminosità:

• Primario: hsl(210, 80%, 50%)
• Variante chiara: hsl(210, 80%, 70%)
• Variante scura: hsl(210, 80%, 30%)

La tonalità e la saturazione restano le stesse, garantendo che le varianti siano lo stesso "colore" a diverse luminosità.

Per la trasparenza

Usa RGBA o HSLA quando hai bisogno di colori semi-trasparenti per overlay, ombre o effetti vetro.

Convertire tra formati

Ti capiterà spesso di dover convertire tra formati. Un designer invia valori HSL ma il tuo codebase usa HEX. Una guida del brand specifica RGB ma ti serve HSL per creare varianti.

La matematica è semplice ma noiosa da fare a mano. Uno strumento di conversione la gestisce istantaneamente.

Inizia a lavorare con i colori:

• Converti codici colore
• Strumento convertitore colori
• Generatore palette colori

Tutti gli strumenti sono gratuiti e funzionano direttamente nel tuo browser.