Vlad Merzhevich
In HTML, il colore viene specificato in due modi: utilizzando il codice esadecimale e tramite il nome di determinati colori. Viene utilizzato prevalentemente il metodo basato sul sistema numerico esadecimale, poiché è il più universale.
Colori esadecimali
L'HTML utilizza numeri esadecimali per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 sono sostituiti da lettere latine. Nella tabella 6.1 mostra la corrispondenza tra numeri decimali ed esadecimali.
I numeri maggiori di 15 nel sistema esadecimale si formano combinando due numeri in uno (Tabella 6.2). Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale.
Per evitare confusione nella definizione del sistema numerico, un numero esadecimale è preceduto dal simbolo cancelletto #, ad esempio #aa69cc. In questo caso il caso non ha importanza, quindi è consentito scrivere #F0F0F0 o #f0f0f0.
Un tipico colore utilizzato in HTML è simile a questo.
Qui il colore di sfondo della pagina web è impostato su #FA8E47. Il simbolo cancelletto # davanti a un numero significa che è esadecimale. Le prime due cifre (FA) definiscono la componente rossa del colore, dalla terza alla quarta cifra (8E) definiscono la componente verde e le ultime due cifre (47) definiscono la componente blu. Il risultato finale sarà di questo colore.
FA. | + | 8E | + | 47 | = | FA8E47 |
Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF, per un totale di 256 sfumature. Pertanto, il numero totale di colori può essere 256x256x256 = 16.777.216 combinazioni. Un modello di colore basato sui componenti rosso, verde e blu è chiamato RGB (rosso, verde, blu; rosso, verde, blu). Questo modello è additivo (da add - add), in cui l'addizione di tutti e tre i componenti forma il colore bianco.
Per facilitare la navigazione tra i colori esadecimali, prendi in considerazione alcune regole.
- Se i valori dei componenti del colore sono gli stessi (ad esempio: #D6D6D6), il risultato sarà una tinta grigia. Più alto è il numero, più chiaro sarà il colore, con valori che vanno da #000000 (nero) a #FFFFFF (bianco).
- Se la componente rossa viene portata al massimo (FF) e le restanti componenti vengono impostate a zero si forma un colore rosso brillante. Un colore con un valore di #FF0000 è la tonalità di rosso più rossa possibile. Lo stesso vale per il verde (#00FF00) e il blu (#0000FF).
- Il giallo (#FFFF00) è ottenuto mescolando rosso e verde. Ciò è ben visibile sulla ruota dei colori (Fig. 6.1), che presenta i colori primari (rosso, verde, blu) e quelli complementari o aggiuntivi. Questi includono giallo, ciano e viola (chiamato anche magenta). In generale, qualsiasi colore può essere ottenuto mescolando colori ad esso vicini. Pertanto, il ciano (#00FFFF) si ottiene combinando blu e verde.
Riso. 6.1. Cerchio di colori
I colori basati su valori esadecimali non devono essere selezionati empiricamente. A questo scopo è adatto un editor grafico in grado di funzionare con diversi modelli di colore, ad esempio Adobe Photoshop. Nella fig. La Figura 6.2 mostra la finestra per la selezione di un colore in questo programma; il valore esadecimale risultante del colore corrente è delineato da una linea. Puoi copiarlo e incollarlo nel tuo codice.
Riso. 6.2. Finestra per la scelta dei colori in Photoshop
Colori della rete
Se imposti la qualità di resa cromatica del monitor su 8 bit (256 colori), lo stesso colore può essere visualizzato in modo diverso in browser diversi. Ciò è dovuto al modo in cui viene visualizzata la grafica, quando il browser funziona con la propria tavolozza e non può mostrare un colore che non sia presente nella sua tavolozza. In questo caso il colore viene sostituito da una combinazione di pixel di altri colori vicini che imitano quello dato. Per garantire che il colore rimanga lo stesso nei diversi browser, è stata introdotta una tavolozza dei cosiddetti colori web. I colori Web sono quei colori per i quali ciascun componente - rosso, verde e blu - è impostato su uno dei sei valori: 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Tra parentesi è indicato il valore esadecimale di questo componente. Il numero totale di colori di tutte le combinazioni possibili dà 6x6x6 - 216 colori. Un esempio di colore web è #33FF66.
La caratteristica principale del colore web è che appare uguale in tutti i browser. Al momento, l'importanza dei colori web è molto ridotta a causa del miglioramento della qualità dei monitor e dell'espansione delle loro capacità.
Colori per nome
Per evitare di dover ricordare una serie di numeri, è possibile utilizzare invece i nomi dei colori comunemente utilizzati. Nella tabella 6.3 mostra i nomi dei colori più diffusi.
Nome del colore | Colore | Descrizione | Valore esadecimale |
---|---|---|---|
nero | Nero | #000000 | |
blu | Blu | #0000FF | |
fucsia | Viola chiaro | #FF00FF | |
grigio | Grigio scuro | #808080 | |
verde | Verde | #008000 | |
lime | Verde chiaro | #00FF00 | |
marrone | Rosso scuro | #800000 | |
Marina Militare | Blu scuro | #000080 | |
oliva | Oliva | #808000 | |
viola | Viola scuro | #800080 | |
rosso | Rosso | #FF0000 | |
argento | Grigio chiaro | #C0C0C0 | |
verde acqua | Blu verde | #008080 | |
bianco | Bianco | #FFFFFF | |
giallo | Giallo | #FFFF00 |
Non importa se specifichi un colore tramite il suo nome o utilizzando numeri esadecimali. Questi metodi hanno lo stesso effetto. L'esempio 6.1 mostra come impostare i colori dello sfondo e del testo di una pagina web.
Esempio 6.1. Colore dello sfondo e del testo
Testo di esempio
In questo esempio, il colore dello sfondo viene impostato utilizzando l'attributo bgcolor del tag
e il colore del testo tramite l'attributo text. Per varietà, l'attributo text è impostato su un numero esadecimale e l'attributo bgcolor è impostato sulla parola chiave riservata teal .>>Gestione del colore
Valori di colore RGB esadecimali
I metodi di descrizione ed elaborazione del colore differiscono l'uno dall'altro in base alla rappresentazione finale a cui sono destinati. Confrontiamo, ad esempio, la rappresentazione dei colori per la stampa e per i monitor dei computer. Nel primo caso, viene presa la base bianco il colore della carta su cui vengono successivamente applicati i tre colori primari: blu, viola E giallo. Mescolandosi tra loro e con il colore bianco della carta in proporzioni diverse, questi tre colori primari danno diverse sfumature di colore, ad eccezione del nero puro, oppure in completa assenza di vernici danno la carta bianca. Se aggiungiamo loro il colore nero, otteniamo CMYK-un metodo di trasmissione del colore quando il colore richiesto si ottiene sottraendo i colori mancanti dal bianco.
Nel secondo caso, viene presa la base nero il colore dello schermo del monitor, ciascuna cella del quale si illumina in uno dei tre colori: rosso-rosso, verde-verde e blu-blu. Quindi, in completa assenza di bagliore, otteniamo il colore dello schermo nero puro e qualsiasi colore richiesto è dato dal rapporto tra ciascuno dei tre colori. In questo caso otterremo RGB-metodo di trasmissione del colore. I colori primari possono variare da 0
Prima 255
o da 0%
Prima 100%
o può essere rappresentato come valore esadecimale. Nella figura seguente puoi vedere i risultati della miscelazione dei colori primari.
Il sistema numerico esadecimale, a differenza del sistema numerico decimale, non ha dieci cifre, ma sedici, da cui il nome. Di conseguenza, possono esserci solo varianti non ripetitive di combinazioni di due cifre - 256 , per continuare la serie di numeri dopo 9 lettere da UN Prima F, pertanto, la serie sarà simile a questa:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
In questo caso, il colore è specificato da tre numeri esadecimali, ciascuno dei quali è composto da due cifre. Il primo numero determina l'intensità rosso colori, medio- verde, ultima cosa- blu colori. Tutti i numeri possono assumere valori nell'intervallo da 00 Prima FF(da 0 a 255). Ad esempio: il colore verde è dato come #00FF00, rosso - come #FF0000, blu - come #0000FF, bianco - come #FFFFFF, viene data la completa assenza di colore o nero #000000 .
Nel modulo sottostante puoi specificare eventuali valori esadecimali per ciascuno dei tre colori e vedere il risultato della loro miscelazione cliccando nel campo di output.
Esempi di alcuni valori di colore RGB esadecimali: gradazioni di rosso, blu e verde.
visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice |
#010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
#100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
#200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
#300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
#400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
#500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
#600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
#700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Specifica del colore utilizzando stringhe letterali
Per facilità d'uso, ad alcuni colori e alle loro combinazioni sono stati assegnati nomi riconosciuti da tutti i browser ed è diventato possibile impostarne molti per nome. La tabella seguente mostra alcuni dei nomi dei colori:
visualizzazione | Nome | visualizzazione | Nome | visualizzazione | Nome | visualizzazione | Nome |
Bianco | Rosso | Arancia | Giallo | ||||
Verde | Blu | Viola | Nero | ||||
Aliceblu | Bianco antico | Acqua | Acquamarina | ||||
Azzurro | Beige | Biscotto | Blanchedalmond | ||||
Blu viola | Marrone | Burlywood | Cadettoblu | ||||
Certosa | Cioccolato | Corallo | Blu fiordaliso | ||||
Seta di mais | Cremisi | Ciano | Blu scuro | ||||
Ciano scuro | Verga d'oro scuro | Grigio scuro | Verde scuro | ||||
Cachi scuro | Magenta scuro | verde oliva scuro | Arancione scuro | ||||
Orchidea scura | Rosso scuro | Salmone scuro | Verdemare scuro | ||||
Blu ardesia scuro | Grigio ardesia scuro | Turchese scuro | Viola scuro | ||||
Rosa scuro | Blu cielo profondo | Scura | Dodgerblu | ||||
Mattone refrattario | Bianco floreale | Verde foresta | Fucsia | ||||
Gainsboro | Bianco fantasma | Oro | Verga d'oro | ||||
Grigio | Verde giallo | Melata | Rosa caldo | ||||
Rosso indiano | Indaco | Avorio | Cachi | ||||
Lavanda | Blush lavanda | Chiffon al limone | Azzurro | ||||
Corallo chiaro | Ciano chiaro | Giallo chiaro | Verde chiaro | ||||
Grigio chiaro | Rosa chiaro | Salmone leggero | Verde mare chiaro | ||||
Azzurro chiaro | Grigio ardesia chiaro | Blu acciaio chiaro | Giallo chiaro | ||||
Lime | Verde lime | Biancheria | Magenta | ||||
Marrone | Acquamarina media | Blu medio | Orchidea media | ||||
Viola medio | Verde mare medio | Blu ardesia medio | Verdeprimaverile medio | ||||
Turchese medio | Rosso medio | Blu notte | Crema alla menta | ||||
Rosa mistica | Navajo bianco | Marina Militare | Oldlace | ||||
Oliva | Oliverab | Rosso-arancio | Orchidea | ||||
Verga d'oro pallido | Verde pallido | Tavolozza turchese | Rosso palevioletto | ||||
Papayawhip | Soffio di pesca | Perù | Rosa | ||||
Prugna | Blu polvere | Marrone rosato | Blu Reale | ||||
Marrone sella | Mare verde | Conchiglia | Siena | ||||
Argento | Cielo blu | Blu ardesia | Grigio ardesia | ||||
Nevicare | Verde primavera | Blu acciaio | Abbronzatura | ||||
Verde acqua | Cardo | Pomodoro | Turchese | ||||
Viola | Grano | Fumo bianco | Giallo verde |
Utilizzando una tavolozza di colori sicura
Sfortunatamente, su piattaforme diverse, con impostazioni di sistema diverse, la corretta riproduzione del colore rappresenta un problema. Il fatto è che il browser cerca sempre di adattare la tavolozza dei colori del documento alle impostazioni del sistema e alle funzionalità del monitor, mescolando in modo indipendente i colori e sostituendoli. Di conseguenza, a volte l'utente non vede esattamente ciò che il webmaster voleva mostrargli. Una via d'uscita da questa situazione è stata trovata nell'uso di una tavolozza, ogni colore della quale è garantito essere rappresentato allo stesso modo da tutti i browser su piattaforme diverse. Questo è il cosiddetto garantita tavolozza, chiamata anche sicuro tavolozza. Questa tavolozza include colori le cui componenti cromatiche assumono i seguenti valori: 00 ,33 ,66 ,99 , CC,FF, in tutti i modi possibili 216 le loro combinazioni.
visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice | visualizzazione | codice |
FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
In HTML, il colore può essere specificato in tre modi:
Impostazione di un colore in HTML in base al suo nome
Alcuni colori possono essere specificati tramite il nome, utilizzando il nome del colore in inglese come valore. Le parole chiave più comuni: nero, bianco, rosso, verde, blu, ecc.:
Colore del testo: rosso
I colori più popolari dello standard World Wide Web Consortium (W3C):
Colore | Nome | Colore | Nome | Colore | Nome | Colore | Nome |
---|---|---|---|---|---|---|---|
Nero | Grigio | Argento | Bianco | ||||
Giallo | Lime | Acqua | Fucsia | ||||
Rosso | Verde | Blu | Viola | ||||
Marrone | Oliva | Marina Militare | Verde acqua |
Esempio di utilizzo di nomi di colori diversi:
Esempio: specificare un colore tramite il suo nome
- Prova tu stesso "
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Rubrica su sfondo lime
Testo bianco su sfondo blu
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Rubrica su sfondo lime
Testo bianco su sfondo blu
Specifica del colore utilizzando RGB
Quando si visualizzano colori diversi su un monitor, viene utilizzata la tavolozza RGB come base. Qualsiasi colore si ottiene mescolando tre colori base: R - rosso, G - verde, B-blu. La luminosità di ciascun colore è data da un byte e può quindi assumere valori da 0 a 255. Ad esempio, RGB(255,0,0) viene visualizzato come rosso poiché il rosso è impostato al suo valore più alto (255) e il il resto è impostato su 0. Puoi anche impostare il colore come percentuale. Ogni parametro indica il livello di luminosità del colore corrispondente. Ad esempio: i valori rgb(127, 255, 127) e rgb(50%, 100%, 50%) imposteranno lo stesso colore verde medio:
Esempio: specifica del colore utilizzando RGB
- Prova tu stesso "
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
Imposta il colore in base al valore esadecimale
Valori R G B può anche essere specificato utilizzando valori di colore esadecimali (HEX) nella forma: #RRGGBB dove RR (rosso), GG (verde) e BB (blu) sono valori esadecimali da 00 a FF (come decimale 0-255 ). Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. Il sistema esadecimale utilizza i seguenti segni: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Qui i numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale sono rappresentati combinando due caratteri in un unico valore. Ad esempio, il numero più alto 255 in decimale corrisponde al valore FF più alto in esadecimale. A differenza del sistema decimale, un numero esadecimale è preceduto dal simbolo cancelletto. # , ad esempio, #FF0000 viene visualizzato come rosso perché il rosso è impostato sul valore massimo (FF) e gli altri colori sono impostati sul valore minimo (00). Segni dopo il simbolo del cancelletto # È possibile digitare sia in maiuscolo che in minuscolo. Il sistema esadecimale permette di utilizzare la forma abbreviata #rgb, dove ogni carattere equivale al doppio. Pertanto la voce #f7O dovrebbe essere considerata come #ff7700.
Esempio: Colore HEX
- Prova tu stesso "
rosso: #FF0000
verde: #00FF00
blu: #0000FF
rosso: #FF0000
verde: #00FF00
blu: #0000FF
rosso+verde=giallo: #FFFF00
rosso+blu=viola: #FF00FF
verde+blu=ciano: #00FFFF
Elenco dei colori comuni (nome, HEX e RGB):
nome inglese | Nome russo | Campione | ESADECIMALE | RGB | ||
---|---|---|---|---|---|---|
amaranto | amaranto | #E52B50 | 229 | 43 | 80 | |
Ambra | Ambra | #FFBF00 | 255 | 191 | 0 | |
Acqua | Blu verde | #00FFFF | 0 | 255 | 255 | |
Azzurro | Azzurro | #007FFF | 0 | 127 | 255 | |
Nero | Nero | #000000 | 0 | 0 | 0 | |
Blu | Blu | #0000FF | 0 | 0 | 255 | |
Bondi Blu | Acqua della spiaggia di Bondi | #0095B6 | 0 | 149 | 182 | |
Ottone | Ottone | #B5A642 | 181 | 166 | 66 | |
Marrone | Marrone | #964B00 | 150 | 75 | 0 | |
Ceruleo | Azzurro | #007BA7 | 0 | 123 | 167 | |
Verde scuro primaverile | Verde scuro primaverile | #177245 | 23 | 114 | 69 | |
Smeraldo | Smeraldo | #50C878 | 80 | 200 | 120 | |
Melanzana | Melanzana | #990066 | 153 | 0 | 102 | |
Fucsia | Fucsia | #FF00FF | 255 | 0 | 255 | |
Oro | Oro | #FFD700 | 250 | 215 | 0 | |
Grigio | Grigio | #808080 | 128 | 128 | 128 | |
Verde | Verde | #00FF00 | 0 | 255 | 0 | |
Indaco | Indaco | #4B0082 | 75 | 0 | 130 | |
Giada | Giada | #00A86B | 0 | 168 | 107 | |
Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
Marina Militare | Blu scuro | #000080 | 0 | 0 | 128 | |
Ocra | Ocra | #CC7722 | 204 | 119 | 34 | |
Oliva | Oliva | #808000 | 128 | 128 | 0 | |
Arancia | Arancia | #FFA500 | 255 | 165 | 0 | |
Pesca | Pesca | #FFE5B4 | 255 | 229 | 180 | |
Zucca | Zucca | #FF7518 | 255 | 117 | 24 | |
Viola | Viola | #800080 | 128 | 0 | 128 | |
Rosso | Rosso | #FF0000 | 255 | 0 | 0 | |
Zafferano | Zafferano | #F4C430 | 244 | 196 | 48 | |
Mare verde | Mare verde | #2E8B57 | 46 | 139 | 87 | |
Verde palude | Bolotny | #ACB78E | 172 | 183 | 142 | |
Verde acqua | Blu verde | #008080 | 0 | 128 | 128 | |
Oltremare | Oltremare | #120A8F | 18 | 10 | 143 | |
Viola | Viola | #8B00FF | 139 | 0 | 255 | |
Giallo | Giallo | #FFFF00 | 255 | 255 | 0 |
Codici colore (sfondo) per saturazione e tonalità.
Il colore nei CSS può essere impostato in diversi modi:
- per nome,
- per valore esadecimale,
- nei formati RGB e RGBA,
- nei formati HSL e HSLA.
Imposta il colore per nome
I browser supportano la specifica di alcuni colori per gli elementi in base al nome. Questa tabella contiene alcune parole chiave (nomi dei colori in inglese) utilizzate per specificare le proprietà del colore, il codice RGB, il codice esadecimale (HEX) e il codice HSL.
Nome | Colore | RGB | ESADECIMALE | HSL | Descrizione |
---|---|---|---|---|---|
bianco | RGB(255, 255, 255) | #ffffff o #fff | hsl(0, 0%, 100%) | Bianco | |
argento | RGB(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Grigio | |
grigio | RGB(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Grigio scuro | |
nero | RGB(0, 0, 0) | #000000 o #000 | hsl(0, 0%, 0%) | Nero | |
marrone | RGB(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Rosso scuro | |
rosso | RGB(255, 0, 0) | #ff0000 o #f00 | hsl(0, 100%, 50%) | Rosso | |
arancia | RGB(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Arancia | |
giallo | RGB(255, 255, 0) | #ffff00 o #ff0 | hsl(60, 100%, 50%) | Giallo | |
oliva | RGB(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Oliva | |
lime | RGB(0, 255, 0) | #00ff00 o #0f0 | hsl(120, 100%, 50%) | Verde chiaro | |
verde | RGB(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
acqua | RGB(0, 255, 255) | #00ffff o #0ff | hsl(180, 100%, 50%) | Blu | |
blu | RGB(0, 0, 255) | #0000ff o #00f | hsl(240, 100%, 50%) | Blu | |
Marina Militare | RGB(0,0,128) | #000080 | hsl(240, 100%, 25%) | Blu scuro | |
verde acqua | RGB(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Blu verde | |
fucsia | RGB(255, 0, 255) | #ff00ff o #f0f | hsl(300, 100%, 50%) | Rosa | |
viola | RGB(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Viola |
Questo è un esempio dell'uso dei nomi dei colori, i nomi dei colori sono presi dalla tabella estesa.
Ecco come funziona questo codice:
Impostazione del colore utilizzando RGB
RGB è un modello di colore additivo. In inglese aggiunta- aggiunta. RGB è l'abbreviazione delle parole inglesi: Red, Green, Blue - rosso, verde, blu). Da ciò è chiaro che nel modello RGB i colori vengono sintetizzati sommando tre colori (rosso, verde, blu) in quantità diverse.
Mescolando i colori rosso, verde e blu si possono ottenere diversi milioni di sfumature. Tutte le possibili combinazioni vengono archiviate nella memoria del computer.
Arriva al punto.
Per impostare le proprietà in questo formato, utilizzare la notazione rgb(r, g, b) , dove r, g, b sono i tre canali per ciascun colore (rosso, verde, blu). I valori per ciascun canale sono impostati nell'intervallo da 0 a 255.
Codice di esempio.
Per rendere tutto più chiaro, ecco un esempio di codice:
Ecco come dovrebbe funzionare questo esempio:
Fig. 1. Colori in RGB.Spiegazioni per esempio.
All'inizio della pagina creiamo la classe div.rgb, necessaria per i blocchi creati dal tag
Successivamente, nel codice impostiamo il colore di sfondo del blocco
Prova a modificare questo esempio e a specificare i tuoi valori, ad esempio rgb(100, 100, 100) .
Impostazione del colore utilizzando RGBA
CSS3 ha un nuovo strumento per lavorare con il colore: il formato RGBA. Può essere definito un'evoluzione del modello RGB, ma con l'aggiunta di un nuovo canale: il canale A o alfa. Questo canale imposta la trasparenza del colore. I suoi valori sono impostati nell'intervallo da 0 a 1. Un valore 0 corrisponde alla piena trasparenza, 1 - piena opacità (il colore sarà lo stesso specificato nei primi tre canali RGB) e valori intermedi come 0,4 o 0,6 - traslucenza a vari livelli.
Codice di esempio.
Ecco come funzionerà:
Questo codice è visivamente simile al seguente, che utilizza il modello RGB per specificare un valore di colore:
Ecco il suo risultato:
Un valore del canale alfa uguale a zero rende qualsiasi colore invisibile - assolutamente trasparente; un valore uguale a uno traduce il colore nel codice RGB senza modifiche. La proprietà rgba(255,0,0,1.0) mostra il colore rosso rgb(255, 0, 0) .
Per valore esadecimale (codice HEX)
Nella vita di tutti i giorni utilizziamo il sistema di conteggio decimale. Le sue origini sono molto semplici: abbiamo dieci dita nelle mani e contare sulle dita è stato conveniente nella vita. Se il sistema decimale ha dieci cifre: da 0 a 9, e il numero 10 è la cifra successiva, allora il sistema numerico esadecimale ha 16 cifre e la cifra successiva è il numero 16.
Per indicare i codici colore, le cifre decimali ordinarie da 0 a 9 vengono utilizzate come cifre esadecimali e le lettere latine dalla A alla F vengono utilizzate per indicare i numeri da 10 a 15, ovvero (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Per chiarezza riportiamolo in una tabella:
Per scrivere i numeri esadecimali maggiori di F (15 nel sistema decimale), come nel sistema decimale, si usa anche la combinazione di due cifre, ma già esadecimali, il che è ovvio. Pertanto, per scrivere il numero decimale 255 in notazione esadecimale, utilizzare la notazione FF.
Il sistema esadecimale è più comprensibile per il computer ed elabora i valori impostati in base al valore esadecimale più velocemente.
Per specificare un colore in formato esadecimale, far precedere il valore numerico con un segno “#”, esempio: #FFC0CB. Il valore #FFC0CB stesso è composto da tre cifre esadecimali FF, C0 e CB. Il significato di questa voce è lo stesso dell'impostazione del colore nel formato RGB (rgb(r, g, b)): ogni cifra esadecimale nel codice HEX indica la saturazione del colore nel proprio canale del modello RGB.
Questo codice mostrerà i seguenti elementi:
Ed ecco un'immagine con il risultato della sezione "Impostazione dei colori utilizzando RGB" in questa pagina sopra.
Fig. 1. Colori in RGB.Vediamo che i colori sono identici.
È consentita una notazione abbreviata del codice colore HEX: un numero di 6 cifre può essere scritto come un numero di 3 cifre. Ciò è valido solo quando vengono ripetute due cifre nel valore del colore di un canale.
Cioè, è accettabile la seguente abbreviazione:
Ad esempio, il colore #ff22aa può essere scritto come #f2a, oppure il colore #44aa22 può essere scritto come #4a2.
Impostazione del colore utilizzando HSL
CSS3 ha un nuovo formato per specificare i colori.
Il formato HSL è l'abbreviazione delle parole inglesi: Hue (tonalità), Saturate (saturazione) e Lightness (leggerezza).
La tonalità in HSL è il valore di un colore su una speciale ruota dei colori (Figura 2) ed è specificata in gradi. Se tracciamo analogie con il modello RGB, allora 0° corrisponde al rosso, 120° corrisponde al verde e 240° corrisponde al blu.
Il valore della tonalità cambierà da 0 a 359.
Figura 2. Ruota dei colori HSL.
Il secondo valore: la saturazione (Saturate) è impostato come percentuale. Con una saturazione del 100%, il colore è il più “succoso” possibile; quando l'indicatore di saturazione si sposta verso lo 0%, il colore diventa più opaco e sfuma nel grigio.
Anche il terzo valore, Leggerezza, è impostato come percentuale. Più alta è la percentuale, più luminoso risulterà il colore. I valori estremi di 0% e 100% indicheranno rispettivamente i colori nero (nessuna luce) e bianco (sovraesposto) e non importa quale colore dalla ruota dei colori è stato selezionato nel primo canale. Il valore ottimale di luminosità del colore è del 50%.
Impostazione del colore utilizzando HSLA
Il formato HSLA è correlato a HSL, proprio come RGB lo è a RGBA. Nel formato HSLA, come in RGBA, viene aggiunto un canale alfa, responsabile della trasparenza del colore.
Il colore specificato nel formato HSL è più facile da leggere. Possiamo dire che è intuitivo. Ad esempio, il codice hsl(120,60%,50%) può rappresentare il colore finale se in memoria è presente un'immagine della ruota dei colori HSL. Lo stesso non si può dire dei formati RGB ed HEX; il codice colore specificato in questi formati diventa chiaro solo dopo essere stato visualizzato sul monitor.
I nuovi formati in CSS3 (HSL, HSLA e RGBA) funzionano nei browser a partire dalle versioni: IE 9.0, Opera 10.0 Firefox 3.0. Come posso far funzionare gli stili sui browser più vecchi?
Somebloсk ( colore di sfondo: rgb(255,50,50); colore di sfondo: rgba(255,50,50,0.85) )
Quando si utilizza questo codice nei browser più vecchi, il colore di sfondo per la classe .somebloсk, sebbene non utilizzerà un canale alfa, verrà visualizzato in formato RGB.