Convertitore di colori — HEX, RGB, HSL e OKLCH

Cos'è un convertitore di colori?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Caratteristiche principali

Confronto tra le alternative al convertitore di colori

Esempi di conversione dei colori

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Come usare il convertitore di colori

1. 1

   Incolli o digiti un colore in qualsiasi formato

   Ognuno dei 9 campi di formato (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) è direttamente modificabile — non c'è nessun pulsante "Converti" da premere. Incolli un hex da Figma, digiti un valore `oklch()` da una config Tailwind, butti dentro un `hsl()` da un vecchio foglio di stile, o persino digiti un nome di colore CSS come `tomato`. Lo strumento analizza in modo incrementale mentre digita, quindi un valore digitato a metà non azzererà gli altri finché non si conferma un formato valido. L'input non valido riceve un errore inline discreto; quello valido aggiorna l'intera griglia.

2. 2

   Tutti i 9 formati si aggiornano all'istante

   La fonte di verità interna è OKLCH (percettivamente uniforme, gamut-unbounded), e ogni altro formato viene derivato da essa a ogni battuta. Il campo nel quale si sta digitando mantiene intatta la posizione del cursore — solo gli *altri* otto campi si ridisegnano. Significa che può modificare direttamente il canale L di OKLCH e veder cambiare in tempo reale hex, RGB, HSL e CMYK senza perdere il cursore. La matematica della conversione gira interamente in JavaScript usando le stesse primitive OKLAB presenti nei browser moderni.

3. 3

   Usi il picker per l'esplorazione visiva

   Sotto la griglia dei formati ci sono un quadrato di saturazione-luminosità (trascini in qualsiasi punto per impostare S+L per la tonalità corrente), un cursore di tonalità (trascini per ruotare attorno alla ruota dei colori) e un cursore alpha (trascini per impostare la trasparenza). Sui browser Chromium-based (Chrome, Edge, Brave) il pulsante **Eyedropper** attiva l'API nativa `EyeDropper` — faccia clic in qualunque punto dello schermo, anche fuori dalla finestra del browser, per campionare il colore di quel pixel. Safari e Firefox non hanno ancora rilasciato l'API, quindi il pulsante è nascosto in quei browser e il quadrato SL + cursore di tonalità restano il picker principale.

4. 4

   Verifichi gamma cromatica e contrasto a colpo d'occhio

   Tre badge di gamma cromatica (**sRGB**, **Display P3**, **Rec2020**) indicano se il colore corrente rientra nella gamma riproducibile di ciascuno spazio — utile quando si lavora in OKLCH e si vuole sapere quali display renderizzeranno accuratamente il valore. La riga di contrasto mostra il rapporto WCAG 2.1 sia contro il bianco sia contro il nero, oltre al punteggio APCA Lc (metrica prospettica di WCAG 3). I badge di promosso / bocciato (AA, AAA) appaiono inline. Se un colore è fuori gamma sRGB, un pulsante **Snap a sRGB** riduce il chroma finché rientra.

5. 5

   Copi nella sintassi nativa della sua piattaforma

   Ognuno dei 9 campi di formato ha il suo pulsante **Copia** — un clic, il valore finisce negli appunti, l'etichetta passa brevemente a "Copiato!" per conferma. Sotto il picker la sezione **Copia come codice** genera snippet pronti per il copia-incolla per cinque piattaforme: custom property CSS, token `@theme` di Tailwind v4, literal SwiftUI `Color(red:green:blue:)`, costante Jetpack Compose `Color(0xFF...)` e Flutter `Color(0xFF...)`. Anche l'hash URL (`#hex=...` o `#oklch=...`) si aggiorna, così può condividere un link live al colore esatto.

Errori comuni nella conversione dei colori

Si supponga che una palette HSL sia percettivamente uniforme:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
A schermo appaiono distanziati in modo irregolare.

Si usi OKLCH per scale percettivamente uniformi:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
A schermo appaiono distanziati in modo uniforme.

Inviare il nostro output CMYK direttamente in tipografia:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Il risultato stampato potrebbe apparire torbido o sovrasaturo.

Inviare l'hex originale al fornitore di stampa:
hex #FF6347 → lasciare che il tipografo converta con ICC contro la sua macchina
Il risultato stampato corrisponde al colore a schermo molto più fedelmente.

Far finta che Lc 60 = WCAG 4,5:1:
APCA Lc 60 → "passa AA"
Il rapporto WCAG 2 per la stessa coppia potrebbe essere 3,8:1 (non passa AA).

Verificare entrambe le metriche in modo indipendente:
rapporto WCAG 2 ≥ 4,5:1 per la compliance AA body text, E
APCA |Lc| ≥ 75 per la leggibilità reale.
Devono passare entrambe, non una sostituire l'altra.

Spostare la L di HSL per le tinte scure:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% appare slavato; 30% appare molto più scuro del gap fino a 60%.

Spostare la L di OKLCH per le tinte scure:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Ogni passo appare come lo stesso gap visivo.

Copiare hex a 8 cifre in un parser legacy:
#FF573380 → il parser tronca → #FF5733 (nessun alpha)
La trasparenza al 50% si perde silenziosamente.

Verificare che il target supporti hex a 8 cifre, o usare rgba():
per CSS moderno: #FF573380 (hex a 8 cifre)
per supporto legacy: rgba(255, 87, 51, 0.5) (sempre supportato)
La sintassi alpha esplicita evita il troncamento silenzioso.

Fare snap di ogni colore OKLCH a sRGB di default:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
I display P3 perdono il 30%+ di saturazione senza motivo.

Controllare prima il badge Display P3:
se rientra in P3: mantenere il valore wide-gamut, aggiungere fallback sRGB tramite @supports
se eccede P3: allora fare snap a sRGB
Lasci che l'hardware wide-gamut faccia il suo lavoro.

Chi usa questo strumento

Sviluppatori frontend che migrano ai token OKLCH di Tailwind v4

Tailwind v4 ha standardizzato OKLCH per la propria palette di default nel 2024. Migrare un vecchio design system basato su HSL o hex significa convertire centinaia di colori brand in OKLCH. Incolli ogni hex, copi l'output OKLCH, lo inserisca nel blocco `@theme`. I badge di gamma cromatica live segnalano qualunque colore ecceda sRGB così da decidere se mantenere il valore wide-gamut per i display Display P3.

Designer che traducono colori Figma in iOS / Android

Figma esporta hex di default, ma iOS vuole literal SwiftUI `Color(red:green:blue:)` e Android vuole costanti Jetpack Compose `Color(0xFF...)`. Incolli l'hex Figma una volta, copi lo snippet SwiftUI per l'ingegnere iOS e lo snippet Compose per l'ingegnere Android — entrambi già nella sintassi esatta che ciascuna piattaforma si aspetta, con l'hex originale preservato in un commento per la tracciabilità.

Designer che preparano proof di stampa (approssimazione CMYK)

Quando un colore brand deve apparire su un biglietto da visita stampato, l'approssimazione CMYK fornisce una stima rapida da condividere con la tipografia prima della conversione ICC vera e propria. Incolli l'hex brand, copi le percentuali CMYK, le invii al tipografo per un preventivo rapido — poi si rimetta alla conversione ICC-aware del tipografo per il match colore finale contro la specifica macchina.

Ingegneri dell'accessibilità che verificano WCAG e APCA

WCAG 2.1 è oggi lo standard normativo (ADA, EAA, Section 508); APCA Lc è il successore proposto in WCAG 3. Avere entrambe le metriche affiancate consente al designer di verificare che un colore body text superi il 4,5:1 WCAG contro il bianco, poi controllare che superi anche `Lc 75` APCA, in un'unica schermata — senza saltare tra due calcolatori separati.

Educatori che insegnano i concetti degli spazi colore

La visualizzazione simultanea dei nove campi rende visibili le relazioni tra spazi colore. Si digita un valore OKLCH, si osserva HSL derivare perché L significa cose diverse in ogni spazio. Si trascina il cursore di tonalità e si osservano hex, RGB e CMYK aggiornarsi tutti. Si mostrano i badge di gamma cromatica che diventano rossi spingendo il chroma oltre sRGB. Lo strumento è una demo da aula a sé stante per un corso universitario di grafica o HCI.

Brand manager che cercano il colore CSS named più vicino

Quando il copy marketing dice "un accent color tomato" ma l'hex brand reale è `#FF6347`, il campo Named restituisce `tomato (exact)` perché è esattamente ciò a cui `tomato` corrisponde nella specifica CSS. Per hex molto vicini, il campo restituisce il colore named più vicino con la distanza ΔE in OKLAB — utile per documentazione, prosa e denominazione casuale dei colori.

Sviluppatori web che convertono palette HEX legacy in OKLCH

Un sito più vecchio potrebbe avere una palette brand di 50 colori definita come custom property CSS in codici hex. Modernizzare a OKLCH permette al team brand di esprimere le stesse scale in uno spazio percettivamente uniforme. Incolli ogni hex, copi l'output OKLCH, lo sostituisca nelle definizioni di variabile. Il pannello Tints/Shades sottostante verifica che la scala risultante sia visivamente uniforme prima della spedizione.

Maintainer open-source che documentano design token

La documentazione dei design token di solito ha bisogno di mostrare lo stesso colore in più sintassi — hex per il blocco di codice CSS, OKLCH per la tabella della specifica, il nome del colore per le menzioni in prosa. La visualizzazione a campi simultanei consente al maintainer di copiare ciascuno in un solo passaggio invece di rieseguire tre conversioni separate. L'URL hash condivisibile permette ai contributor di linkare al colore esatto in discussione in una issue GitHub.

Matematica e algoritmi della conversione dei colori

OKLCH come fonte di verità interna

Lo strumento mantiene internamente il valore colore canonico come tripletta OKLCH. Ogni campo modificabile deriva il proprio valore di visualizzazione da quella tripletta a ogni battuta; ogni modifica utente aggiorna prima la tripletta, poi attiva il re-render degli altri otto campi. Questo elimina il drift di virgola mobile a ogni passo che affligge i convertitori che usano HSL o sRGB come pivot. La scelta di OKLCH rispetto a OKLAB è deliberata — la forma polare preserva la tonalità come asse stabile, quindi trascinare il cursore di tonalità non attraversa accidentalmente il grigio. Secondo il paper del 2020 di Björn Ottosson, l'uniformità percettiva di OKLAB è l'argomento più forte per trattarlo come lingua franca della matematica colore moderna.

Fonti delle matrici (W3C CSS Color 4 + Ottosson 2020)

Ogni matrice di conversione nel codice è citata con la sua fonte primaria. La funzione gamma piecewise sRGB ↔ linear-sRGB è W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). La matrice 3×3 linear-sRGB ↔ CIE XYZ D65 è CSS Color 4 §15.1. La matrice XYZ D65 ↔ LMS e lo step di radice cubica di OKLAB vengono dall'implementazione di riferimento di Ottosson `https://bottosson.github.io/posts/oklab/`, esattamente come pubblicata. Nessuna matrice viene ricalcolata o riderivata — copiarle verbatim mantiene l'output identico ai vettori di riferimento della specifica.

Formula CMYK ingenua e il caveat ICC

Il nostro output CMYK usa la formula da manuale standard: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` operando su valori sRGB normalizzati. È un'approssimazione deliberata. La vera accuratezza di stampa richiede una conversione tramite profilo ICC contro la specifica macchina, inchiostro (es. US Web Coated SWOP v2, Fogra39, Japan Color 2011) e carta, che può spostare i canali del 5-15%. Mostriamo il campo CMYK con un disclaimer visibile affinché gli utenti non spediscano i nostri valori direttamente in tipografia. Tratti l'output come controllo di buon senso per preventivi, non come deliverable.

Rilevamento della gamma cromatica tramite controllo dei range dei canali

Un colore è considerato in-gamma per uno spazio target (sRGB, Display P3, Rec2020) se ogni canale rientra in `[-ε, 1 + ε]` dopo la conversione verso i primari di quello spazio, dove `ε = 1e-7` assorbe il rumore di precisione virgola mobile vicino ai confini. Il badge di gamma cromatica di ogni spazio diventa rosso quando un canale eccede il range. Questo intercetta il caso comune — un colore OKLCH wide-gamut come `oklch(0.7 0.4 30)` risulta fuori sRGB ma dentro P3, indicando quali display lo renderizzeranno accuratamente. Il controllo gira a ogni battuta.

Algoritmo di snap con riduzione del chroma

Snap a sRGB usa una ricerca binaria sull'asse Chroma: mantiene L e H fissi ai valori correnti, cerca C ∈ [0, currentC] per il massimo C la cui conversione sRGB resta in-gamma. La ricerca esegue al massimo 30 iterazioni (precisione ~10⁻⁹), più che sufficiente per l'accuratezza visiva. Questo corrisponde all'algoritmo informativo di gamut-mapping descritto in CSS Color 4 §13 — preservare luminosità percettiva e tonalità riducendo solo il chroma mantiene il colore compresso riconoscibilmente nella stessa famiglia di tonalità. Non tagliamo direttamente i canali RGB perché questo distorce visibilmente la tonalità (specialmente nei blu).

Matrici CVD Brettel + Machado

La simulazione del daltonismo usa due famiglie di matrici pubblicate. Le tre dicromazie — protanopia, deuteranopia, tritanopia — usano matrici Brettel-Viénot-Mollon 1997 operando in linear-RGB (prima si decodifica la gamma, si applica la matrice, poi si rincodifica la gamma). Le tre tricromazie anomale — protanomalia, deuteranomalia, tritanomalia — usano matrici Machado-Oliveira-Fernandes 2009 a severità 0,66, che corrisponde a un paziente con tricromazia anomala tipico. Acromatopsia e acromatomalia parziale usano pesi di luminanza rec601 (`0.299R + 0.587G + 0.114B`) per una proiezione in scala di grigi. Tutte e otto le simulazioni vengono renderizzate a ogni cambio di colore.

WCAG 2 vs APCA: quale usare quando

WCAG 2.x (standard corrente) calcola un rapporto di contrasto simmetrico dalla luminanza relativa: `(L1 + 0.05) / (L2 + 0.05)`, con target 4,5:1 per il body text normale e 7:1 per AAA. È il minimo legale di compliance per gli audit di accessibilità nel 2026. APCA (Accessible Perceptual Contrast Algorithm) è il successore proposto in WCAG 3 — sensibile alla polarità (testo chiaro su sfondo scuro ottiene punteggio diverso da testo scuro su sfondo chiaro), meglio correlato con la leggibilità percepita, target `|Lc| ≥ 75` per il body text. Entrambe le metriche mostrate in una riga consentono al designer di superare WCAG 2 per compliance e APCA per la leggibilità reale senza saltare tra due calcolatori separati.

Best practice per la conversione dei colori

Preferire OKLCH per i token del design system; HEX per il legacy

Per qualunque nuovo design system spedito nel 2025 o successivo, si definiscano colori brand e scale di palette in OKLCH. L'asse L produce automaticamente scale percettivamente uniformi; l'asse Chroma può indirizzare colori wide-gamut che hex non può codificare. Mantenga un fallback hex per i browser più vecchi tramite `@supports not (color: oklch(0 0 0))` o PostCSS build-time, ma faccia di OKLCH il valore canonico nel proprio token store. I sistemi legacy con migliaia di variabili hex esistenti possono restare hex fino a una migrazione pianificata — non vale la pena fare churn fine a se stesso.

Trattare l'output CMYK come approssimazione, confermare con il fornitore di stampa

I numeri CMYK che questo strumento mostra derivano da una formula ingenua basata su sRGB, non da una conversione ICC. Li usi per preventivi orientativi e comp interni. Prima di qualsiasi tiratura reale, invii l'hex originale (non l'approssimazione CMYK) al fornitore di stampa e lo lasci eseguire la propria conversione ICC contro la specifica macchina, inchiostro e carta. Lo spostamento del 5-15% per canale di una conversione corretta può facilmente trasformare un rosso netto in un arancione torbido se l'approssimazione viene spedita direttamente.

Usare APCA Lc per un'accessibilità prospettica

WCAG 2.x continuerà a essere il minimo normativo per parecchi anni ancora, ma APCA è la direzione verso cui lo standard si sta muovendo. Per nuovi design, raggiunga `|Lc| ≥ 75` per il body text e `|Lc| ≥ 60` per il testo grande oltre ai minimi WCAG 2.1. APCA intercetta problemi di leggibilità che il rapporto simmetrico di WCAG 2 manca — in particolare il testo a tratto sottile su sfondi luminosi, dove il rapporto WCAG sembra ok ma il testo di fatto scompare alla normale distanza di lettura.

Passare i colori wide-gamut per il controllo gamma cromatica Display P3

Se sta puntando all'hardware Apple moderno (iPhone, iPad, MacBook dal 2017 in poi) o sta spedendo contenuti HDR-aware, definisca i colori brand in OKLCH e usi il badge Display P3 per verificare che rientrino in P3 anche se eccedono sRGB. I colori wide-gamut appaiono visibilmente più saturi sui display P3 e degradano con grazia tramite la compressione del chroma applicata dal browser sugli schermi solo-sRGB. Non faccia pre-snap a sRGB a meno di sapere che l'intera audience è su display legacy.

Scegliere tinte scure percettivamente uniformi tramite Tones OKLCH

Quando si genera una scala 50/100/200/.../900 per un colore brand, usi il pannello Tones: sposta L in incrementi uguali mantenendo C e H fissi. Il risultato è una scala percettivamente uniforme dove il salto visivo tra 400 e 500 appare identico al salto tra 500 e 600. Regolare a mano scale HSL per la stessa uniformità è un esercizio di più ore per colore; OKLCH lo offre gratis.

Usare l'Eyedropper con parsimonia per il match colore tra schede

L'EyeDropper API (solo Chromium nel 2026) consente di fare clic ovunque sullo schermo — anche fuori dal browser — per campionare il colore di quel pixel. Utile per fare match di un colore da una schermata, un fotogramma video o la UI di un'altra app. Tratti il risultato come punto di partenza, non come valore finale — il rendering dello schermo applica una gestione del colore che può differire dal file sorgente. Per i colori brand canonici, prenda sempre l'hex dalla fonte di design (Figma, Sketch, il PDF delle brand guidelines) invece di eyedropperare una schermata.

Mettere nei segnalibri URL con `#hex=...` per decisioni di palette condivisibili

Il colore corrente viene codificato automaticamente nell'hash URL come `#hex=...` o `#oklch=...`. Copi l'URL, lo incolli in un thread Slack o una issue GitHub, e chiunque lo apra atterra esattamente sullo stesso colore. Utile per i thread di design review dove "il blu brand" deve significare una specifica tripletta OKLCH. L'hash si aggiorna a ogni cambiamento, così l'URL nella barra degli indirizzi è sempre il colore corrente live — lo metta nei segnalibri per tornare a una palette specifica più tardi.

Domande frequenti