Convertitore Colori Online

Il formato HEX (esadecimale) è nato con i primi computer a colori negli anni '80. Ogni coppia di cifre rappresenta l'intensità di Rosso, Verde o Blu in base 16 (0-F), per un totale di 16,7 milioni di colori (256 × 256 × 256). Il simbolo # deriva dalla notazione CSS introdotta dal W3C nel 1996.

RGB (Red, Green, Blue) riflette il funzionamento fisico dei monitor CRT e LCD: ogni pixel ha 3 sub-pixel che emettono luce rossa, verde e blu. Il modello RGB è additivo — mescolando rosso + verde + blu al massimo si ottiene bianco (#FFFFFF).

HSL (Hue, Saturation, Lightness) è stato introdotto negli anni '90 per rendere la selezione colori più intuitiva. Hue (tonalità) segue la ruota cromatica: 0° = rosso, 120° = verde, 240° = blu. Saturation (saturazione) va dal grigio (0%) al colore puro (100%). Lightness (luminosità) va dal nero (0%) al bianco (100%), con colore pieno al 50%.

Nel 2008, il W3C ha standardizzato le WCAG 2.0 (Web Content Accessibility Guidelines) che richiedono contrasti minimi tra colori per accessibilità: rapporto 4.5:1 per testo normale, 3:1 per testo grande. Questo ha reso cruciale l'uso di convertitori colore per verificare 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 e Canali Alfa: Photoshop, Figma, Illustrator usano RGB per compatibilità con schermi. Con RGBA aggiungi trasparenza: rgba(255, 87, 51, 0.5) = 50% opacità. Fondamentale per overlay, ombre, glassmorphism.

HSL per Design Intuitivo: Modificare colori mantenendo coerenza. Vuoi una variante più scura? Riduci Lightness. Colore pastello? Riduci Saturation. I design system moderni (Material Design, Ant Design) generano palette con HSL.

Accessibilità WCAG: Per testi su sfondi colorati, verifica sempre il contrasto. Esempio: testo bianco (#FFFFFF) su arancione (#FF5733) ha rapporto 3.04:1 — OK per titoli grandi (Level AA), insufficiente per testo normale (serve 4.5:1).

Stampa vs Digitale: Attenzione! RGB è per schermi, CMYK (Cyan, Magenta, Yellow, Black) è per stampa. Un arancione brillante RGB potrebbe stampare spento perché fuori dal gamut CMYK. Per progetti stampati, converti sempre in CMYK prima.

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: S = Delta/(2-Max-Min) = 0.8/1.4 = 0.57 → 57%
5. Hue: Poiché Max=R, H = 60° × ((G'-B')/Delta mod 6) = 60° × (0.14/0.8) = 10.5° → arancione

Risultato: hsl(10.5°, 57%, 60%)

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: Ignorare daltonismo
L'8% degli uomini ha deficit rosso-verde (deuteranopia). Rosso (#FF0000) e verde (#00FF00) appaiono simili. Usa tool come Coblis Color Blindness Simulator per testare palette.

Limitazione: Calibrazione Monitor
Due monitor mostrano lo stesso HEX diversamente. Per lavori professionali (branding, stampa), calibra il monitor con colorimetro (X-Rite i1Display, Datacolor SpyderX).