Converti colori
Scrivi un colore in HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() o con il suo nome CSS, e ottieni HEX, RGB, HSL e HWB. Sotto trovi il rapporto di contrasto contro bianco e nero: è il numero che dice se un testo di quel colore si legge.
Il testo resta sul tuo dispositivo: nessun upload
Risultato
Incolla qualcosa qui accanto: il risultato compare mentre scrivi.
Come funziona
Convertire fra HEX e RGB è aritmetica. Quello che vale la pena guardare è il rapporto di contrasto: dice quanto due colori si distinguono per l’occhio. Sopra 4,5 un testo normale è leggibile anche da chi ci vede poco, sopra 3 lo è un testo grande, sotto no. Accettiamo le notazioni CSS con le virgole e con gli spazi, e tutti i 148 nomi dei colori CSS. Un colore semitrasparente si misura com’è sullo schermo, cioè posato sul bianco e sul nero.
Domande frequenti
- Il contrasto tiene conto della trasparenza?
- Sì. Un colore semitrasparente, come #3366cc80 o rgb(51 102 204 / 50%), si misura com’è a schermo: posato sul bianco per il numero «su bianco», sul nero per quello «su nero». Per questo transparent risulta 1 su entrambi: non si distingue da nessun fondo. Se il tuo fondo reale è un altro colore, il contrasto vero sarà diverso.
- Posso misurare il contrasto fra due colori qualsiasi?
- No: il confronto è solo con il bianco e con il nero, e sotto trovi su quale dei due il colore rende meglio. Le soglie indicate sono quelle del livello AA; il livello AAA, più severo, chiede 7 per il testo normale e 4,5 per quello grande: confrontale col numero mostrato.
- Cosa conta come «testo grande»?
- Per WCAG è grande il testo di almeno 18 punti, cioè 24 pixel CSS, oppure di almeno 14 punti in grassetto, circa 18,7 pixel. Solo lì basta un contrasto di 3; per tutto il resto, compreso il testo del corpo della pagina, la soglia resta 4,5.
- Quali notazioni riconosce?
- HEX da 3, 4, 6 o 8 cifre, con o senza cancelletto; rgb(), rgba(), hsl(), hsla() e hwb(); lab(), lch(), oklab() e oklch(); e tutti i 148 nomi dei colori CSS, come navy, coral o rebeccapurple, più transparent. Gli angoli si possono scrivere in gradi, radianti, gradi centesimali o giri. Non legge color(), color-mix() né i colori relativi: per quelli ti serve il valore in una delle notazioni sopra. Un colore lab() o oklch() più saturo di quanto lo schermo standard sappia mostrare viene riportato dentro i limiti, e sotto il risultato è scritto.
- Riconvertendo l’HSL ottengo lo stesso colore?
- Sì. HSL e HWB escono con un decimale, che basta a ritrovare esattamente lo stesso HEX: incollati di nuovo qui, o usati in un foglio di stile, danno lo stesso colore. Anche la trasparenza esce con un decimale, per la stessa ragione.
Quello che incolli non viene caricato. Da nessuna parte.
Il testo che scrivi resta nella memoria del tuo browser: nessuna richiesta parte mentre scrivi. Puoi incollare anche qualcosa di riservato.
- Elaborazione localeTutto avviene in questa pagina.
- Niente da caricare, niente da aspettareNiente da caricare, nessuna attesa.
- Niente da cancellareNon conserviamo nulla: non ci arriva nulla.