Convertitore di colori — convertitore HEX, RGB, HSL online _

Che cos’è la conversione di colori?

Ogni colore che il tuo browser visualizza è in definitiva una tripla sRGB — tre numeri tra 0 e 255 per i canali rosso, verde e blu, più un alpha opzionale. La specifica CSS Color Level 4 definisce diversi formati testuali che fanno round-trip alla stessa tripla, più lo spazio percettivamente uniforme OKLCH. Questo strumento legge ognuno di essi, converte in tutti e riporta il rapporto di contrasto WCAG 2.1 rispetto a un secondo colore, così puoi rilasciare interfacce accessibili con sicurezza.

Come funziona la conversione di colori?

La conversione è una serie di trasformazioni lineari e non lineari ben definite. Ogni passo viene eseguito nel tuo browser — nessun input raggiunge mai i nostri server:

1. Il tuo input viene analizzato. Lo strumento rileva automaticamente HEX a 3, 4, 6 o 8 cifre, le forme funzionali rgb()/rgba()/hsl()/hsla()/hsv()/hwb() sia nella sintassi legacy con virgole sia nella moderna con barra-alpha, o uno qualsiasi dei 150 colori CSS denominati (incluso rebeccapurple).
2. Il colore analizzato viene normalizzato in sRGB canonico — quattro float {r, g, b, a}, ciascuno nell'intervallo 0–1. Questa è l'unica fonte di verità da cui deriva ogni formato di output.
3. HEX si ottiene arrotondando ogni canale al suo valore in byte 0–255 e unendo le cifre esadecimali. RGB / RGBA stampano gli stessi byte. HSL e HSV applicano gli algoritmi standard W3C a coordinate cilindriche; HWB ricava la tonalità da HSV, il bianco da min(r, g, b) e il nero da 1 - max(r, g, b).
4. CMYK è un'approssimazione ingenua — k = 1 - max(r, g, b), poi c, m, y dai canali residui. È adatto per l'anteprima a schermo ma non per la stampa: l'output CMYK reale richiede un profilo ICC che questo strumento intenzionalmente non incorpora.
5. OKLCH segue il percorso diretto di css-color-4: sRGB viene linearizzato, moltiplicato per la matrice LMS, elevato alla radice cubica, moltiplicato per la matrice da LMS a OKLab e infine convertito da OKLab rettangolare a OKLCH polare. OKLCH è percettivamente uniforme, il che lo rende lo spazio giusto per progettare palette che appaiano bilanciate all'occhio umano.

Perché usare questo convertitore di colori?

• Privacy: ogni conversione viene eseguita nel tuo browser in puro JavaScript. Il colore che incolli non lascia mai il tuo dispositivo, cosa che conta per il lavoro su brand non ancora rilasciati, sistemi di design interni e mockup per clienti sotto NDA.
• Passaggio da designer a sviluppatore: incolla l'HEX da Figma e ritrova la stringa rgb() per una configurazione Tailwind, la stringa hsl() per una proprietà personalizzata CSS o la stringa oklch() per una palette moderna — ogni formato in un solo posto, senza copia-incolla tra schede.
• Precisione WCAG: il controllo del contrasto utilizza la formula esatta della luminanza relativa WCAG 2.1 e le soglie pubblicate AA (4,5 / 3,0) e AAA (7,0 / 4,5) per testo normale e grande. Il rapporto riportato corrisponde ai calcolatori manuali entro 0,01.
• Modalità scura e derivazione di palette: HSL e OKLCH espongono la luminosità come singolo canale, quindi è semplice spostare un colore del brand su o giù lungo l'asse della luminosità per derivare token corrispondenti in modalità scura o generare una rampa di palette a 10 livelli da un singolo seme.

Quali sono le applicazioni comuni della conversione di colori?

La conversione dei colori compare nello sviluppo web, nel design e nel lavoro sull'accessibilità:

• Sistemi di design: convertire un HEX del brand nei token HSL e OKLCH corrispondenti per una scala di proprietà personalizzate CSS, poi verificare che ogni combinazione di token superi il WCAG AA rispetto allo sfondo della pagina.
• Audit di accessibilità: incollare una coppia primo piano/sfondo da una schermata reale del prodotto e leggere a colpo d'occhio il rapporto di contrasto più i verdetti AA/AAA sia per il testo di peso normale sia per quello di peso grande.
• Round-trip tra strumenti: prendere un colore da un selettore di screenshot (HEX), incollarlo qui e copiare la stringa hsl() o oklch() direttamente in Tailwind, nei token di Figma o in un tema CSS-in-JS.

Com’è fatto un esempio di conversione di colori?

Prendi il famoso rebeccapurple. La ricerca per nome lo risolve in #663399. La conversione RGB dà rgb(102, 51, 153). La conversione HSL dà hsl(270, 50%, 40%) — una tonalità viola, mezza saturazione, quattro decimi di luminosità. Confrontando quel colore con il bianco puro nel controllo di contrasto si ottiene un rapporto vicino a 7,39, che supera AAA (7,0) per il testo normale e AAA (4,5) per il testo grande — una scelta di primo piano forte e accessibile. Facendo il round-trip #663399 attraverso RGB → HSL → RGB → HEX si ritorna esattamente alla stringa originale, byte per byte.

Usa questo convertitore come riferimento rapido per qualsiasi colore tu incontri — nel codice, nei file di design o in uno screenshot — e il controllo di contrasto come verifica di sicurezza prima del rilascio. Tutto viene eseguito localmente, nulla viene registrato e la matematica della conversione segue le specifiche pubblicate W3C e WCAG, così i numeri corrispondono a quelli che il tuo strumento di audit o i devtools del browser riporterebbero.