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 | modifica wikitesto]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 | modifica wikitesto]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 | modifica wikitesto]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 | modifica wikitesto]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° | 0,00% | 100,00% | 0,00% | 100,00% | 15 (white) |
Silver | #C0C0C0 | 75,00% | 75,00% | 75,00% | 0° | 0,00% | 75,00% | 0,00% | 75,00% | 07 (light gray) |
Gray | #808080 | 50,00% | 50,00% | 50,00% | 0° | 0,00% | 50,00% | 0,00% | 50,00% | 08 (dark gray) |
Black | #000000 | 0,00% | 0,00% | 0,00% | 0° | 0,00% | 0,00% | 0,00% | 0,00% | 00 (black) |
Red | #FF0000 | 100,00% | 0,00% | 0,00% | 0° | 100,00% | 50,00% | 100,00% | 100,00% | 12 (high red) |
Maroon | #800000 | 50,00% | 0,00% | 0,00% | 0° | 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 | modifica wikitesto]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 | modifica wikitesto]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).
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 | modifica wikitesto]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].
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 | modifica wikitesto]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]
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 | modifica wikitesto]I CSS3 permettono di rinominare i colori a piacere e richiamarli successivamente[28]:
$color-danube: #668DD1;
/* RICHIAMO */
$color-alpha: $color-danube;
Accessibilità
[modifica | modifica wikitesto]Selezione del colore
[modifica | modifica wikitesto]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 | modifica wikitesto]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 | modifica wikitesto]- ^ 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.
- ^ York, Richard. Beginning CSS, pp. 71–72.
- ^ Steven Pemberton, CSS Color Module Level 3, su Çelik (a cura di), w3.org, W3C, 7 June 2011.
- ^ Digital Color Imaging Handbook By Gaurav Sharma. ISBN 0-8493-0900-X
- ^ 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.
- ^ HTML 4.01 Specification section 6.5 "Colors", su w3.org. URL consultato l'8 July 2013.
- ^ HTML 3.2 Specification "The BODY element", su w3.org. URL consultato l'8 July 2013.
- ^ 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.
- ^ 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.
- ^ W3C TR SVG 1.0, recognized color keyword names, su w3.org, 16 August 2011. URL consultato il 1º febbraio 2019.
- ^ (EN) Sue Jenkins, Web Design All-in-One For Dummies, John Wiley & Sons, 27 dicembre 2012, ISBN 9781118404119.
- ^ Browser Display Statistics, su w3schools.com. URL consultato l'8 luglio 2013.
- ^ 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).
- ^ colors, su webreference.com. URL consultato il 4 febbraio 2021 (archiviato dall'url originale il 23 novembre 2016).
- ^ The X11 Color Set, su cng.seas.rochester.edu. URL consultato il 6 July 2014 (archiviato dall'url originale il 18 giugno 2014).
- ^ Brian Wilson, Colors in HTML and CSS, su blooberry.com. URL consultato il 6 July 2014.
- ^ CSS 2.1 Specification: Syntax and basic data types: Colors, su w3.org, 8 September 2009. URL consultato il 21 December 2009.
- ^ CSS Color Module Level 3 – Proposed Recommendation - 11. Changes, su w3.org, 28 October 2010. URL consultato il 6 July 2014.
- ^ CSS Color Module Level 3 – Working Draft, su w3.org, 18 April 2002. URL consultato il 6 July 2014.
- ^ CSS Color Module Level 4 Editor’s Draft, 26 June 2014
- ^ User interface – System colors, su w3.org. URL consultato l'8 July 2013.
- ^ 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.
- ^ CSS3 Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance, su w3.org. URL consultato l'8 July 2013.
- ^ Ç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.»
- ^ 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.
- ^ 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.
- ^ CSS Color Module Level 4, su drafts.csswg.org. URL consultato il 4 febbraio 2021.
- ^ (EN) What do you name color variables?, su CSS-Tricks, 7 dicembre 2018. URL consultato il 4 febbraio 2021.
- ^ If You Pick One Color, Pick Them All, su w3.org. URL consultato l'8 July 2013.
- ^ WCAG 2.0 guideline 1.4
- ^ Optimal Colors to Improve Readability for People with Dyslexia