Convertitore di colori

HEX e RGB sono la stessa cosa scritta in due modi. `#663399` sono tre coppie di cifre esadecimali — 102, 51 e 153 — e `rgb(102 51 153)` sono quegli stessi numeri in decimale. La conversione non può perdere nulla, perché cambia solo la base.

HSL e HSV descrivono lo stesso colore dal punto di vista di una persona anziché di uno schermo. Invece del dosaggio di rosso, verde e blu danno la tinta come angolo su un cerchio cromatico, poi la saturazione e la luminosità. È per questo che i grafici ci ricorrono: schiarire un colore del dieci per cento è un numero in HSL e tre numeri poco leggibili in RGB.

Tutto il resto in questa pagina è un riordino degli stessi tre numeri. Il CMYK no: descrive inchiostro sulla carta, e come appare davvero una miscela di ciano, magenta, giallo e nero dipende dalla macchina, dalla carta e dal profilo colore. Nessuna formula può saperlo.

Quello che ottieni qui è la consueta conversione nominale, la stessa che fa qualsiasi strumento che offra il CMYK senza chiederti un profilo. Come punto di partenza va bene, come valore di stampa no. Se il colore conta davvero, la tipografia vorrà il codice hex e farà la separazione con il proprio profilo.

L’alfa viene mantenuto: `#663399cc`, `rgba(102, 51, 153, 0.8)` e `rgb(102 51 153 / 80%)` indicano lo stesso colore all’80% di opacità, e tutti e tre vengono letti correttamente. La forma hex a otto cifre è quella che si incontra meno e che manda in crisi più strumenti, benché sia solo quella a sei cifre con una quarta coppia per l’opacità.

In CMYK non c’è un corrispettivo, perché l’inchiostro o va sulla carta o non ci va. Quando il colore inserito è in parte trasparente, i valori CMYK lo descrivono come se fosse coprente.

Sotto le notazioni ci sono due numeri: il rapporto di contrasto del tuo colore su bianco e su nero. Vengono dalla definizione WCAG, che non è una media di luminosità — i canali sono pesati, perché l’occhio è molto più sensibile al verde che al blu, e ciascuno viene prima linearizzato.

Servono a decidere quale colore di testo mettere su uno sfondo. 4,5 è la soglia del testo corrente e 3 quella dei titoli grandi, quindi uno sfondo il cui rapporto migliore scende sotto 4,5 chiede caratteri più grandi o un altro sfondo. È il modo più rapido di scoprire che un colore aziendale che sta bene in un mockup non passerà un controllo di accessibilità.

Un colore che non si riesce a leggere viene segnalato come illeggibile invece di essere sostituito in silenzio. Sembra ovvio ed è raro: il modo consueto di costruire questa pagina è passare la stringa al browser e rileggere ciò che ha calcolato, quattro righe di codice che rispondono a `#12345` con il colore precedente.

Così una cifra mancante sembra una conversione riuscita, e te ne accorgi quando la tinta non torna altrove. Qui l’analisi è esplicita. Costa una tabella con le centoquarantotto parole chiave CSS e ti restituisce un errore invece di una risposta sbagliata ma credibile.