Convertitore Colori Online: HEX, RGB, HSL

Il modello RGB riflette il funzionamento fisico dei monitor CRT e LCD: ogni pixel ha tre sub-pixel che emettono luce rossa, verde e blu. È un modello additivo — mescolando rosso, verde e blu al massimo si ottiene il bianco (#FFFFFF). Le tre componenti a 8 bit (0-255) producono in totale 16,7 milioni di colori (256 × 256 × 256).

La notazione HEX è semplicemente lo stesso valore RGB scritto in base 16: il simbolo # e le sei cifre esadecimali fanno parte della sintassi dei colori standardizzata dal W3C nelle prime specifiche CSS della metà degli anni '90.

Il modello HSL è stato pensato per rendere la selezione dei colori più vicina al ragionamento umano, descrivendo il colore per tonalità, saturazione e luminosità anziché per quantità di luce dei tre canali.

Con le WCAG (Web Content Accessibility Guidelines), pubblicate dal W3C a partire dal 2008, sono stati definiti rapporti di contrasto minimi tra testo e sfondo. Il criterio 1.4.3 (livello AA) richiede 4,5:1 per il testo normale e 3:1 per il testo grande: questo ha reso utile convertire e confrontare i colori per verificarne la leggibilità.

HEX per CSS e Codice: Il formato più usato nello sviluppo web perché compatto (#FF5733) e supportato ovunque. Ideale per variabili CSS, framework (Tailwind, Bootstrap) e passaggio tra designer e sviluppatori.

RGB per Grafica: Photoshop, Figma e Illustrator usano RGB per la compatibilità con gli schermi. È il formato di riferimento quando devi indicare con precisione l'intensità dei tre canali primari.

HSL per Design Intuitivo: Comodo per modificare un colore mantenendo coerenza. Vuoi una variante più scura? Riduci la Luminosità. Colore più tenue? Riduci la Saturazione. Molti design system (Material Design, Ant Design) ragionano in HSL.

Accessibilità WCAG: Per il testo su sfondi colorati conta il rapporto di contrasto, non il singolo colore. Esempio: testo bianco (#FFFFFF) su arancione (#FF5733) ha un rapporto di circa 3,15:1 — sufficiente per il testo grande (≥3:1, livello AA) ma non per il testo normale (che richiede 4,5:1). Sullo stesso arancione, il testo nero raggiunge invece circa 6,66:1. Il rapporto si calcola con uno strumento dedicato come il Contrast Checker di WebAIM, non con questo convertitore.

Concetto correlato — Stampa (CMYK): RGB è pensato per gli schermi, mentre la stampa usa CMYK (Cyan, Magenta, Yellow, Black). Un arancione brillante a schermo può risultare più spento in stampa perché fuori dal gamut CMYK. La conversione in CMYK richiede profili colore dedicati e non è gestita da questo strumento, che lavora solo su HEX, RGB e HSL.

HEX → RGB: Ogni coppia HEX è convertita da base 16 a base 10.

Esempio: #FF5733
FF = 15×16 + 15 = 255 (rosso)
57 = 5×16 + 7 = 87 (verde)
33 = 3×16 + 3 = 51 (blu)
Risultato: rgb(255, 87, 51)

RGB → HSL (Algoritmo):

1. Normalizza RGB a 0-1: R'=255/255=1, G'=87/255≈0,34, B'=51/255=0,2
2. Max=1 (R), Min=0,2 (B), Delta=0,8
3. Lightness: L = (Max+Min)/2 = 0,6 → 60%
4. Saturation: poiché L > 0,5, S = Delta/(2−Max−Min) = 0,8/(2−1−0,2) = 0,8/0,8 = 1 → 100%
5. Hue: poiché Max=R, H = 60° × ((G'−B')/Delta) = 60° × (0,14/0,8) ≈ 11° → arancione

Risultato: hsl(11, 100%, 60%) — lo stesso valore prodotto dal convertitore qui sopra.

Spazio Colore: RGB è un cubo 3D (256³ = 16.777.216 colori). HSL è un cilindro: H è l'angolo (0-360°), S è il raggio (0-100%), L è l'altezza (0-100%). Questo spiega perché modificare Hue ruota attorno al colore, mentre L va dal nero al bianco.

Errore #1: Confondere HEX corto e lungo
#FFF è shorthand per #FFFFFF (bianco). Funziona solo se coppie identiche: #F0F0F0 NO shorthand, #F5A = #FF55AA. Alcuni tool non supportano shorthand — questo convertitore normalizza sempre a 6 cifre.

Errore #2: RGB decimale vs percentuale
CSS accetta rgb(255, 87, 51) O rgb(100%, 34%, 20%), ma NON mischiare! Alcuni designer usano % in Figma, sviluppatori decimale in CSS. Questo tool usa sempre 0-255.

Errore #3: Hue oltre 360°
In HSL, Hue è ciclico: 370° = 10° (arancione). Ma alcuni tool generano errori con input >360°. Usa sempre 0-360° per compatibilità.

Errore #4: Confondere colore e contrasto
Convertire un colore non dice nulla sulla sua leggibilità: un codice HEX «bello» può comunque avere un contrasto insufficiente con lo sfondo. Verifica sempre il rapporto di contrasto con uno strumento dedicato (vedi la sezione su WCAG qui sotto).

Limitazione: Calibrazione Monitor
Due monitor mostrano lo stesso HEX in modo leggermente diverso. Per lavori professionali (branding, stampa) calibra lo schermo con un colorimetro (X-Rite i1Display, Datacolor SpyderX).