Selettore colore

Riferimento dei formati colore

Come funziona un selettore colore

Un selettore colore grafico in realtà è fatto di tre comandi che lavorano insieme. Il quadrato grande in cui si trascina il puntatore è un campo saturazione/valore a due dimensioni: spostandosi da sinistra a destra cambia quanto il colore è acceso (la saturazione), mentre spostandosi dall’alto in basso cambia quanto è chiaro o scuro (il valore, cioè la brillantezza). La striscia stretta accanto — il cursore della tonalità — sceglie il colore di base e attraversa il rosso, l’arancione, il giallo, il verde, il ciano, il blu e il magenta prima di tornare al rosso a 360°. Un terzo cursore, facoltativo, regola l’alfa (la coprenza), dal tutto trasparente al tutto pieno, di solito disegnato sopra una scacchiera per capire davvero quanto il colore lascia passare.

Questo schema fatto di quadrato più cursori si appoggia al modello HSV (tonalità, saturazione, valore) e al suo parente stretto HSL (tonalità, saturazione, luminosità), non al semplice RGB, e il motivo è umano. L’HSV corrisponde al modo in cui le persone pensano al colore: prima si decide quale colore serve — la tonalità — e poi quanto deve essere acceso e quanto chiaro. Muovere tre numeri separati da 0 a 255 per rosso, verde e blu fino a ottenere "un azzurro cielo un po’ meno intenso" è molto più difficile che trascinare il puntatore dentro un solo quadrato. Siccome il cursore tiene ferma la tonalità mentre si esplora il quadrato, il selettore può disegnare tutto il piano saturazione/valore di quella tonalità come una sfumatura continua: esattamente il campo che si vede in questa pagina.

Questa impostazione è stata resa popolare dal selettore colore di Adobe Photoshop ed è poi diventata lo standard di fatto in programmi come Figma, Sketch, GIMP e in quasi tutti i selettori del web. Le abitudini sono così radicate che quasi tutti sanno usare al volo anche un selettore mai visto prima: i colori accesi stanno in alto a destra nel quadrato, il bianco in alto a sinistra, e il nero corre lungo il bordo inferiore qualunque sia la tonalità.

Il contagocce e i selettori nativi del browser

I browser hanno già dentro di sé qualche strumento per scegliere i colori, e vale la pena sapere che cosa fa ciascuno. L’elemento HTML <input type="color"> mostra un quadratino che, cliccato, apre la finestra dei colori del sistema operativo. Il suo valore è da sempre una stringa hex minuscola di sette caratteri nella forma #rrggbb: storicamente senza canale alfa, e se non viene impostato parte da #000000. È per questo che tanti "selettori colore" semplici restituiscono solo l’hex. (I browser più recenti stanno iniziando a offrire un attributo alpha facoltativo e spazi colore più ampi, ma il semplice valore hex resta il minimo comune denominatore su cui contare ovunque.)

Il contagocce invece è una capacità diversa e più recente. La EyeDropper API permette a una pagina web di prelevare il colore di qualsiasi pixel sullo schermo: non solo dentro la pagina, ma ovunque l’utente possa vedere, altre finestre comprese. Chiamando new EyeDropper().open() il puntatore diventa una lente d’ingrandimento; la promise restituita si risolve solo dopo che l’utente ha cliccato apposta su un pixel e riporta un oggetto la cui proprietà sRGBHex contiene il colore prelevato. Per rispetto della privacy può partire solo da un gesto vero dell’utente (come il pulsante del contagocce di questo strumento), funziona solo su una connessione sicura HTTPS e non legge mai i pixel di nascosto: premendo Escape si annulla tutto. Al momento la supportano solo i browser basati su Chromium (Chrome, Edge e Opera); Firefox e Safari non l’hanno ancora, quindi uno strumento fatto bene spegne il pulsante quando l’API manca, come succede qui. Quello che si preleva non viene caricato da nessuna parte: il colore viene calcolato tutto sul tuo dispositivo.

Come gli occhi vedono davvero il colore

Il motivo per cui uno schermo riesce a imitare ogni colore con sole tre luci sta nella biologia dell’occhio. La visione umana dei colori è tricromatica: la retina contiene tre tipi di coni, ognuno sensibile a una banda diversa di lunghezze d’onda. I coni L (lunghe) hanno il picco intorno ai 560 nm e rispondono soprattutto alla luce rossastra, i coni M (medie) hanno il picco vicino ai 530 nm per la luce verdastra, e i coni S (corte) intorno ai 420 nm per la luce bluastra. Il cervello non misura direttamente la lunghezza d’onda: confronta la frequenza con cui questi tre tipi di coni si attivano e dal rapporto ricava un colore.

Da questo sistema basato sul confronto nasce una conseguenza importante, il metamerismo: due miscele di lunghezze d’onda completamente diverse possono dare la stessa risposta nei coni e quindi sembrare esattamente lo stesso colore. Un giallo puro dello spettro e una giusta miscela di luce rossa e verde sono cose fisicamente diverse, eppure l’occhio non le distingue. Gli schermi sfruttano questo fatto senza ritegno: mescolando solo sub-pixel rossi, verdi e blu ricreano un metamero di quasi ogni colore che l’occhio sa riconoscere, ed è proprio per questo che il modello RGB sta alla base di ogni schermo e di ogni selettore colore.

Con 8 bit per canale uno schermo offre 256 livelli di rosso, 256 di verde e 256 di blu: 256 × 256 × 256 ≈ 16,7 milioni di combinazioni. L’occhio distingue nell’ordine di dieci milioni di colori, quindi per il lavoro normale su schermo questa profondità detta "truecolor" va già oltre quello che quasi tutti riescono a percepire, e le fasce visibili sono rare. Una curiosità utile: l’occhio è nettamente più sensibile al verde che al rosso o al blu — i coni L e M fanno la parte del leone mentre i coni S sono solo una piccola parte del totale — ed è per questo che il verde pesa di più sulla brillantezza percepita e che i verdi medi possono sembrare così intensi nel selettore.

Quale formato colore conviene copiare?

Un selettore serve davvero solo se restituisce il colore nella notazione che serve alla destinazione. L’hex (#rrggbb, oppure #rrggbbaa con l’alfa) è la moneta corrente del web — corto, comodo da copiare e incollare e accettato ovunque — ma è difficile da leggere: nessuno guarda #5b8cff e capisce che è un azzurro. rgb() / rgba() mostrano gli stessi numeri in decimale e tornano comodi quando si mescolano colori o si scrive codice. hsl() / hsla() sono i più comodi da modificare a mano nel CSS, perché cambiando solo la luminosità il colore si schiarisce o si scurisce in modo prevedibile senza rovinarne la tonalità.

Oltre a questi, il CSS moderno aggiunge diverse funzioni più nuove. hwb() (tonalità, quantità di bianco, quantità di nero) descrive un colore come una tonalità di base schiarita con un po’ di bianco e scurita con un po’ di nero: un modello alla maniera dei pittori, che però resta nello spazio sRGB insieme a HSL. Più importante ancora, lab() e lch() usano lo spazio CIELAB, che non dipende dal dispositivo, e oklab() / oklch() usano lo spazio Oklab. Il vantaggio principale di Oklab e OkLCh è che sono uniformi per la percezione: uno stesso passo numerico produce un cambiamento che appare più o meno uguale in qualunque punto dello spazio dei colori. Per questo sono ottimi per creare palette a passi regolari, sfumature senza "zone morte" grigiastre e scale di luminosità prevedibili — ed è il motivo per cui oklch() viene consigliato sempre più spesso per le scale di colore dei sistemi di design.

Per quasi tutto il lavoro quotidiano sul web conviene copiare l’hex o rgb(); si passa a hsl() quando si vuole ritoccare a mano, e a oklch() o lab() quando si costruisce una palette ordinata e servono passi uguali all’occhio. (Le prime tre righe qui sopra mostrano il colore attuale di questa pagina; le righe più in basso mostrano la notazione delle funzioni, non la conversione esatta dello stesso valore.)

Progettare pensando al daltonismo e al contrasto

Scegliere un colore che piace non è la stessa cosa che sceglierne uno che funziona per tutti. Circa l’8% degli uomini e lo 0,5% delle donne di origine nordeuropea ha una qualche forma di difficoltà nella visione dei colori, perché i tipi più comuni dipendono da geni che stanno sul cromosoma X. La grande maggioranza riguarda la coppia rosso–verde — la deuteranomalia, cioè una risposta al verde spostata, è la forma singola più comune — e rende facile confondere rossi, verdi, marroni e arancioni. La difficoltà blu–gialla (tritan) esiste ma è rara. La lezione pratica è la vecchia regola dell’accessibilità: "non affidarsi al colore da solo". Il colore non deve mai essere l’unico modo per trasmettere un significato. Un messaggio di errore rosso va accompagnato da un’icona o da una scritta, le serie di un grafico vanno distinte anche con trame o scritte vicine, e i link vanno sottolineati oltre che colorati.

La leggibilità è l’altra metà del problema, e qui ci sono numeri precisi. Le Web Content Accessibility Guidelines (WCAG) definiscono un rapporto di contrasto fra il testo e il suo sfondo e, al livello AA che si usa quasi sempre, chiedono almeno 4,5:1 per il testo di dimensione normale e 3:1 per il testo grande (all’incirca 18pt, o 14pt in grassetto), oltre che per i comandi dell’interfaccia e le immagini che portano un significato. Quindi, quando questo selettore restituisce un valore hex per il testo di un paragrafo, la vera domanda non è "è bello?" ma "supera il 4,5:1 rispetto allo sfondo?". Una buona abitudine è scegliere il colore qui e poi controllare la coppia in un verificatore di contrasto dedicato prima di adottarla.

Un metodo per scegliere i colori che regge nel tempo

Scegliere un bel colore è facile; restare coerenti in tutto un progetto è il punto in cui un selettore si ripaga. Un metodo ripetibile funziona così. Primo, catturare: usare il contagocce per prendere il colore esatto di un marchio da un logo, da uno screenshot o da un’immagine di riferimento invece di andare a occhio, così il valore è preciso al pixel. Secondo, fissare i punti fermi: scegliere un piccolo gruppo di colori principali (uno primario, uno secondario, un neutro e un paio di colori di accento) e salvarli con Aggiungi alla palette, per non doverli ricavare ogni volta a memoria. Terzo, ampliare: partendo da quei punti fermi, generare le tinte e le ombre che servono per gli stati al passaggio del mouse, i bordi e gli sfondi, tenendo ferma la tonalità così che la famiglia resti coerente. Quarto, esportare: portare fuori l’insieme finito come proprietà personalizzate CSS (--color-1, --color-2, …) o come JSON, così gli stessi valori guidano ogni pagina e ogni componente.

La trasparenza merita un discorso a parte. Conviene usare l’alfa invece di un colore pieno mescolato a mano ogni volta che serve una velatura, una leggera sfumatura di colore o una tinta che si adatti a quello che ha dietro: un velo rgba(0, 0, 0, 0.5) sopra un’immagine resta giusto qualunque sia l’immagine, mentre un grigio fisso no. Siccome questo strumento tiene la cronologia e la palette nella memoria locale del browser, si può chiudere la scheda e ritrovare più tardi lo stesso gruppo di colori, per poi copiare qualsiasi campione direttamente nel foglio di stile. L’obiettivo è avere una sola fonte di verità per il colore, che vive nei token di design, invece di stringhe hex sparse e ricopiate in mezzo ai file.

Errori comuni nella scelta dei colori

Ci sono pochi errori che tornano di continuo. Il primo è trattare l’hex come se dicesse tutto: un codice hex non dice niente a colpo d’occhio sulla luminosità o sulla tonalità di un colore, quindi modificarlo direttamente in hex porta facilmente fuori strada. Meglio passare a HSL o a HSV quando si vuole ragionare su un colore, e tenere l’hex per conservarlo. Il secondo è dimenticarsi dell’alfa: scordare che #000000 e un nero al 50% di coprenza si comportano in modo del tutto diverso, oppure fissare come colore pieno un effetto che in realtà era semitrasparente, che poi non funziona più su uno sfondo diverso.

Il terzo, e il più pesante, è scegliere coppie a basso contrasto perché sembrano eleganti su un monitor luminoso e ben tarato. Un testo grigio chiaro su bianco può sparire su un telefono al sole e non passa le WCAG: il rapporto va sempre controllato. Il quarto è dare per scontato che il colore sullo schermo sia uguale a quello stampato: i monitor emettono luce RGB, mentre la stampa mescola inchiostri CMYK sulla carta, e le due gamme non coincidono. Un blu acceso o un verde fluo dello schermo spesso non si possono riprodurre con l’inchiostro, quindi i colori destinati alla stampa vanno provati in un flusso di lavoro CMYK invece di fidarsi dello schermo. Infine, non salvare i propri colori fa perdere tempo: ricavare lo stesso blu del marchio cinque volte a settimana garantisce cinque blu leggermente diversi. Meglio prenderlo una volta, salvarlo in una palette, esportarlo come token e riusarlo ovunque.