Colori Web

I colori Web sono colori utilizzati per la visualizzazione di pagine Web e i metodi per descrivere e specificare tali colori. I colori possono essere specificati come una tripletta RGB o in formato esadecimale (una tripletta esadecimale) o in base al loro nome comune inglese in alcuni casi. Uno strumento a colori o un altro software di grafica viene spesso utilizzato per generare valori di colore. In alcuni casi, i codici colore esadecimali sono specificati con la notazione utilizzando un numero iniziale (#). Un colore è specificato in base all’intensità delle sue componenti rosse, verdi e blu, ciascuna rappresentata da otto bit. Pertanto, ci sono 24 bit usati per specificare un colore web all’interno della gamma sRGB e 16.777.216 colori che possono essere specificati.

I colori al di fuori della gamma sRGB possono essere specificati in Cascading Style Sheets rendendo uno o più componenti rossi, verdi e blu negativi o superiori al 100%, quindi lo spazio colore teoricamente è un’estrapolazione illimitata di sRGB simile a scRGB. Specificare un colore non-sRGB in questo modo richiede la chiamata della funzione RGB (); è impossibile con la sintassi esadecimale (e quindi impossibile nei documenti HTML legacy che non usano CSS).

Le prime versioni di Mosaic e Netscape Navigator utilizzavano i nomi dei colori X11 come base per i loro elenchi di colori, poiché entrambi venivano avviati come applicazioni X Window System. I colori Web hanno una definizione colorimetrica non ambigua, sRGB, che mette in relazione le cromaticità di un particolare set di fosfori, una data curva di trasferimento, un punto di bianco adattivo e condizioni di visualizzazione. Questi sono stati scelti per essere simili a molti monitor e condizioni di visualizzazione reali, al fine di consentire al rendering di essere abbastanza vicino ai valori specificati anche senza la gestione del colore. Gli agenti utente variano nella fedeltà con cui rappresentano i colori specificati. Agenti utente più avanzati utilizzano la gestione del colore per fornire una migliore fedeltà del colore; questo è particolarmente importante per le applicazioni Web-to-print.

Tripletta esagonale
Una tripletta esadecimale è un numero esadecimale di sei cifre e tre byte utilizzato in HTML, CSS, SVG e altre applicazioni di calcolo per rappresentare i colori. I byte rappresentano i componenti rosso, verde e blu del colore. Un byte rappresenta un numero compreso tra 00 e FF (in notazione esadecimale) o tra 0 e 255 in notazione decimale. Questo rappresenta il minimo (0) per la più (255) intensità di ciascuna delle componenti del colore. Pertanto, i colori Web specificano i colori nella combinazione di colori True Color (24-bit RGB). La tripletta esadecimale è formata concatenando tre byte in notazione esadecimale, nel seguente ordine:

Byte 1: valore rosso (tipo di colore rosso)
Byte 2: valore verde (colore tipo verde)
Byte 3: valore blu (tipo di colore blu)
Ad esempio, si consideri il colore in cui i valori rosso / verde / blu sono numeri decimali: rosso = 36, verde = 104, blu = 160 (un colore grigio-blu). I numeri decimali 36, 104 e 160 sono equivalenti ai numeri esadecimali 24, 68 e A0 rispettivamente. La tripletta esadecimale si ottiene concatenando le 6 cifre esadecimali insieme, 2468A0 in questo esempio.

Se uno qualsiasi dei tre valori di colore è inferiore a 10 esadecimale (16 decimale), deve essere rappresentato con uno zero iniziale in modo che la tripletta abbia sempre esattamente sei cifre. Ad esempio, la tripletta decimale 4, 8, 16 sarebbe rappresentata dalle cifre esadecimali 04, 08, 10, formanti la tripletta esadecimale 040810.

Il numero di colori che possono essere rappresentati da questo sistema è 166 o 2563 o 224 = 16.777.216.

Forma esadecimale di stenografia
Viene utilizzato un modulo a tre cifre (esadecimale) abbreviato. Espandere questo modulo per il modulo a sei cifre è semplice come raddoppiare ogni cifra: 09C diventa 0099CC come presentato nel seguente esempio CSS:

.threedigit {color: # 09C; }
.sixdigit {color: # 0099CC; } / * stesso colore di sopra * /
Il modulo a tre cifre è descritto nelle specifiche CSS, non in HTML. Di conseguenza, la forma a tre cifre in un attributo diverso da “stile” non viene interpretata come un colore valido in alcuni browser.

Questa forma abbreviata riduce la tavolozza a 4.096 colori, equivalenti a colori a 12 bit anziché a 24 bit utilizzando l’intero modulo a sei cifre (16.777.216 colori), questa limitazione è sufficiente per molti documenti basati su testo.

Conversione da RGB a esadecimale
Vedi anche: Conversione esadecimale §
I valori RGB sono solitamente indicati nell’intervallo 0-255; se sono nell’intervallo 0-1, i valori vengono moltiplicati per 255 prima della conversione. Questo numero diviso per sedici (divisione intera, ignorando ogni resto) ci dà la prima cifra esadecimale (tra 0 e F, dove le lettere da A a F rappresentano i numeri da dieci a quindici. Vedi esadecimale per maggiori dettagli). Il resto ci dà la seconda cifra esadecimale. Ad esempio il valore RGB 201 divide in dodici gruppi di sedici, quindi la prima cifra è C. Un resto di nove ci dà il numero esadecimale C9. Questo processo viene ripetuto per ciascuno dei tre valori di colore.

La conversione tra le basi numeriche è una caratteristica comune delle calcolatrici, compresi i modelli portatili e le calcolatrici software in bundle con i più moderni sistemi operativi. Sono inoltre disponibili strumenti basati sul Web specifici per la conversione dei valori di colore.

Nomi di colori X11

Un numero di colori è definito dai browser web. Un particolare browser potrebbe non riconoscere tutti questi colori, ma a partire dal 2005 tutti i browser grafici moderni ad uso generale supportano l’elenco completo dei colori. Molti di questi colori provengono dall’elenco dei nomi dei colori X11 distribuiti con il sistema X Window. Questi colori sono stati standardizzati da SVG 1.0 e sono accettati dagli agenti utente completi di SVG. Non fanno parte di SVG Tiny.

L’elenco dei colori forniti con il prodotto X11 varia tra le implementazioni e si scontra con alcuni nomi HTML come il verde. I colori X11 sono definiti come semplici RGB (quindi, nessun particolare spazio colore), piuttosto che sRGB. Ciò significa che l’elenco di colori trovato in X11 (ad esempio, in /usr/lib/X11/rgb.txt) non dovrebbe essere usato direttamente per scegliere i colori per il web.

L’elenco di web “X11 colors” dalla specifica CSS3, insieme ai loro equivalenti esadecimali e decimali, è mostrato sotto. Confronta gli elenchi alfabetici negli standard W3C. Ciò include i sinonimi comuni: aqua (nome standard HTML4 / CSS 1.0) e ciano (nome sRGB comune), magenta (nome comune sRGB) e fucsia (nome standard HTML4 / CSS 1.0), grigio (nome standard HTML4 / CSS 1.0) e grigio.

Colori sicuri per il Web
Agli albori dell’informatica, molti display erano in grado di visualizzare solo 256 colori. Questi possono essere dettati dall’hardware o modificabili da una “tavola dei colori”. Quando viene trovato un colore (ad esempio, in un’immagine) che non è disponibile, è necessario utilizzare uno diverso. Questo può essere fatto usando il colore più vicino, accelerando il tempo di caricamento, o usando il dithering, che si traduce in risultati più accurati ma richiede più tempo per caricare a causa dei calcoli complessi.

Ci sono stati vari tentativi di creare una tavolozza di colori “standard”. Era necessario un set di colori che potesse essere mostrato senza dithering sui display a 256 colori; il numero 216 fu scelto in parte perché i sistemi operativi dei computer usavano riservare da sedici a venti colori per uso personale; è stato selezionato anche perché consente esattamente sei tonalità equispaziate di rosso, verde e blu (6 × 6 × 6 = 216), ciascuna da 00 a FF (compresi entrambi i limiti).

L’elenco dei colori è presentato come se avesse proprietà speciali che li rendono immuni al dithering. In realtà, tuttavia, su schermi a 256 colori le applicazioni possono impostare una tavolozza di qualsiasi selezione di colori che scelgono, dithering il resto. Questi colori sono stati scelti in modo specifico perché corrispondono alle palette selezionate da varie applicazioni del browser. Non c’erano palette molto diverse in uso in diversi browser.

I colori “sicuri per il Web” avevano un difetto in questo, su sistemi come X11 in cui la tavolozza è condivisa tra applicazioni, cubetti di colore più piccoli (5 × 5 × 5 o 4 × 4 × 4) sono stati assegnati dai browser “i colori farebbero il dither su questi sistemi. Risultati diversi sono stati ottenuti fornendo un’immagine con una gamma più ampia di colori e consentendo al browser di quantizzare lo spazio colore se necessario, piuttosto che subire la perdita di qualità di una doppia quantizzazione.

A partire dal 2011, i personal computer hanno tipicamente 24 bit (TrueColor) e l’uso di colori “sicuri per il web” è caduto in disuso pratico.

I colori “sicuri per il web” non hanno tutti nomi standard, ma ciascuno può essere specificato da una tripletta RGB: ogni componente (rosso, verde e blu) prende uno dei sei valori dalla seguente tabella (tra i 256 possibili valori disponibili per ciascun componente in pieno colore a 24 bit).

Colori Web più sicuri
I progettisti sono stati incoraggiati ad attenersi a questi 216 colori “sicuri per il web” nei loro siti Web perché c’erano molti display a colori a 8 bit quando è stata sviluppata la tavolozza di 216 colori. David Lehn e Hadley Stern hanno scoperto che solo 22 dei 216 colori della tavolozza sicura per il web vengono visualizzati in modo affidabile senza rimappature incoerenti su schermi di computer a 16 bit.

Colori CSS
La specifica Cascading Style Sheets definisce lo stesso numero di colori con nome delle specifiche HTML 4, ovvero i 16 colori html e 124 colori dall’elenco dei colori di Netscape X11 per un totale di 140 nomi riconosciuti da Internet Explorer (IE) 3.0 e Netscape Navigator 3.0. Blooberry.com nota che Opera 2.1 e Safari 1 includevano anche l’elenco esteso di 140 nomi di colori di Netscape, ma in seguito scoprirono 14 nomi non inclusi in Opera 3.5 su Windows 98.

In CSS 2.1, il colore ‘orange’ (uno dei 140) è stato aggiunto alla sezione con i 16 colori HTML4 come diciassettesimo colore. La specifica CSS3.0 non includeva l’arancio nella sezione “Parole chiave a colori HTML4”, che è stata rinominata “Parole chiave a colori di base”. Nello stesso riferimento, la sezione “Parole chiave a colori SVG” è stata rinominata “Parole chiave a colori estese”, dopo aver iniziato come “parole chiave a colori X11” in una bozza di lavoro precedente.

CSS 2, SVG e CSS 2.1 consentono agli autori Web di utilizzare i colori di sistema, che sono nomi di colori i cui valori sono presi dal sistema operativo, selezionando il colore del testo evidenziato del sistema operativo o il colore di sfondo per i controlli del tooltip. Ciò consente agli autori Web di modellare il loro contenuto in linea con il sistema operativo dell’agente utente. Il modulo colore CSS3 ha deprecato l’uso dei colori di sistema in favore della proprietà Aspetto del sistema dell’interfaccia utente CSS3, che a sua volta è stata abbandonata dai CSS3.

Il 21 giugno 2014, il CSS WG ha aggiunto il colore RebeccaPurple all’Editor’s Draft del modulo CSS4 Colors, per commemorare la figlia di Eric Meyer, Rebecca, che è morta il 7 giugno 2014, il suo sesto compleanno.

Accessibilità
Alcuni browser e dispositivi non supportano i colori. Per questi display, o per utenti ciechi e daltonici, il contenuto Web a seconda dei colori può essere inutilizzabile o difficile da utilizzare.

Nessuno dei colori deve essere specificato (per richiamare i colori predefiniti del browser), oppure è necessario specificare sia lo sfondo che tutti i colori di primo piano (come i colori di testo normale, collegamenti non visitati, collegamenti a spirale, collegamenti attivi e collegamenti visitati) nero su effetti bianco o nero su bianco.