Convertitore di colori
Converti un colore tra HEX, RGB, HSL, HSV e CMYK e verifica se due colori hanno contrasto sufficiente per un testo leggibile.
Funziona interamente nel tuo browser
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Nome CSS
Verifica del contrasto
Rapporto di contrasto –
| Uso | Richiede | Risultato |
|---|---|---|
| Testo normale, AA | 4.5:1 | |
| Testo normale, AAA | 7:1 | |
| Testo grande, AA | 3:1 | |
| Testo grande, AAA | 4.5:1 | |
| Icone ed elementi dell'interfaccia, AA | 3:1 |
Legge HEX (3, 4, 6 o 8 cifre), rgb(), hsl(), hsv(), cmyk() e i nomi dei colori CSS; altre sintassi di colore CSS vengono lette dal tuo browser dove possibile. HSL, HSV e CMYK sono mostrati con una cifra decimale.
Come convertire un colore
- Scrivi o incolla un colore in un formato comune, come
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)onavy, oppure sceglilo con il selettore di colore. - Copia dall'elenco il formato che ti serve. I valori si aggiornano mentre scrivi.
- Sotto Verifica del contrasto, inserisci un colore del testo e un colore di sfondo per vedere il loro rapporto di contrasto e se superano WCAG AA e AAA.
Formati di colore e contrasto
HEX e RGB descrivono un colore dello schermo come quantità di rosso, verde e blu da 0 a 255; HEX scrive semplicemente ogni quantità come due cifre esadecimali, con una terza coppia facoltativa per l'opacità. HSL e HSV descrivono gli stessi colori tramite tonalità (un angolo sulla ruota dei colori), saturazione e luminosità o valore, il che rende più facile scegliere una versione più chiara o più spenta di un colore. Sono coordinate diverse per gli stessi colori sRGB, quindi la conversione tra loro è esatta a parte l'arrotondamento.
Il CMYK è diverso: descrive l'inchiostro, e la vera conversione dipende dal processo di stampa. Il valore mostrato è la formula ingenua (il nero è 1 meno il canale più luminoso, e gli altri inchiostri completano il resto), utile per lavori approssimativi ma non un sostituto di un profilo di stampa.
La verifica del contrasto applica la formula di contrasto WCAG 2, quella usata negli audit di accessibilità e dagli strumenti per sviluppatori dei browser. Misura solo il contrasto di luminanza, quindi non può dirti nulla sulle coppie problematiche per il daltonismo come rosso su verde, e i caratteri molto sottili o piccoli possono richiedere più contrasto del minimo.
Suggerimenti
- Ti serve il colore di un pixel in una foto o in uno screenshot? Usa il Selettore colore da immagine.
- Crei un QR code con i colori del tuo marchio? Il Generatore di QR code avvisa quando il contrasto è troppo basso per la scansione.
- Converti numeri esadecimali che non sono colori? Prova il Convertitore di basi numeriche.
Domande frequenti
Il valore CMYK è adatto alla stampa?
Solo approssimativamente. Il CMYK qui è la formula semplice che converte l'RGB dello schermo senza profilo colore, quella usata dalla maggior parte dei convertitori online. Le stampanti lavorano con inchiostri e carta specifici, descritti da un profilo ICC, quindi per la stampa converti nel software di grafica con il profilo fornito dalla tua tipografia.
Come si calcola il rapporto di contrasto?
Con la formula WCAG 2: la luminanza relativa di ciascun colore si ricava dai suoi valori sRGB e il rapporto è (più chiaro + 0,05) diviso (più scuro + 0,05). Va da 1:1 (nessun contrasto) a 21:1 (nero su bianco). Il testo WCAG attuale usa nella formula una soglia di 0,04045; le copie più vecchie riportavano 0,03928, che dà lo stesso risultato per ogni colore a 8 bit.
Quali rapporti richiedono AA e AAA?
Il testo normale richiede 4,5:1 per AA e 7:1 per AAA. Il testo grande, cioè almeno 24 px normale o circa 18,7 px in grassetto, richiede 3:1 per AA e 4,5:1 per AAA. Icone, bordi dei campi e altri elementi dell'interfaccia richiedono 3:1 (WCAG 1.4.11). Un rapporto non viene arrotondato per eccesso: 4,49:1 non supera AA per il testo normale.
Cosa succede con i colori trasparenti?
Un colore del testo parzialmente trasparente viene prima miscelato con lo sfondo, come lo mostra uno schermo, e si misura il colore risultante. Uno sfondo parzialmente trasparente si presume appoggiato sul bianco. I canali vengono arrotondati a numeri interi dopo la miscelazione, come li mostrerebbe un display.
Perché i valori HSL cambiano leggermente dopo la riconversione?
I colori dello schermo hanno 256 livelli per canale, quindi la maggior parte dei valori HSL e HSV non cade esattamente su uno di essi. Il convertitore mantiene internamente la precisione piena e arrotonda solo per la visualizzazione: HEX e RGB a numeri interi, HSL, HSV e CMYK a una cifra decimale.
Conosce i nomi dei colori CSS?
Sì, tutti i 148 colori con nome in CSS, come rebeccapurple e cornflowerblue. Digita un nome per convertirlo; quando un colore corrisponde esattamente a un nome, viene mostrato anche il nome. Alcuni colori hanno due nomi, come aqua e cyan.