Convertire un colore tra RGB, HSL ed esadecimale

Lavorare con il colore sul web implica destreggiarsi costantemente tra varie notazioni. Un convertitore di colore evita gli errori manuali e permette di passare istantaneamente da un formato all'altro a seconda del contesto di utilizzo. Ogni formato ha i suoi punti di forza, e sapere quale usare è uno dei riflessi dello sviluppatore front-end.

Ecco gli usi tipici che motivano una conversione di colore:

• RGB è nativo in CSS e JavaScript, leggibile dagli umani per comprendere una dominante (canali rosso, verde, blu su 0-255).
• HSL rende banale la modifica di una tonalità: basta regolare la saturazione o la luminosità senza ricalcolare ogni canale.
• HEX è il formato canonico per il copia-incolla: sei caratteri, compatibile ovunque, ideale per i mockup Figma, Sketch o le guide di stile.
• Le conversioni HEX to RGB, RGB to HEX, HEX to HSL e le loro reciproche sono le operazioni più comuni in CSS e JavaScript.

RGB e RGBA (Red, Green, Blue, Alpha)

Ogni canale è codificato su un intero tra 0 e 255, che corrisponde a un byte per componente e dà 16 777 216 colori possibili. Il canale alpha di RGBA va da 0 (trasparente) a 1 (opaco) e controlla la trasparenza.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX e HEX8 (notazione esadecimale)

Formato compatto molto diffuso: #RRGGBB su sei caratteri, dove ogni coppia rappresenta un canale RGB in base 16. La variante #RRGGBBAA su otto caratteri aggiunge il canale alpha in esadecimale (00 trasparente, FF opaco). Esiste anche la notazione breve #RGB: #F53 equivale a #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL e HSLA (Hue, Saturation, Lightness, Alpha)

HSL descrive il colore in modo percettivo. Hue è un angolo sulla ruota cromatica (0 a 360°), Saturation e Lightness sono percentuali. È il formato da privilegiare per generare varianti: schiarire un pulsante in hover, desaturare uno stato disabilitato, creare una palette coerente facendo variare solo la tonalità.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Altri formati esistenti

CMYK (Cyan, Magenta, Yellow, Key) è usato in stampa: descrive un colore per sottrazione di inchiostri e non è pertinente a schermo. OKLCH e LAB sono spazi percettivamente uniformi apparsi in CSS Color Level 4; permettono un miglior controllo della luminosità percepita. Questo strumento si concentra sulle conversioni RGB, HEX e HSL, che coprono la grande maggioranza delle esigenze web.

HEX verso RGB consiste nel fare il parsing della stringa per coppie di caratteri e interpretare ogni coppia come un intero in base 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB verso HEX è l'operazione inversa: ogni canale viene convertito in base 16, completato a due caratteri, poi concatenato.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB verso HSL è più algoritmico. Si normalizzano i canali tra 0 e 1, si calcola il min e il max per dedurne la luminosità, poi la saturazione, poi la tonalità a seconda del canale dominante. La formula completa è documentata nella specifica CSS Color Module Level 3.

Lo strumento funziona nei due sensi tra RGB, HEX e HSL. Per eseguire una conversione:

1. Scegliete il formato di input: RGB, HEX o HSL.
2. Inserite il valore (per esempio #1400B6, rgb(20, 0, 182) o hsl(247, 100%, 36%)).
3. Avviate la conversione: gli equivalenti negli altri due formati appaiono immediatamente.
4. Copiate il risultato desiderato tramite il pulsante dedicato e incollatelo nel vostro foglio di stile o nel vostro mockup.

Il calcolo avviene lato browser, nessun dato viene inviato a un server.

• Design web e CSS: recuperare un HEX da un mockup e ottenere l'HSL equivalente per generare uno stato hover o active senza deviare dalla tonalità.
• Identità visiva e palette: declinare un colore primario in più varianti (chiaro, scuro, attenuato) giocando sulla luminosità o sulla saturazione HSL.
• Illustrazione e grafica: trasporre un colore schermo (RGB) in un codice esadecimale da trasmettere a un software o a un cliente.
• Accessibilità: convertire nel formato RGB per calcolare in seguito un rapporto di contrasto (WCAG AA richiede 4.5:1 per il testo normale) con il colore di sfondo.
• Variabili CSS e preprocessori: alimentare dei token di design in un file SASS o un tema Tailwind a partire da un solo colore di riferimento.

Alcune conversioni complete per illustrare la corrispondenza tra i tre formati:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Con canale alpha:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Qual è la differenza tra HEX e HEX8?

L'HEX classico codifica tre canali RGB su sei caratteri (#RRGGBB). HEX8 aggiunge due caratteri per il canale alpha (#RRGGBBAA), il che permette di gestire la trasparenza in una sola stringa. #1400B6FF e #1400B6 danno visivamente lo stesso colore, opaco.

Meglio HSL o RGB in CSS?

I due sono equivalenti come resa. HSL è più espressivo per generare una palette coerente o varianti di stato (hover, focus), perché si modifica un solo parametro percettivo. RGB resta pratico quando si lavora con dati provenienti da un canvas o da un sensore.

Perché il mio HEX dà una tonalità diversa da quella attesa?

Tre cause frequenti: confusione tra #RGB corto e #RRGGBB lungo (i caratteri sono duplicati, non concatenati), errore di copia su un carattere, o visualizzazione su uno schermo non calibrato. Verificate anche che il vostro CSS non sovrapponga un'opacità del genitore che modifica la resa finale.

A cosa serve il canale alpha di RGBA e HSLA?

Il canale alpha controlla l'opacità del colore, da 0 (totalmente trasparente) a 1 (totalmente opaco). È utile per gli overlay, le ombre, gli stati disabilitati o le sovrapposizioni su immagine. A differenza della proprietà CSS opacity, RGBA e HSLA influiscono solo sul colore target e non sui suoi figli.

Si può convertire un colore senza perdita di precisione?

Tra RGB ed HEX la conversione è esatta, i due formati codificano la stessa informazione su 24 bit. La conversione verso HSL implica arrotondamenti sulla tonalità, la saturazione e la luminosità; un andata e ritorno RGB > HSL > RGB può quindi restituire un valore spostato di un'unità su certi canali.

Perché usare un convertitore online piuttosto che una funzione fatta in casa?

Per un test puntuale, prototipare una palette o verificare velocemente l'equivalente HEX di un colore HSL estratto da un mockup, un convertitore online è immediato. Per un'esigenza programmatica ricorrente, una libreria come color, chroma-js o tinycolor2 resta più appropriata.