Selettore colori

Ogni colore di questa pagina è espresso in sRGB, lo spazio colore predefinito del web da quando i browser lo hanno adottato, alla fine degli anni Novanta. Uno schermo mescola luce rossa, verde e blu, e ogni canale ha 256 livelli (0–255), per un totale di 16.777.216 colori possibili. RGB scrive direttamente questi tre numeri; HEX scrive gli stessi tre numeri in base 16, con due cifre ciascuno, quindi #FF6600 è rosso 255, verde 102, blu 0. La forma abbreviata a tre cifre raddoppia ogni cifra: #F60 equivale a #FF6600.

HSL e HSB (detto anche HSV) descrivono gli stessi colori in un modo più facile da regolare a mano. La tinta è un angolo sulla ruota dei colori: 0° rosso, 120° verde, 240° blu. La differenza sta nell'ultimo numero. In HSL, una luminosità del 100% è sempre bianco e il 50% è la versione più pura della tinta; in HSB, una luminosità del 100% è la tinta pura e per ottenere il bianco serve una saturazione dello 0%. Applicazioni di design come Photoshop e Figma usano HSB nei selettori, mentre CSS comprende hsl() in modo nativo, ed ecco perché sopra sono elencati entrambi.

Gli schermi aggiungono luce; le stampanti la sottraggono con inchiostri ciano, magenta, giallo e nero. I due sistemi coprono intervalli di colore diversi, detti gamut. I colori molto saturi dello schermo, come un verde RGB brillante, un blu elettrico o un arancione fluo, sono fuori da ciò che gli inchiostri di quadricromia riescono a riprodurre, quindi in stampa risultano più spenti rispetto al monitor.

I valori CMYK qui indicati usano la semplice conversione matematica senza profilo ICC: vanno bene come indicazione di massima, ma non per la stampa tipografica. Una tipografia converte con un profilo adatto alla propria carta e macchina da stampa, come FOGRA39 in Europa o GRACoL negli Stati Uniti, e lo stesso colore RGB può dare percentuali di inchiostro diverse con ciascuno. Per i lavori di stampa, invii il valore RGB o HEX insieme al profilo richiesto dalla tipografia.

WCAG 2.1 confronta la luminanza relativa di due colori: quella del più chiaro più 0,05, divisa per quella del più scuro più 0,05. Il risultato va da 1:1 (colori identici) a 21:1 (nero su bianco). Il livello AA richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande, cioè da 18 punti o da 14 punti in grassetto; il livello AAA porta questi valori a 7:1 e 4,5:1. Gli elementi dell'interfaccia, come i bordi dei campi e le icone, richiedono 3:1 rispetto allo sfondo secondo il criterio di successo 1.4.11.

La luminanza dà al verde un peso molto maggiore che al blu, perché è il colore a cui l'occhio è più sensibile. Per questo il testo giallo su bianco fallisce nettamente mentre il blu scuro su bianco passa senza problemi, anche se entrambi i colori sembrano pienamente saturi. I loghi e il testo puramente decorativo sono esclusi dalla regola.

La tavolozza dell'immagine legge il file con il canvas del browser, lo riduce a un massimo di 200 pixel sul lato lungo e raggruppa i pixel simili con il metodo median cut descritto da Paul Heckbert nel 1982: l'intervallo di colori viene diviso più volte lungo il canale più ampio finché restano sei gruppi, e la media di ciascun gruppo diventa un campione. I pixel trasparenti vengono ignorati, quindi un logo su sfondo trasparente restituisce i colori del logo.

Una volta ottenuti i colori, un logo piatto spesso funziona meglio come vettoriale. Il convertitore da immagine a SVG lo traccia in forme che mantengono questi colori esatti, e se sta progettando l'intestazione di un canale, il ridimensionatore di banner YouTube adatta la grafica a 2560 × 1440 tenendo conto dell'area sicura.