Colori Web

Questa voce o sezione sull'argomento informatica è stata parzialmente tradotta dalla lingua inglese.

---

Puoi contribuire terminando la traduzione o usando altre fonti. Non usare programmi di traduzione automatica. Usa {{Tradotto da}} quando hai terminato. Se nella pagina di modifica trovi del testo nascosto, controlla che sia aggiornato servendoti dei collegamenti «in altre lingue» in fondo alla colonna di sinistra. Segui i suggerimenti del progetto di riferimento.

I colori Web sono colori usati nella visualizzazione di pagine Web sul World Wide Web e nei 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 alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro software di grafica viene spesso utilizzato per generare valori di colore. In alcuni usi, i codici colore esadecimali vengono specificati in notazione, usando un segno numerico iniziale (#).^[1][2] Un determinato colore viene specificato in base all'intensità dei suoi componenti rosso, verde e blu, ciascuno rappresentato 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 così specificati.

I colori al di fuori della gamma sRGB possono essere specificati in fogli di stile a cascata (CSS) rendendo uno o più dei componenti rosso, verde e blu negativi o superiori al 100%, quindi lo spazio colore è teoricamente un'estrapolazione illimitata di sRGB simile a scRGB.^[3] La specifica di un colore non-sRGB in questo modo richiede la chiamata alla 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 colore, poiché entrambi erano partiti come applicazioni X Window System. I colori del web hanno una definizione colorimetrica inequivocabile, sRGB, che mette in relazione le cromaticità di un particolare set di fosforo, una data curva di trasferimento, un punto di bianco adattivo e le condizioni di visualizzazione.^[4] Questi sono stati scelti per essere simili a molti monitor del mondo reale e condizioni di visualizzazione, al fine di consentire al rendering di essere abbastanza vicino ai valori specificati anche senza la gestione del colore. Gli interpreti variano nella fedeltà con cui rappresentano i colori specificati. I programmi utente più avanzati utilizzano la gestione del colore per fornire una migliore fedeltà del colore; questo è particolarmente importante per le applicazioni Web-to-print.

Una tripletta esadecimale è un numero esadecimale a tre cifre e tre byte utilizzato in HTML, CSS, SVG e altre applicazioni di elaborazione per rappresentare i colori. I byte rappresentano i componenti rosso, verde e blu del colore. Un byte rappresenta un numero nell'intervallo da 00 a FF in notazione esadecimale (corrispondente all'intervallo da 0 a 255 in notazione decimale) e rappresenta l'intensità di ciascuno dei componenti del colore. Pertanto i colori web specificano i colori nella combinazione di colori True Color (RGB a 24 bit). La tripletta esadecimale si forma concatenando tre byte in notazione esadecimale, nel seguente ordine:

Byte 1: valore rosso (tipo di colore rosso)

Byte 2: valore verde (tipo di colore 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 blu-grigiastro). I numeri decimali 36, 104 e 160 sono equivalenti ai numeri esadecimali 24, 68 e A0 rispettivamente. La tripletta esadecimale si ottiene concatenando insieme le sei cifre esadecimali, 2468A0 in questo esempio.

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

Viene utilizzata una forma abbreviata a tre cifre (esadecimali).^[5] Espandere questo modulo nella forma a sei cifre è molto semplice, dato che basta raddoppiare ogni cifra: 09C diventa 0099CC come presentato nel seguente esempio CSS :

.threedigit { color:    #09C; }
.sixdigit   { color: #0099CC; } /* lo stesso colore di sopra */

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

I valori RGB sono generalmente indicati nell'intervallo 0–255; se sono compresi nell'intervallo 0–1, i valori vengono moltiplicati per 255 prima della conversione. Questo numero diviso per sedici (divisione intera; ignorando qualsiasi resto) ci dà la prima cifra esadecimale (tra 0 e F, dove le lettere da A a F rappresentano i numeri da 10 a 15. Vedi esadecimale per maggiori dettagli). Il resto ci fornisce la seconda cifra esadecimale. Ad esempio, il valore RGB 201 si divide in 12 gruppi di 16, 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 basi di numeri è una normale caratteristica dei calcolatori, inclusi sia i modelli portatili che i calcolatori software in bundle con la maggior parte dei sistemi operativi moderni. Sono inoltre disponibili strumenti basati sul Web specifici per la conversione di valori di colore.

La specifica HTML 4.01, ratificata nel 1999, definisce 16 colori con nome^[6], come segue (in questo contesto di nomi non fa differenza tra maiuscole e minuscole): Questi 16 sono stati etichettati come sRGB e inclusi nella specifica HTML 3.0, nella quale una nota recita che erano "i 16 colori standard supportati con la palette VGA di Windows".^[7]

Diversi colori sono definiti dai browser Web . Un determinato browser potrebbe non riconoscere tutti questi colori, ma a partire dal 2005 tutti i moderni browser grafici di 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 SVG completi. Non fanno parte di SVG Tiny.

L'elenco dei colori forniti con il prodotto X11 varia tra implementazioni e va in conflitto con alcuni dei nomi HTML come il verde. I colori X11 sono definiti come RGB semplice (quindi, nessuno spazio colore particolare), piuttosto che sRGB. Ciò significa che l'elenco dei colori trovati in X11 (ad es. In /usr/lib/X11/rgb.txt) non dovrebbe essere usato direttamente per scegliere i colori per il web^[8].

Di seguito l'elenco dei "colori X11" web dalle specifiche CSS3, insieme ai loro equivalenti esadecimali e decimali. Confrontare gli elenchi alfabetici negli standard W3C. Comprende i sinonimi comuni: aqua (nome standard HTML4 / CSS 1.0), ciano (nome comune sRGB), magenta (nome comune sRGB), fucsia (nome standard HTML4 / CSS 1.0), gray (nome standard HTML4 / CSS 1.0) e grigio.^[9][10]

A metà degli anni '90, molti display erano in grado di visualizzare solo 256 colori^[11]. Questi colori possono essere imposti dall'hardware o modificabili da una "tabella colori". Quando viene trovato un colore (ad esempio, in un'immagine) non disponibile, è quindi necessario utilizzarne uno diverso. Questo può essere fatto usando il colore più vicino o usando la tecnica del dithering.

Ci sono stati vari tentativi di realizzare una tavolozza di colori "standard". Era necessaria una serie di colori che potevano essere mostrati senza dithering su display a 256 colori; il numero 216 fu scelto in parte perché i sistemi operativi dei computer riservavano abitualmente da sedici a venti colori per uso personale; è stato anche selezionato perché consente esattamente sei tonalità equidistanti di rosso, verde e blu (6 × 6 × 6 = 216), ciascuna da 00 a FF (inclusi entrambi i limiti).

L'elenco dei colori viene presentato come se avesse proprietà speciali che li rende immuni al dithering, ma sugli schermi a 256 colori le applicazioni possono effettivamente impostare una tavolozza di qualunque selezione di colori scelgano, evitando il resto. Questi colori sono stati scelti appositamente perché corrispondevano alle palette selezionate da varie applicazioni di browser. A quel tempo non c'erano palette molto diverse in uso nei diversi browser.

I colori "sicuri per il Web" avevano un difetto in ciò, su sistemi come X11 in cui la tavolozza è condivisa tra applicazioni, i cubi di colore più piccoli (5 × 5 × 5 o 4 × 4 × 4) erano allocati dai browser: i "colori sicuri per il web" su tali sistemi avrebbero innescato il dither. 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, anziché subire la perdita di qualità di una doppia quantizzazione.

Dal 2011, i personal computer tipicamente^[12] hanno colori a 24-bit (TrueColor) e l'uso dei "colori sicuri per il web" è caduto in disuso.

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

La tabella seguente mostra tutti i colori "sicuri per il web". Un difetto della tavolozza sicura per il web è la sua piccola gamma di colori chiari per gli sfondi delle pagine web, mentre le intensità nella parte bassa della gamma, come le due più scure, sono simili tra loro, rendendole difficili da distinguere.

Ogni codice colore elencato è una scorciatoia per il valore RGB; ad esempio, il codice 609 è equivalente al codice RGB 102-0-153 o al codice HEX # 660099

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 a 216 colori. David Lehn e Hadley Stern hanno scoperto che solo 22 dei 216 colori nella tavolozza sicura per il Web vengono visualizzati in modo affidabile senza rimappatura incoerente sui display dei computer a 16 bit . Hanno chiamato questi 22 colori "la tavolozza veramente sicura"; è costituito principalmente da sfumature di verde, giallo e blu, come si può vedere nella tabella sottostante^[13].

La specifica Cascading Style Sheets definisce lo stesso numero di colori con nome della specifica 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.^[15] Blooberry.com osserva che Opera 2.1 e Safari 1 includevano anche l'elenco espanso di Netscape con 140 nomi di colori, ma in seguito scoprirono 14 nomi non inclusi con Opera 3.5 su Windows 98.^[16]

In CSS 2.1, il colore 'orange' (arancione, uno dei 140) è stato aggiunto alla sezione con i 16 colori HTML4 come diciassettesimo colore.^[17] La specifica CSS3.0 non includeva l'orange nella sezione "HTML4 color keywords" (parole chiave colori HTML4), che è stata rinominata come "Basic color keywords"^[18] (parole chiave colori di base). Nello stesso riferimento, la sezione "SVG color keywords", è stata rinominata "Extended color keywords" (parole chiave colori estesi), dopo aver iniziato come "X11 color keywords" in una bozza di lavoro precedente^[19]. La bozza di lavoro per il modulo colore CSS4 combina le sezioni Base ed Estesa insieme in una semplice sezione "Named colors" (colori denominati)^[20].

CSS 2, SVG e CSS 2.1 consentono agli autori Web di utilizzare i colori di sistema, che sono nomi di colore i cui valori sono presi dal sistema operativo, selezionando il colore di testo evidenziato del sistema operativo o il colore di sfondo per i controlli delle descrizioni comandi. Ciò consente agli autori Web di modellare i loro contenuti in linea con il sistema operativo dell'agente utente.^[21] Il modulo colore CSS3 ha deprecato l'uso dei colori di sistema a favore della proprietà Aspetto di sistema dell'interfaccia utente CSS3,^[22][23] che è stata successivamente eliminata da CSS3.^[24]

Lo sviluppo delle specifiche CSS3 introduce anche i valori dello spazio colore HSL nei fogli di stile:^[25]

 /* RGB model */
 p { color: #F00 } /* #rgb */
 p { color: #FF0000 } /* #rrggbb */
 p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
 p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

 /* RGB with alpha channel, added to CSS3 */
 p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

 /* HSL model, added to CSS3 */
 p { color: hsl(0, 100%, 50%) } /* red */
 p { color: hsl(120, 100%, 50%) } /* green */
 p { color: hsl(120, 100%, 25%) } /* dark green */
 p { color: hsl(120, 100%, 75%) } /* light green */
 p { color: hsl(120, 50%, 50%) } /* pastel green */

 /* HSL model with alpha channel */
 p { color: hsla(120, 100%, 50%, 1) } /* green */
 p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
 p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

Il 21 giugno 2014, il CSS WG ha aggiunto il colore RebeccaPurple alla bozza dell'Editor del modulo CSS4 Colors, per commemorare la figlia di Eric Meyer, Rebecca, deceduta il 7 giugno 2014, il suo sesto compleanno.^[26]

CSS supporta anche il colore speciale transparent, che rappresenta un valore alfa pari a zero; Per impostazione predefinita, transparentè reso come un nero nominale invisibile: rgba(0, 0, 0, 0).^[27]

I CSS3 permettono di rinominare i colori a piacere e richiamarli successivamente^[28]:

$color-danube: #668DD1;

/* RICHIAMO */
$color-alpha: $color-danube;

Alcuni browser e dispositivi non supportano i colori. Per questi display o per utenti non vedenti e daltonici, i contenuti Web in base ai colori possono essere inutilizzabili o difficili da usare.

Non è necessario specificare alcun colore (per richiamare i colori predefiniti del browser) oppure specificare entrambi i colori di sfondo e di primo piano (come i colori del testo normale, dei collegamenti non visitati, dei collegamenti al passaggio del mouse, dei collegamenti attivi e dei collegamenti visitati) per evitare nero su bianco o bianco su effetti bianchi.^[29]

In HTML, CSS, SVG e Canvas non si possono tradurre i colori, vanno mantenuti in lingua inglese. Ad esempio non si può scrivere color: rosso ma si deve scrivere color: red

Le Linee guida per l'accessibilità dei contenuti Web raccomandano un rapporto di contrasto di almeno 4,5: 1 tra la luminanza relativa del testo e il suo colore di sfondo^[30] o almeno 3: 1 per testi di grandi dimensioni. L'accessibilità migliorata richiede rapporti di contrasto superiori a 7: 1.

Tuttavia, affrontare i problemi di accessibilità non è semplicemente una questione di aumento del rapporto di contrasto. Come indica una relazione alla Web Accessibility Initiative,^[31] i lettori dislessici si trovano meglio con rapporti di contrasto inferiori al massimo. Le raccomandazioni a cui fanno riferimento di bianco nero (0x0A0A0A) su bianco sporco (0xFFFFE5) e nero (0x000000) su crema (0xFAFAC8) hanno rapporti di contrasto rispettivamente di 11,7: 1 e 20,3: 1. Tra le altre coppie di colori, il marrone (0x282800) sul verde scuro (0xA0A000) ha un rapporto di contrasto di 3,24: 1, che è inferiore alla raccomandazione WCAG, il marrone scuro (0x1E1E00) sul verde chiaro (0xB9B900) ha un rapporto di contrasto di 4,54: 1 e blu (0x00007D) su giallo (0xFFFF00) ha un rapporto di contrasto di 11,4: 1. Si noti che i colori indicati nel report utilizzano valori di colore diversi rispetto ai colori Web con lo stesso nome.