Informazioni: Convertitore di colori
I programmi di grafica usano l’HEX, il CSS usa RGB o HSL e la tipografia lavora in CMYK. In qualunque campo scrivi, gli altri formati si aggiornano all’istante e puoi copiare il codice CSS con la trasparenza (alfa).
Lo strumento calcola anche il rapporto di contrasto tra colore del testo e dello sfondo e indica con badge AA e AAA se le linee guida WCAG 2.1 sono rispettate: sono il riferimento delle Linee guida AgID previste dalla Legge Stanca.
Come si usa
- Tocca il grande campione in alto a sinistra per scegliere un colore, oppure scrivi un codice in uno dei campi HEX, RGB, HSL, HSV o CMYK.
- Sposta il cursore dell’opacità per ottenere l’HEX a 8 cifre e i codici rgba e hsla.
- In Rapporto di contrasto vedi il contrasto con bianco, nero e un colore a tua scelta.
- Tocca un colore della palette Più chiaro · più scuro per copiarne l’HEX, oppure copia tutto il CSS in fondo.
I formati colore
| Formato | Esempio | Significato |
|---|---|---|
| HEX | #4f46e5 | Rosso, verde e blu con due cifre esadecimali ciascuno; con 8 cifre le ultime due indicano l’opacità |
| RGB | rgb(79, 70, 229) | Ogni canale da 0 a 255 |
| HSL | hsl(243, 75%, 59%) | Tonalità (0–360°), saturazione e luminosità; facile da regolare |
| HSV (HSB) | hsv(243, 69%, 90%) | Il modello dei selettori colore di Photoshop e Figma |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Percentuali di inchiostro per la stampa |
Requisiti di contrasto WCAG
| Livello | Testo normale | Testo grande |
|---|---|---|
| AA (minimo) | almeno 4,5:1 | almeno 3:1 |
| AAA (avanzato) | almeno 7:1 | almeno 4,5:1 |
Il testo grande è di almeno 18 pt (circa 24 px) o 14 pt in grassetto (circa 18,66 px). I siti della pubblica amministrazione devono rispettare il livello AA, cioè almeno 4,5:1 per il testo normale. Il rapporto va da 1:1 (stesso colore) a 21:1 (nero su bianco).
Domande frequenti
Perché i colori stampati sono diversi da quelli a schermo?
Lo schermo mescola luce (RGB), la stampante inchiostri (CMYK): ognuno riproduce una gamma di colori diversa. Il CMYK di questo strumento deriva dalla formula di conversione semplice e sarà diverso dai valori ottenuti con un profilo come FOGRA39. Per le stampe importanti chiedi una prova colore.
Che cos’è un codice HEX a 8 cifre?
È il formato #RRGGBBAA, in cui le ultime due cifre indicano l’opacità: 80 è circa il 50%, CC l’80% e FF il 100% (opaco). Tutti i browser moderni lo supportano.
Come si calcola il contrasto di un colore trasparente?
Con la trasparenza il colore visibile dipende dallo sfondo, quindi lo strumento ignora l’opacità e calcola il contrasto sul colore pieno.
Posso scrivere il nome di un colore?
Sì. Scrivi nel campo HEX uno dei 148 nomi di colore CSS, come red, navy, skyblue o tomato.