Colori Web

colori utilizzati nelle pagine web

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.

Tripletta esadecimale modifica

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) 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 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.

Forma esadecimale abbreviata modifica

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.

Conversione RGB in esadecimale modifica

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.

Nomi di colore HTML modifica

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]

Nome

Colore

Esadecimale

(RGB)

Rosso

(RGB)

Verde

(RGB)

Blu

(RGB)

Tonalità

(HSL/HSV)

Satur.(HSL) Luce

(HSL)

Satur.(HSV) Valore

(HSV)

Numero

CGA (nome); alias

White #FFFFFF 100,00% 100,00% 100,00% 0,00% 100,00% 0,00% 100,00% 15 (white)
Silver #C0C0C0 75,00% 75,00% 75,00% 0,00% 75,00% 0,00% 75,00% 07 (light gray)
Gray #808080 50,00% 50,00% 50,00% 0,00% 50,00% 0,00% 50,00% 08 (dark gray)
Black #000000 0,00% 0,00% 0,00% 0,00% 0,00% 0,00% 0,00% 00 (black)
Red #FF0000 100,00% 0,00% 0,00% 100,00% 50,00% 100,00% 100,00% 12 (high red)
Maroon #800000 50,00% 0,00% 0,00% 100,00% 25,00% 100,00% 50,00% 04 (low red)
Yellow #FFFF00 100,00% 100,00% 0,00% 60° 100,00% 50,00% 100,00% 100,00% 14 (yellow)
Olive #808000 50,00% 50,00% 0,00% 60° 100,00% 25,00% 100,00% 50,00% 06 (brown)
Lime #00FF00 0,00% 100,00% 0,00% 120° 100,00% 50,00% 100,00% 100,00% 10 (high green); green
Green #008000 0,00% 50,00% 0,00% 120° 100,00% 25,00% 100,00% 50,00% 02 (low green)
Aqua #00FFFF 0,00% 100,00% 100,00% 180° 100,00% 50,00% 100,00% 100,00% 11 (high cyan); cyan
Teal #008080 0,00% 50,00% 50,00% 180° 100,00% 25,00% 100,00% 50,00% 03 (low cyan)
Blue #0000FF 0,00% 0,00% 100,00% 240° 100,00% 50,00% 100,00% 100,00% 09 (high blue)
Navy #000080 0,00% 0,00% 50,00% 240° 100,00% 25,00% 100,00% 50,00% 01 (low blue)
Fuchsia #FF00FF 100,00% 0,00% 100,00% 300° 100,00% 50,00% 100,00% 100,00% 13 (high magenta); magenta
Purple #800080 50,00% 0,00% 50,00% 300° 100,00% 25,00% 100,00% 50,00% 05 (low magenta)

Nomi dei colori X11 modifica

 
Versione SVG dei nomi dei colori X11

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]

HTML

(nome)

R G B HTML

(nome)

R G B HTML

(nome)

R G B
Hex Decimale Hex Decimal Hex Decimale
Colori rosa Colori verdi Colori porpora, viola e magenta
MediumVioletRed C7 15 85 199 21 133 DarkGreen 00 64 00 0 100 0 Indigo 4B 00 82 75 0 130
DeepPink FF 14 93 255 20 147 Green 00 80 00 0 128 0 Purple 80 00 80 128 0 128
PaleVioletRed DB 70 93 219 112 147 DarkOliveGreen 55 6B 2F 85 107 47 DarkMagenta 8B 00 8B 139 0 139
HotPink FF 69 B4 255 105 180 ForestGreen 22 8B 22 34 139 34 DarkViolet 94 00 D3 148 0 211
LightPink FF B6 C1 255 182 193 SeaGreen 2E 8B 57 46 139 87 DarkSlateBlue 48 3D 8B 72 61 139
Pink FF C0 CB 255 192 203 Olive 80 80 00 128 128 0 BlueViolet 8A 2B E2 138 43 226
Colori rossi OliveDrab 6B 8E 23 107 142 35 DarkOrchid 99 32 CC 153 50 204
DarkRed 8B 00 00 139 0 0 MediumSeaGreen 3C B3 71 60 179 113 Fuchsia FF 00 FF 255 0 255
Red FF 00 00 255 0 0 LimeGreen 32 CD 32 50 205 50 Magenta FF 00 FF 255 0 255
Firebrick B2 22 22 178 34 34 Lime 00 FF 00 0 255 0 SlateBlue 6A 5A CD 106 90 205
Crimson DC 14 3C 220 20 60 SpringGreen 00 FF 7F 0 255 127 MediumSlateBlue 7B 68 EE 123 104 238
IndianRed CD 5C 5C 205 92 92 MediumSpringGreen 00 FA 9A 0 250 154 MediumOrchid BA 55 D3 186 85 211
LightCoral F0 80 80 240 128 128 DarkSeaGreen 8F BC 8F 143 188 143 MediumPurple 93 70 DB 147 112 219
Salmon FA 80 72 250 128 114 MediumAquamarine 66 CD AA 102 205 170 Orchid DA 70 D6 218 112 214
DarkSalmon E9 96 7A 233 150 122 YellowGreen 9A CD 32 154 205 50 Violet EE 82 EE 238 130 238
LightSalmon FF A0 7A 255 160 122 LawnGreen 7C FC 00 124 252 0 Plum DD A0 DD 221 160 221
Colori arancio Chartreuse 7F FF 00 127 255 0 Thistle D8 BF D8 216 191 216
OrangeRed FF 45 00 255 69 0 LightGreen 90 EE 90 144 238 144 Lavender E6 E6 FA 230 230 250
Tomato FF 63 47 255 99 71 GreenYellow AD FF 2F 173 255 47 Colori bianchi
DarkOrange FF 8C 00 255 140 0 PaleGreen 98 FB 98 152 251 152 MistyRose FF E4 E1 255 228 225
Coral FF 7F 50 255 127 80 Colori Cyano AntiqueWhite FA EB D7 250 235 215
Orange FF A5 00 255 165 0 Teal 00 80 80 0 128 128 Linen FA F0 E6 250 240 230
Colori gialli DarkCyan 00 8B 8B 0 139 139 Beige F5 F5 DC 245 245 220
DarkKhaki BD B7 6B 189 183 107 LightSeaGreen 20 B2 AA 32 178 170 WhiteSmoke F5 F5 F5 245 245 245
Gold FF D7 00 255 215 0 CadetBlue 5F 9E A0 95 158 160 LavenderBlush FF F0 F5 255 240 245
Khaki F0 E6 8C 240 230 140 DarkTurquoise 00 CE D1 0 206 209 OldLace FD F5 E6 253 245 230
PeachPuff FF DA B9 255 218 185 MediumTurquoise 48 D1 CC 72 209 204 AliceBlue F0 F8 FF 240 248 255
Yellow FF FF 00 255 255 0 Turquoise 40 E0 D0 64 224 208 Seashell FF F5 EE 255 245 238
PaleGoldenrod EE E8 AA 238 232 170 Aqua 00 FF FF 0 255 255 GhostWhite F8 F8 FF 248 248 255
Moccasin FF E4 B5 255 228 181 Cyan 00 FF FF 0 255 255 Honeydew F0 FF F0 240 255 240
PapayaWhip FF EF D5 255 239 213 Aquamarine 7F FF D4 127 255 212 FloralWhite FF FA F0 255 250 240
LightGoldenrodYellow FA FA D2 250 250 210 PaleTurquoise AF EE EE 175 238 238 Azure F0 FF FF 240 255 255
LemonChiffon FF FA CD 255 250 205 LightCyan E0 FF FF 224 255 255 MintCream F5 FF FA 245 255 250
LightYellow FF FF E0 255 255 224 Colori blu Snow FF FA FA 255 250 250
Colori marroni Navy 00 00 80 0 0 128 Ivory FF FF F0 255 255 240
Maroon 80 00 00 128 0 0 DarkBlue 00 00 8B 0 0 139 White FF FF FF 255 255 255
Brown A5 2A 2A 165 42 42 MediumBlue 00 00 CD 0 0 205 Colori neri e grigi
SaddleBrown 8B 45 13 139 69 19 Blue 00 00 FF 0 0 255 Black 00 00 00 0 0 0
Sienna A0 52 2D 160 82 45 MidnightBlue 19 19 70 25 25 112 DarkSlateGray 2F 4F 4F 47 79 79
Chocolate D2 69 1E 210 105 30 RoyalBlue 41 69 E1 65 105 225 DimGray 69 69 69 105 105 105
DarkGoldenrod B8 86 0B 184 134 11 SteelBlue 46 82 B4 70 130 180 SlateGray 70 80 90 112 128 144
Peru CD 85 3F 205 133 63 DodgerBlue 1E 90 FF 30 144 255 Gray 80 80 80 128 128 128
RosyBrown BC 8F 8F 188 143 143 DeepSkyBlue 00 BF FF 0 191 255 LightSlateGray 77 88 99 119 136 153
Goldenrod DA A5 20 218 165 32 CornflowerBlue 64 95 ED 100 149 237 DarkGray A9 A9 A9 169 169 169
SandyBrown F4 A4 60 244 164 96 SkyBlue 87 CE EB 135 206 235 Silver C0 C0 C0 192 192 192
Tan D2 B4 8C 210 180 140 LightSkyBlue 87 CE FA 135 206 250 LightGray D3 D3 D3 211 211 211
Burlywood DE B8 87 222 184 135 LightSteelBlue B0 C4 DE 176 196 222 Gainsboro DC DC DC 220 220 220
Wheat F5 DE B3 245 222 179 LightBlue AD D8 E6 173 216 230
NavajoWhite FF DE AD 255 222 173 PowderBlue B0 E0 E6 176 224 230
Bisque FF E4 C4 255 228 196
BlanchedAlmond FF EB CD 255 235 205
Cornsilk FF F8 DC 255 248 220

Colori sicuri per il Web modifica

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).

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.

Tabella dei colori modifica

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 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].

Colori web più sicuri
0 3 6 9 C F
00 *000* *F00*
03 *003* *F03*
06
0C
0F *00F* *F0F*
F0 *0F0* *6F0* *FF0*
F3 *3F3* *6F3* *FF3*
F6 *0F6* *3F6* *CF6* *FF6*[14]
FC *0FC* *3FC*
FF *0FF* *3FF* *6FF* *FFF*

Colori CSS modifica

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].

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 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]

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 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]

Cambiamento del nome dei colori modifica

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

$color-danube: #668DD1;

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

Accessibilità modifica

Selezione del colore modifica

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

Contrasto di colore modifica

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.

Note modifica

  1. ^ Jennifer Niederst Robbins, Appendix D: Specifying Color, in Web Design in a Nutshell, O'Reilly, February 2006, p. 830, ISBN 978-0-596-00987-8.
  2. ^ York, Richard. Beginning CSS, pp. 71–72.
  3. ^ Steven Pemberton, CSS Color Module Level 3, su Çelik (a cura di), w3.org, W3C, 7 June 2011.
  4. ^ Digital Color Imaging Handbook By Gaurav Sharma. ISBN 0-8493-0900-X
  5. ^ Steven Pemberton, 4.2.1. RGB color values, su Çelik (a cura di), CSS Color Module Level 3, W3C, 7 June 2011. URL consultato il 19 March 2013.
  6. ^ HTML 4.01 Specification section 6.5 "Colors", su w3.org. URL consultato l'8 July 2013.
  7. ^ HTML 3.2 Specification "The BODY element", su w3.org. URL consultato l'8 July 2013.
  8. ^ Public discussion on SVG mailing list Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt, su lists.w3.org. URL consultato l'8 July 2013.
  9. ^ Steven Pemberton, 4.3. Extended color keywords, su Çelik (a cura di), CSS Color Module Level 3, W3C, 7 June 2011. URL consultato il 19 March 2013.
  10. ^ W3C TR SVG 1.0, recognized color keyword names, su w3.org, 16 August 2011. URL consultato il 1º febbraio 2019.
  11. ^ (EN) Sue Jenkins, Web Design All-in-One For Dummies, John Wiley & Sons, 27 dicembre 2012, ISBN 9781118404119.
  12. ^ Browser Display Statistics, su w3schools.com. URL consultato l'8 luglio 2013.
  13. ^ Webmonkey: design: Death of the Websafe Color Palette?, su asc.ohio-state.edu. URL consultato il 4 febbraio 2021 (archiviato dall'url originale il 3 marzo 2021).
  14. ^ colors, su webreference.com. URL consultato il 4 febbraio 2021 (archiviato dall'url originale il 23 novembre 2016).
  15. ^ The X11 Color Set, su cng.seas.rochester.edu. URL consultato il 6 July 2014 (archiviato dall'url originale il 18 giugno 2014).
  16. ^ Brian Wilson, Colors in HTML and CSS, su blooberry.com. URL consultato il 6 July 2014.
  17. ^ CSS 2.1 Specification: Syntax and basic data types: Colors, su w3.org, 8 September 2009. URL consultato il 21 December 2009.
  18. ^ CSS Color Module Level 3 – Proposed Recommendation - 11. Changes, su w3.org, 28 October 2010. URL consultato il 6 July 2014.
  19. ^ CSS Color Module Level 3 – Working Draft, su w3.org, 18 April 2002. URL consultato il 6 July 2014.
  20. ^ CSS Color Module Level 4 Editor’s Draft, 26 June 2014
  21. ^ User interface – System colors, su w3.org. URL consultato l'8 July 2013.
  22. ^ Steven Pemberton, 4.5.1. CSS2 system colors, su Çelik (a cura di), CSS Color Module Level 3, W3C, 7 June 2011. URL consultato il 19 March 2013.
  23. ^ CSS3 Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance, su w3.org. URL consultato l'8 July 2013.
  24. ^ Çelik (a cura di), List of substantial changes, su CSS Basic User Interface Module Level 3, W3C, 17 January 2012. URL consultato il 19 March 2013.
    «System Appearance has been dropped, including appearance values & property, and system fonts / extension of the 'font' property shorthand.»
  25. ^ Steven Pemberton, 4.2.4. HSL color values, su Çelik (a cura di), CSS Color Module Level 3, W3C, 7 June 2011. URL consultato il 19 March 2013.
  26. ^ Daniel Glazman, Re: [CfC] adding 'rebeccapurple' to CSS Color Level 4, su Post to www-style mailing list, W3C, 21 June 2014. URL consultato il 24 June 2014.
  27. ^ CSS Color Module Level 4, su drafts.csswg.org. URL consultato il 4 febbraio 2021.
  28. ^ (EN) What do you name color variables?, su CSS-Tricks, 7 dicembre 2018. URL consultato il 4 febbraio 2021.
  29. ^ If You Pick One Color, Pick Them All, su w3.org. URL consultato l'8 July 2013.
  30. ^ WCAG 2.0 guideline 1.4
  31. ^ Optimal Colors to Improve Readability for People with Dyslexia