Come si usa
- Inserisci o incolla un colore, ad esempio #1e90ff, rgb(30 144 255) o oklch(65% 0.18 250). Puoi anche fare clic sul selettore colore.
- Controlla il campione per verificare che il colore sia quello desiderato.
- Copia dall'elenco il formato che ti serve. I valori con trasparenza mantengono il loro alpha.
Come funziona
Formati accettati: HEX con 3, 4, 6 o 8 cifre (la 4ª e l'8ª cifra indicano l'alpha), rgb() e rgba() con numeri o percentuali, hsl() e hsla(), hwb(), oklch() e cmyk() con percentuali o numeri da 0 a 100. Sono supportate sia la sintassi classica con virgole sia quella moderna con spazi e “/ alpha”. La tonalità accetta deg, turn, rad e grad. I nomi dei colori, come “tomato”, non vengono riconosciuti: usa il selettore o inserisci un codice.
Tutte le conversioni passano per sRGB. HSL e HWB sono semplici riformulazioni dei valori RGB, quindi la conversione è esatta. OKLCH è uno spazio percettivo: a incrementi uguali di luminosità corrispondono differenze visive approssimativamente uguali, caratteristica utile per creare palette. Il calcolo usa le matrici OKLab pubblicate. Alcuni colori OKLCH sono fuori dalla gamma visualizzabile in sRGB; lo strumento lo segnala e mostra il colore visualizzabile più vicino.
CMYK viene calcolato con la formula semplificata comune (K = 1 − il canale RGB più alto). Il risultato di una stampa reale dipende dalla carta, dall'inchiostro e dal profilo ICC: considera quindi questi valori un punto di partenza, non una specifica di stampa.
Esempi
Dal codice HEX del brand ai CSS
Una guida di stile indica #0b5d1e. Incollalo per ottenere rgb(11, 93, 30), utile per i CSS meno recenti, hsl(133.9, 78.8%, 20.4%) per regolare manualmente la luminosità e un valore oklch() per le moderne funzioni colore CSS.
Interpretare un colore con trasparenza
rgba(0, 0, 0, 0.5) viene convertito in #00000080. Le ultime due cifre HEX (80) indicano l'alpha: 128 su 255, circa il 50 %.
Verificare un valore OKLCH da un file di design
oklch(70% 0.4 150) è un verde molto saturo, non riproducibile dagli schermi sRGB. Lo strumento lo segnala e indica il colore sRGB più vicino, così sai che il design apparirà diverso sulla maggior parte degli schermi.
Domande frequenti
Perché a volte convertendo in HSL e poi di nuovo in HEX cambia una cifra?
HEX memorizza valori interi da 0 a 255 per ogni canale. I valori negli altri formati vengono arrotondati per la visualizzazione (HSL a un decimale); riconvertire un valore arrotondato può dare un risultato diverso di un'unità. Copia il valore HEX se ti serve l'originale esatto.
Il valore CMYK è corretto per la stampa?
No, non da solo. Usa una formula semplice, senza profilo colore. Le stampanti usano profili come FOGRA o GRACoL, che producono valori diversi: chiedi alla tipografia oppure converti il colore con un'applicazione con gestione del colore.
Che cos'è OKLCH e posso usarlo nei CSS?
OKLCH descrive un colore in base alla luminosità percepita, alla cromaticità (intensità del colore) e alla tonalità. Le versioni attuali dei principali browser supportano oklch() nei CSS. Se devi supportare browser meno recenti, prevedi un valore HEX o rgb() di fallback.
Che cosa significa un codice HEX a 8 cifre?
#RRGGBBAA: le ultime due cifre indicano l'opacità, da 00 (completamente trasparente) a ff (completamente opaco). La forma a 4 cifre #RGBA funziona allo stesso modo, con una cifra per canale.
Privacy
I colori vengono convertiti nel browser. Ciò che inserisci non viene inviato né memorizzato.