Colori Web

Da Wikipedia, l'enciclopedia libera.
Jump to navigation Jump to search

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]

Nomi dei colori X11[modifica | modifica wikitesto]

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]

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. [ <span title="Another editor left a comment stating, &quot;not really, it was pretty much a disaster&quot; - Why? Please clarify (May 2011)">citazione necessaria</span> ] 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 | 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

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.[13] 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.[14]

In CSS 2.1, il colore 'orange' (arancione, uno dei 140) è stato aggiunto alla sezione con i 16 colori HTML4 come diciassettesimo colore.[15] La specifica CSS3.0 non includeva l'orange nella sezione "HTML4 color keywords" (parole chiave colori HTML4), che è stata rinominata come "Basic color keywords"[16] (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[17]. La bozza di lavoro per il modulo colore CSS4 combina le sezioni Base ed Estesa insieme in una semplice sezione "Named colors" (colori denominati)[18].

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.[19] Il modulo colore CSS3 ha deprecato l'uso dei colori di sistema a favore della proprietà Aspetto di sistema dell'interfaccia utente CSS3,[20][21] che è stata successivamente eliminata da CSS3.[22] Lo sviluppo delle specifiche CSS3 introduce anche i valori dello spazio colore HSL nei fogli di stile:[23]

 /* 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.[24]

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

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[26] 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,[27] 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]

  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, a cura di Çelik, 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", W3.org. URL consultato l'8 July 2013.
  7. ^ HTML 3.2 Specification "The BODY element", 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, 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, 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, W3schools.com. URL consultato l'8 luglio 2013.
  13. ^ The X11 Color Set, su cng.seas.rochester.edu. URL consultato il 6 July 2014.
  14. ^ Brian Wilson, Colors in HTML and CSS, su blooberry.com. URL consultato il 6 July 2014.
  15. ^ CSS 2.1 Specification: Syntax and basic data types: Colors, su w3.org, 8 September 2009. URL consultato il 21 December 2009.
  16. ^ CSS Color Module Level 3 – Proposed Recommendation - 11. Changes, su w3.org, 28 October 2010. URL consultato il 6 July 2014.
  17. ^ CSS Color Module Level 3 – Working Draft, su w3.org, 18 April 2002. URL consultato il 6 July 2014.
  18. ^ CSS Color Module Level 4 Editor’s Draft, 26 June 2014
  19. ^ User interface – System colors, W3.org. URL consultato l'8 July 2013.
  20. ^ 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.
  21. ^ CSS3 Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance, W3.org. URL consultato l'8 July 2013.
  22. ^ Ç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.».
  23. ^ 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.
  24. ^ 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.
  25. ^ If You Pick One Color, Pick Them All, W3.org. URL consultato l'8 July 2013.
  26. ^ WCAG 2.0 guideline 1.4
  27. ^ Optimal Colors to Improve Readability for People with Dyslexia