Formati Colore Spiegati: Guida alla Conversione HEX, RGB, HSL

Ogni pixel sullo schermo è definito da numeri. Ma lo stesso colore può essere espresso in più formati — HEX, RGB, HSL, HSB e altri. Comprendere questi formati e quando usare ciascuno ti rende uno sviluppatore e designer più efficace.

I Modelli di Colore

RGB (Red, Green, Blue)

RGB è un modello di colore additivo basato sul funzionamento degli schermi. Ogni pixel è una combinazione di luce rossa, verde e blu a intensità variabili.

color: rgb(59, 130, 246);       /* Blu pieno */
color: rgba(59, 130, 246, 0.5); /* Blu trasparente al 50% */

Ogni canale va da 0 (nessuno) a 255 (massima intensità):

rgb(0, 0, 0) = Nero (nessuna luce)
rgb(255, 255, 255) = Bianco (tutta la luce)
rgb(255, 0, 0) = Rosso puro

Quando usare RGB: Manipolazione programmatica del colore, operazioni su canvas, elaborazione immagini. RGB mappa direttamente sull'hardware, rendendo i calcoli semplici.

HEX (Esadecimale)

HEX è semplicemente RGB scritto in notazione esadecimale. Ogni coppia di caratteri rappresenta un canale (00-FF):

color: #3B82F6;   /* Stesso blu di rgb(59, 130, 246) */
color: #3B82F680; /* Con alfa al 50% (hex a 8 cifre) */

La conversione è diretta: 3B = 59, 82 = 130, F6 = 246.

Abbreviazione: Quando ogni coppia ha cifre identiche, puoi abbreviare: #AABBCC → #ABC

Quando usare HEX: Fogli di stile CSS (formato più comune), passaggi di consegna di design, linee guida del brand. HEX è compatto e universalmente compreso.

HSL (Hue, Saturation, Lightness)

HSL rappresenta i colori come li percepiscono gli esseri umani. Invece di mescolare canali di luce, descrivi il colore tramite le sue proprietà:

Hue (Tonalità): L'angolo del colore sulla ruota cromatica (0-360°). 0° = rosso, 120° = verde, 240° = blu
Saturation (Saturazione): Quanto è vivido il colore (0% = grigio, 100% = colore pieno)
Lightness (Luminosità): Quanto è chiaro il colore (0% = nero, 50% = colore puro, 100% = bianco)

color: hsl(217, 91%, 60%);       /* Stesso blu */
color: hsla(217, 91%, 60%, 0.5); /* Con alfa */

Quando usare HSL: Creare palette di colori, regolare i colori programmaticamente (es. creare stati hover regolando la luminosità), design cromatico accessibile. HSL è il formato più intuitivo per ragionare sui colori.

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB è simile a HSL ma definisce la luminosità diversamente. Alla massima luminosità, ottieni il colore puro; al minimo, ottieni il nero. Questo modello è usato da strumenti di design come Figma, Sketch e Photoshop.

Differenza chiave da HSL: In HSL, luminosità 50% dà il colore puro. In HSB, luminosità 100% dà il colore puro. Questo rende HSB più intuitivo per alcuni compiti ma meno utile nel CSS (che non supporta HSB nativamente).

Conversione Tra Formati

Convertire tra formati coinvolge matematica semplice. Ecco le relazioni chiave:

HEX a RGB

Dividi la stringa hex in coppie e converti ciascuna in decimale:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB a HSL

L'algoritmo normalizza i valori RGB da 0 a 1, trova i canali massimo e minimo, poi calcola la tonalità in base al canale dominante, la saturazione dall'intervallo e la luminosità dalla media.

Piuttosto che implementare queste conversioni manualmente, usa il nostro Convertitore di Colori per tradurre istantaneamente tra qualsiasi formato.

Applicazioni Pratiche

Costruire Palette di Colori con HSL

HSL eccelle nel generare palette coerenti. Mantieni la tonalità costante e varia saturazione e luminosità:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Più chiaro */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Più scuro */
}

Questo approccio garantisce passi percettivamente coerenti. Crei una palette completa a mano? Il nostro Generatore di Palette Colori automatizza questo processo.

Stati Hover e Focus

Con HSL, creare stati interattivi è banale:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% più scuro */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% più scuro */
}

Accessibilità e Contrasto

WCAG 2.1 richiede un rapporto di contrasto minimo di 4.5:1 per il testo normale e 3:1 per il testo grande. La componente di luminosità in HSL ti dà un modo intuitivo per assicurare un contrasto sufficiente:

Sfondi chiari (luminosità > 90%) si abbinano bene con testo scuro (luminosità < 30%)
Sfondi scuri (luminosità < 20%) si abbinano bene con testo chiaro (luminosità > 80%)

Funzioni Colore CSS Moderne

Il CSS ora supporta potenti funzioni di manipolazione del colore:

/* Sintassi colore relativa (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Spazio colore percettivamente uniforme */
color: oklch(0.7 0.15 250);

Il formato oklch sta guadagnando adozione perché è percettivamente uniforme — cambiamenti numerici uguali producono cambiamenti percepiti uguali, a differenza di HSL dove un cambiamento di luminosità del 10% appare diverso a diversi valori di tonalità.

FAQ

Quale formato colore dovrei usare nel CSS?

Per la maggior parte dei progetti, usa HEX per colori semplici e HSL quando devi creare variazioni o manipolare i colori programmaticamente. HEX è il formato più compatto e ampiamente riconosciuto. HSL è più leggibile quando costruisci sistemi di colori. Il CSS moderno supporta tutti i formati in modo intercambiabile.

Qual è la differenza tra HSL e HSB?

HSL e HSB usano entrambi tonalità e saturazione, ma definiscono la luminosità diversamente. In HSL, luminosità 0% è nero, 50% è il colore puro e 100% è bianco. In HSB, luminosità 0% è nero e 100% è il colore puro (nessun percorso verso il bianco solo attraverso la luminosità). Il CSS supporta HSL nativamente; HSB è usato principalmente in strumenti di design come Figma e Photoshop.

Risorse Correlate

Convertitore di Colori — Converti tra HEX, RGB, HSL e HSB istantaneamente
Generatore di Palette Colori — Genera palette di colori armoniose
Guida ai Gradienti CSS — Crea bellissimi gradienti con CSS