Icolori Web sonocolori usati nellavisualizzazione di pagine Web sulWorld Wide Web e nei metodi per descrivere e specificare tali colori. I colori possono essere specificati come una triplettaRGB o in formatoesadecimale (unatripletta esadecimale) o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altrosoftware di grafica viene spesso utilizzato per generare valori di colore. In alcuni usi, i codici colore esadecimali vengono specificati in notazione, usando unsegno numerico iniziale (#).[1][2] Un determinato colore viene specificato in base all'intensità dei suoi componenti rosso, verde e blu, ciascuno rappresentato da ottobit. Pertanto, ci sono 24 bit usati per specificare un colore web all'interno della gammasRGB e 16.777.216 colori che possono essere così specificati.
I colori al di fuori della gamma sRGB possono essere specificati infogli 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 documentiHTML legacy che non usano CSS).
Le prime versioni diMosaic eNetscape Navigator utilizzavano i nomi dei colori X11 come base per i loro elenchi di colore, poiché entrambi erano partiti come applicazioniX Window System. I colori del web hanno una definizione colorimetrica inequivocabile,sRGB, che mette in relazione lecromaticità di un particolare set difosforo, una data curva di trasferimento, un punto di bianco adattivo e le condizioni di visualizzazione.[4] Questi sono stati scelti per essere simili a moltimonitor del mondo reale e condizioni di visualizzazione, al fine di consentire alrendering di essere abbastanza vicino ai valori specificati anche senzala gestione del colore. Gliinterpreti 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.
Unatripletta esadecimale è un numeroesadecimale a tre cifre e trebyte utilizzato inHTML,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) o da 0 a 255 in notazione decimale e rappresenta l'intensità di ciascuno dei componenti del colore. Pertanto i colori web specificano i colori nellacombinazione 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 esempioCSS :
.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. Vediesadecimale 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 deisistemi operativi moderni. Sono inoltre disponibili strumenti basati sul Web specifici per la conversione di valori di colore.
La specificaHTML 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 paletteVGA di Windows".[7]
Diversi colori sono definiti daibrowser 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 ilsistema X Window. Questi colori sono stati standardizzati daSVG 1.0 e sono accettati dagli agenti utenteSVG completi. Non fanno parte diSVG 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 comeRGB semplice (quindi, nessuno spazio colore particolare), piuttosto chesRGB. 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 deldithering.
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 comeX11 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, ipersonal 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 triplettaRGB: 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).
6 tonalità di ogni colore
Chiave
Esadecimale
Decimale
Frazione
0
00
0
0
3
33
51
0.2
6
66
102
0.4
9
99
153
0.6
C o (12)
CC
204
0.8
F o (15)
FF
255
1
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
216 colori sicuri per il web
*000*
300
600
900
C00
*F00*
*003*
303
603
903
C03
*F03*
6
306
606
906
C06
F06
9
309
609
909
C09
F09
00C
30C
60C
90C
C0C
F0C
*00F*
30F
60F
90F
C0F
*F0F*
30
330
630
930
C30
F30
33
333
633
933
C33
F33
36
336
636
936
C36
F36
39
339
639
939
C39
F39
03C
33C
63C
93C
C3C
F3C
03F
33F
63F
93F
C3F
F3F
60
360
660
960
C60
F60
63
363
663
963
C63
F63
66
366
666
966
C66
F66
69
369
669
969
C69
F69
06C
36C
66C
96C
C6C
F6C
06F
36F
66F
96F
C6F
F6F
90
390
690
990
C90
F90
93
393
693
993
C93
F93
96
396
696
996
C96
F96
99
399
699
999
C99
F99
09C
39C
69C
99C
C9C
F9C
09F
39F
69F
99F
C9F
F9F
0C0
3C0
6C0
9C0
CC0
FC0
0C3
3C3
6C3
9C3
CC3
FC3
0C6
3C6
6C6
9C6
CC6
FC6
0C9
3C9
6C9
9C9
CC9
FC9
0CC
3CC
6CC
9CC
CCC
FCC
0CF
3CF
6CF
9CF
CCF
FCF
*0F0*
3F0
*6F0*
9F0
CF0
*FF0*
0F3
*3F3*
*6F3*
9F3
CF3
*FF3*
*0F6*
*3F6*
6F6
9F6
*CF6*
*FF6*
0F9
3F9
6F9
9F9
CF9
FF9
*0FC*
*3FC*
6FC
9FC
CFC
FFC
*0FF*
*3FF*
*6FF*
9FF
CFF
*FFF*
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 a8 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 specificaCascading 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 daInternet 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 suWindows 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].
Colore aggiunto in CSS 2.1Nome
Esadecimale
(RGB)
Rosso
(RGB)
Verde
(RGB)
Blu
(RGB)
Tonalità
(HSL / HSV)
Satur.(HSL)
Leggero
(HSL)
Satur.(HSV)
Valore
(HSV)
arancia
# FFA500
100,00%
65,00%
0,00%
39 °
100,00%
50,00%
100,00%
100,00%
CSS 2,SVG e CSS 2.1 consentono agli autori Web di utilizzare icolori di sistema, che sono nomi di colore i cui valori sono presi dalsistema 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 coloreCSS3 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]
/* 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 moduloCSS4 Colors, per commemorare la figlia di Eric Meyer, Rebecca, deceduta il 7 giugno 2014, il suo sesto compleanno.[26]
Colore aggiunto nel modulo CSS4 Colors
Nome
Esadecimale
(RGB)
Rosso
(RGB)
Verde
(RGB)
Blu
(RGB)
Tonalità
(HSL / HSV)
Satur.
(HSL)
Leggero
(HSL)
Satur.
(HSV)
Valore
(HSV)
RebeccaPurple
# 663399
40%
20%
60%
270 °
50%
40%
67%
60%
CSS supporta anche il colore specialetransparent, che rappresenta un valore alfa pari a zero; Per impostazione predefinita,transparentè reso come un nero nominale invisibile:rgba(0, 0, 0, 0).[27]
Alcunibrowser 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]
InHTML,CSS,SVG eCanvas non si possono tradurre i colori, vanno mantenuti inlingua inglese. Ad esempio non si può scriverecolor: rosso ma si deve scriverecolor: red
LeLinee 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 allaWeb 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 raccomandazioneWCAG, 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.