Convertitore e selettore di colori
HEX, RGB, HSL — e il controllo del contrasto
Dati di partenza
Risultato
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
Tinte e sfumature (clicca per passare a quel colore)
WCAG: il testo normale richiede 4,5:1 (AA), 7:1 per il livello AAA. Il CMYK è solo indicativo — non tiene conto dei profili colore.
I programmi di grafica parlano HEX, le animazioni CSS vogliono HSL e il codice canvas vuole i canali RGB. Scegli un colore una volta sola e ottieni ogni notazione, insieme ai valori di contrasto che decidono se il testo sopra sarà leggibile.
Come si usa
- 1 Scegli un colore, oppure incolla un codice in qualsiasi formato.
- 2 Tutte le altre notazioni compaiono insieme.
- 3 Usa la scala di tinte e sfumature per costruire una palette coerente.
- 4 Controlla i rapporti di contrasto prima di usarlo dietro del testo.
Domande frequenti
Quale rapporto di contrasto mi serve?
Le WCAG di livello AA richiedono 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA chiede 7:1. Sotto il 3:1 il testo è davvero difficile da leggere per molte persone, non semplicemente poco ottimale.
Perché usare HSL invece di HEX?
L’HSL separa la tinta dalla saturazione e dalla luminosità, quindi rendere un colore più chiaro del 10% è un solo numero invece che una stima su tre canali. È per questo che i sistemi di design costruiscono le loro scale in HSL.
Il valore CMYK è utilizzabile per la stampa?
Solo come indicazione di massima. La conversione reale dipende dalla carta, dagli inchiostri e dal profilo colore. Per tutto ciò che va in tipografia, fatti dare i valori dallo stampatore invece che da una formula.