Nomi dei colori CSS

Da dove arrivano i 148 nomi dei colori CSS

La maggior parte dei nomi deriva dalla vecchia palette del sistema grafico X11 degli anni '80, adottata poi dai browser e ufficializzata nel modulo CSS Color. Per questo convivono nomi poetici come papayawhip e mistyrose accanto ai classici red e blue. Il colore numero 148, rebeccapurple (#663399), è stato aggiunto nel 2014 in memoria di Rebecca, la figlia dello sviluppatore web Eric Meyer, scomparsa a sei anni: è l'unico nome nato direttamente dalla comunità del web.

Quando usare i nomi e quando i codici hex

I nomi sono comodi per prototipi, esempi e didattica: tomato si ricorda meglio di #ff6347. In produzione conviene però l'hex, che copre 16,7 milioni di sfumature contro 148. Attenzione ai doppioni: gray e grey (e tutte le varianti) sono lo stesso colore, così come aqua/cyan e fuchsia/magenta. E occhio a darkgray, che paradossalmente è più chiaro di gray: un'eredità storica di X11.

Nomi che vengono da un'epoca diversa

L'elenco nasce dai colori dei terminali X11 degli anni Ottanta, scelti da programmatori con i nomi che avevano in testa: da lì arrivano stranezze come «papayawhip», «lemonchiffon» e «peachpuff», che descrivono dolci più che colori.

Ci sono anche coppie contraddittorie rimaste per compatibilità: «darkgray» è più CHIARO di «gray», perché i due nomi vengono da tabelle diverse fusesi male. È il classico dettaglio che non si può correggere, perché migliaia di pagine ci contano da trent'anni.

Le doppie grafie e i sinonimi

Alcuni colori hanno due scritture entrambe valide, quella americana e quella britannica: gray/grey, e tutte le loro famiglie (darkgray/darkgrey, lightslategray/lightslategrey). Sono lo stesso colore, e la scelta è solo di gusto.

Ci sono poi coppie di nomi diversi per lo stesso identico valore: aqua e cyan sono entrambi #00FFFF, fuchsia e magenta entrambi #FF00FF. Se una guida di stile chiede coerenza, va deciso quale usare, perché un cerca-e-sostituisci sui codici non li trova.

Quando conviene il nome e quando il codice

I nomi sono comodi per prototipi, esempi e insegnamento: «tomato» si legge e si ricorda meglio di #FF6347, e in un pezzo di codice da spiegare vale più della precisione. Fuori da lì, il nome è una scelta bloccata: non si può schiarire di un soffio.

In un progetto vero conviene passare alle variabili CSS: si dichiara il colore una volta e lo si usa per nome proprio del progetto («--accento»), non per nome del colore. Così cambiare tinta è una riga sola, e i temi chiaro e scuro diventano possibili.

Strumenti vicini

Per passare da un nome al suo codice e viceversa c'è Convertitore colori, e per prendere un colore da un'immagine Selettore di colori. La leggibilità di una coppia si verifica con Verifica contrasto colori.