Convertitore di colori
Converti colori tra HEX, RGB, HSL e OKLCH con anteprima live
Su questo strumento
Inserisci un colore in qualsiasi notazione comune — #hex, rgb(), hsl() o un colore CSS con nome — e ottieni tutti i formati insieme: HEX, RGB, HSL e OKLCH, accanto a un campione dal vivo. I canali alfa sono preservati tra i formati e l’output usa la sintassi CSS moderna (canali separati da spazio) che si incolla pulita nei fogli di stile attuali.
OKLCH è incluso perché è la direzione in cui sta andando il colore in CSS: a differenza di HSL, il suo asse di luminosità è percettivamente uniforme, quindi due colori con la stessa L appaiono davvero ugualmente luminosi, e regolare la tinta non cambia per sbaglio la luminosità percepita. Convertire una palette esistente in OKLCH è il primo passo per costruire scale di colore coerenti.
La matematica di conversione gira localmente usando le trasformazioni pubblicate sRGB↔OKLab, e i valori fanno il giro completo: l’RGB che ottieni da un input HSL è esattamente ciò che calcolerebbe il browser.
Domande frequenti
- Perché i valori di luminosità di HSL e OKLCH non coincidono?
- La lightness di HSL è una proprietà geometrica dei valori RGB, non della visione umana — il giallo hsl(60 100% 50%) appare molto più luminoso del blu hsl(240 100% 50%) nonostante la L identica. L’asse L di OKLCH è progettato per corrispondere alla percezione, quindi L uguale significa luminosità apparente uguale. Quel disaccordo è l’intera ragione per cui OKLCH esiste.
- Cosa significa il valore alfa e dove va in ciascun formato?
- Alfa è l’opacità, da 0 (trasparente) a 1 (opaco). Nell’hex a 8 cifre è l’ultimo byte (#RRGGBBAA); nella sintassi funzionale moderna segue una barra: rgb(76 141 255 / 0.5). Questo convertitore trasporta l’alfa attraverso ogni formato automaticamente.
- Ogni colore OKLCH può essere mostrato in sRGB?
- No — OKLCH copre gamut ampi e alcune combinazioni di chroma/luminosità non hanno equivalente sRGB. Convertendo da sRGB (come fa questo strumento) si resta sempre rappresentabili; nell’altro verso, i colori fuori gamut vanno clippati o mappati, ed è per questo che un verde P3 vivido appare più spento su uno schermo sRGB.
- Perché rgb(76 141 255) con gli spazi invece delle virgole?
- CSS Color Module Level 4 ha standardizzato i canali separati da spazio con un /alpha opzionale, e ogni browser moderno lo supporta. La forma con le virgole funziona ancora, ma quella con gli spazi è ciò che usano le nuove specifiche (e questo strumento).