In HTML, il colore può essere specificato in tre modi:
Impostazione del colore in HTML in base al suo nome
Alcuni colori possono essere specificati in base al loro nome, utilizzando il nome del colore in inglese come valore. Le parole chiave più comuni: nero (nero), bianco (bianco), rosso (rosso), verde (verde), blu (blu), ecc.:
Colore del testo: rosso
I colori più popolari dello standard World Wide Web Consortium (W3C) sono:
| Colore | Nome | Colore | Nome | Colore | Nome | Colore | Nome |
|---|---|---|---|---|---|---|---|
| Nero | Grigio | Argento | bianco | ||||
| Giallo | lime | Acqua | Fucsia | ||||
| rosso | Verde | Blu | Viola | ||||
| marrone | Oliva | Marina Militare | Alzavola |
Un esempio di utilizzo di nomi di colori diversi:
Esempio: impostare un colore in base al suo nome
- Provate voi stessi "
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Intestazione su sfondo lime
Testo bianco su sfondo blu
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Intestazione su sfondo lime
Testo bianco su sfondo blu
Specificare il colore con RGB
Quando si visualizzano diversi colori sul monitor, la tavolozza RGB viene presa come base. Qualsiasi colore si ottiene mescolando i tre principali: R - rosso, G - verde (verde), B - blu (blu). La luminosità di ogni colore è data da un byte e quindi può assumere valori da 0 a 255. Ad esempio, RGB (255,0,0) è reso rosso perché il rosso è impostato al suo valore più alto (255) e il resto sono impostati su 0 È anche possibile impostare il colore come percentuale. Ciascuno dei parametri indica il livello di luminosità del colore corrispondente. Ad esempio: i valori rgb(127, 255, 127) e rgb(50%, 100%, 50%) imposteranno la stessa saturazione media di verde:
Esempio: specificare un colore con RGB
- Provate voi stessi "
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
Imposta il colore in base al valore esadecimale
I 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 caratteri: 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 l'unione di due caratteri in un valore. Ad esempio, il numero più alto 255 in decimale corrisponde al più alto FF in esadecimale. A differenza del sistema decimale, il numero esadecimale è preceduto da un cancelletto. # , ad esempio, #FF0000 viene visualizzato come rosso perché il rosso è impostato sul valore più alto (FF) e gli altri colori sono impostati sul valore minimo (00). Caratteri dopo il simbolo hash # può essere digitato sia in maiuscolo che in minuscolo. Il sistema esadecimale consente l'uso di una forma abbreviata come #rgb, dove ogni carattere equivale a due volte. Pertanto, la voce #f7O dovrebbe essere considerata come #ff7700.
Esempio: Colore HEX
- Provate voi stessi "
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 comunemente usati (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 | Il 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 | |
| verde mare | mare verde | #2E8B57 | 46 | 139 | 87 | |
| Verde palude | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Alzavola | blu verde | #008080 | 0 | 128 | 128 | |
| Oltremare | blu oltremare | #120A8F | 18 | 10 | 143 | |
| Viola | Viola | #8B00FF | 139 | 0 | 255 | |
| Giallo | Giallo | #FFFF00 | 255 | 255 | 0 | |
Codici colore (sfondo) per saturazione e tonalità.
I numeri esadecimali vengono utilizzati 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. I numeri maggiori di 15 nel sistema esadecimale sono formati combinando due numeri in uno. Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale. Per evitare confusione nella definizione del sistema numerico, il numero esadecimale è preceduto dal simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF. Pertanto, la designazione del colore è divisa in tre componenti #rrggbb, dove i primi due caratteri segnano la componente rossa del colore, i due centrali segnano il verde e gli ultimi due segnano il blu. È consentito utilizzare la forma abbreviata #rgb, dove ogni carattere deve essere raddoppiato. Pertanto, la voce #fe0 dovrebbe essere considerata come #ffee00.
per nome
| Internet Explorer | Cromo | musica lirica | safari | Firefox | Androide | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
I browser supportano alcuni colori in base al nome. In tavola. 1 mostra i nomi, il codice esadecimale, i valori in formato RGB, HSL e la descrizione.
| Nome | Colore | Il codice | RGB | HSL | Descrizione |
|---|---|---|---|---|---|
| bianco | #fffff o #fff | RGB(255.255.255) | hsl(0,0%,100%) | bianco | |
| argento | #c0c0c0 | RGB(192,192,192) | hsl(0,0%,75%) | Grigio | |
| grigio | #808080 | RGB(128,128,128) | hsl(0,0%,50%) | Grigio scuro | |
| Nero | #000000 o #000 | RGB(0,0,0) | hsl(0,0%,0%) | Il nero | |
| marrone | #800000 | RGB(128,0,0) | hsl(0,100%,25%) | Rosso scuro | |
| rosso | #ff0000 o #f00 | RGB(255,0,0) | hsl(0,100%,50%) | rosso | |
| arancia | #ffa500 | RGB(255,165,0) | hsl(38,8,100%,50%) | arancia | |
| giallo | #ffff00 o #ff0 | RGB(255,255,0) | hsl(60,100%,50%) | Giallo | |
| oliva | #808000 | RGB(128,128,0) | hsl(60,100%,25%) | Oliva | |
| lime | #00ff00 o #0f0 | RGB(0,255,0) | hsl(120,100%,50%) | verde chiaro | |
| verde | #008000 | RGB(0,128,0) | hsl(120,100%,25%) | Verde | |
| acqua | #00ffff o #0ffff | RGB(0,255,255) | hsl(180,100%,50%) | Blu | |
| blu | #0000ff o #00f | RGB(0,0,255) | hsl(240,100%,50%) | Blu | |
| Marina Militare | #000080 | RGB(0,0,128) | hsl(240,100%,25%) | Blu scuro | |
| verde acqua | #008080 | RGB(0,128,128) | hsl(180,100%,25%) | blu verde | |
| fucsia | #ff00ff o #f0f | RGB(255,0,255) | hsl(300,100%,50%) | Rosa | |
| viola | #800080 | RGB(128,0,128) | hsl(300,100%,25%) | Viola |
Con RGB
| Internet Explorer | Cromo | musica lirica | safari | Firefox | Androide | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Puoi definire un colore usando i valori rosso, verde e blu in termini decimali. Ciascuno dei tre componenti del colore assume un valore da 0 a 255. È anche accettabile impostare il colore come percentuale, mentre 100% corrisponderà al numero 255. Innanzitutto, viene specificata la parola chiave rgb, quindi i componenti del colore sono specificato tra parentesi, separati da virgole, ad esempio rgb(255 , 128, 128) o rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Cromo | musica lirica | safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Il formato RGBA è simile nella sintassi a RGB, ma include un canale alfa che imposta la trasparenza dell'elemento. Un valore di 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è traslucido.
RGBA viene aggiunto a CSS3, quindi la convalida del codice CSS dovrebbe essere eseguita secondo questa versione. Va notato che lo standard CSS3 è ancora in fase di sviluppo e alcune sue caratteristiche potrebbero cambiare. Ad esempio, un colore RGB aggiunto alla proprietà background-color supera la convalida, ma non uno aggiunto alla proprietà background. Allo stesso tempo, i browser comprendono abbastanza correttamente il colore per entrambe le proprietà.
HSL
| Internet Explorer | Cromo | musica lirica | safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Il nome del formato HSL è formato dalla combinazione delle prime lettere Hue (tonalità), Saturate (saturazione) e Lightness (leggerezza). Tonalità è il valore del colore sulla ruota dei colori (Fig. 1) ed è specificato in gradi. 0° è rosso, 120° è verde e 240° è blu. Il valore della tonalità può variare da 0 a 359.
Riso. 1. Ruota dei colori
La saturazione è l'intensità di un colore, misurata come percentuale da 0% a 100%. Un valore di 0% indica nessun colore e una sfumatura di grigio, 100% è il valore di saturazione massimo.
Luminosità imposta la luminosità del colore ed è specificata come percentuale da 0% a 100%. Valori piccoli rendono il colore più scuro, mentre valori alti lo rendono più chiaro, valori estremi di 0% e 100% corrispondono al bianco e nero.
HSLA
| Internet Explorer | Cromo | musica lirica | safari | Firefox | Androide | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Il formato HSLA è simile nella sintassi a HSL, ma include un canale alfa che imposta la trasparenza dell'elemento. Un valore di 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è traslucido.
I valori di colore nei formati RGBA, HSL e HSLA vengono aggiunti a CSS3, quindi quando si utilizzano questi formati, verificare la validità del codice rispetto alla versione.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Un avvertimento
Tutti i metodi per catturare un leone elencati sul sito sono teorici e basati su metodi computazionali. Gli autori non garantiscono la vostra sicurezza durante l'utilizzo e declinano ogni responsabilità per il risultato. Ricorda, il leone è un predatore e un animale pericoloso!
Il risultato di questo esempio è mostrato in Fig. 2.
Riso. 2. Colori sulla pagina web
Vlad Merzevich
In HTML, il colore viene specificato in due modi: utilizzando un codice esadecimale e il nome di alcuni colori. Il metodo più comunemente usato si basa sul sistema esadecimale, in quanto il più universale.
Colori esadecimali
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. In tavola. 6.1 mostra la corrispondenza tra numeri decimali ed esadecimali.
I numeri maggiori di 15 nel sistema esadecimale sono formati 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, il numero esadecimale è preceduto dal cancelletto #, ad esempio #aa69cc. In questo caso, il caso non ha importanza, quindi è consentito scrivere #F0F0F0 o #f0f0f0.
Un colore tipico utilizzato in HTML è il seguente.
Qui, il colore di sfondo della pagina Web è impostato su #FA8E47. Il cancelletto # davanti a un numero significa che è in esadecimale. Le prime due cifre (FA) definiscono la componente rossa del colore, la terza e la quarta cifra (8E) la componente verde e le ultime due cifre (47) la componente blu. Il risultato finale è questo colore.
| fa | + | 8E | + | 47 | = | FA8E47 |
Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF, che alla fine formano 256 sfumature. Pertanto, il numero totale di colori può essere 256x256x256 = 16.777.216 combinazioni. Il 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'aggiunta di tutti e tre i componenti forma il bianco.
Per facilitare la navigazione con colori esadecimali, tieni in considerazione alcune regole.
- Se i valori delle componenti del colore sono gli stessi (ad esempio: #D6D6D6), si otterrà una tinta grigia. Più alto è il numero, più chiaro è il colore e i valori cambiano da #000000 (nero) a #FFFFFF (bianco).
- Si forma un colore rosso brillante se la componente rossa è resa massima (FF) e il resto dei componenti è impostato su zero. Il colore con il valore #FF0000 è la tinta rossa più rossa possibile. Lo stesso vale per il verde (#00FF00) e il blu (#0000FF).
- Il giallo (#FFFF00) si ottiene mescolando il rosso con il verde. Questo è chiaramente visibile sulla ruota dei colori (Fig. 6.1), che presenta i colori primari (rosso, verde, blu) e complementari o complementari. Questi includono giallo, ciano e viola (chiamato anche magenta). In generale, qualsiasi colore può essere ottenuto mescolando i colori adiacenti ad esso. Quindi, il ciano (#00FFFF) si ottiene combinando il blu e il verde.
Riso. 6.1. Cerchio di colore
I colori basati su valori esadecimali non devono essere selezionati empiricamente. A tale scopo è adatto un editor grafico in grado di lavorare con diversi modelli di colore, come Adobe Photoshop. Sulla fig. 6.2 mostra una finestra per la scelta di un colore in questo programma, la linea circonda il valore esadecimale risultante del colore corrente. Puoi copiarlo e incollarlo nel tuo codice.
Riso. 6.2. Selettore colore in Photoshop
Colori Web
Se si imposta la qualità del colore del monitor su 8 bit (256 colori), lo stesso colore può essere visualizzato in modo diverso in browser diversi. Questo ha a che fare con il modo in cui la grafica viene renderizzata quando il browser lavora con la propria tavolozza e non può mostrare un colore che non ha nella tavolozza. In questo caso, il colore viene sostituito da una combinazione di pixel di altri colori, vicini ad esso, che imitano quello dato. Affinché il colore rimanga lo stesso in diversi browser, è stata introdotta una tavolozza di cosiddetti colori web. I colori web sono quei colori, per ogni componente di cui - rosso, verde e blu - è impostato uno dei sei valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Il valore esadecimale di questo componente è indicato tra parentesi. Il numero totale di colori da tutte le possibili combinazioni dà 6x6x6 - 216 colori. Un esempio di colore web è #33FF66.
La caratteristica principale del colore web è che viene visualizzato allo stesso modo in tutti i browser. Al momento, la rilevanza dei colori web è molto ridotta a causa dell'aumento della qualità dei monitor e dell'espansione delle loro capacità.
Colori per nome
Per non ricordare una raccolta di numeri, puoi invece utilizzare i nomi dei colori comunemente usati. In tavola. 6.3 mostra i nomi dei nomi dei colori popolari.
| Nome del colore | Colore | Descrizione | Valore esadecimale |
|---|---|---|---|
| Nero | Il 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 come specifichi il colore, con il suo nome o usando numeri esadecimali. Nei loro effetti, questi metodi sono uguali. L'esempio 6-1 mostra come impostare lo sfondo ei colori del testo di una pagina web.
Esempio 6.1. Colore di sfondo e testo
Testo di esempio
In questo esempio, il colore di sfondo viene impostato utilizzando l'attributo bgcolor del tag
e il colore del testo tramite l'attributo text. Per varietà, il valore dell'attributo text è impostato su un numero esadecimale e bgcolor è impostato sulla parola chiave riservata teal .I codici colore nei CSS vengono utilizzati per specificare i colori. In genere, i codici colore oi valori di colore vengono utilizzati per impostare un colore per il primo piano di un elemento (ad es. testo, colore del collegamento) o per lo sfondo dell'elemento (sfondo, colore del blocco). Possono anche essere usati per cambiare il colore dei pulsanti, i bordi, l'indicatore, il passaggio del mouse e altri effetti decorativi.
Puoi impostare i tuoi valori di colore in vari formati. La tabella seguente elenca tutti i formati possibili:
Questi formati sono descritti più dettagliatamente di seguito.
Colori CSS - Codici esadecimali
Codice colore esadecimaleè una rappresentazione del colore a sei cifre. Le prime due cifre (RR) sono il valore rosso, le due successive sono il valore verde (GG) e le ultime due sono il valore blu (BB).
Colori CSS - Codici esadecimali brevi
Codice colore esadecimale breveè una forma più breve di notazione a sei caratteri. In questo formato, ogni cifra viene ripetuta per produrre il valore di colore equivalente a sei cifre. Ad esempio: #0F0 diventa #00FF00.
Il valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Core Draw, ecc.
Ogni codice colore esadecimale in CSS sarà preceduto da un cancelletto "#". I seguenti sono esempi dell'uso della notazione esadecimale.
Colori CSS - Valori RGB
Valore RGBè un codice colore impostato utilizzando la proprietà rgb(). Questa proprietà assume tre valori: uno ciascuno per rosso, verde e blu. Il valore può essere un numero intero, da 0 a 255, o una percentuale.
Nota: Non tutti i browser supportano la proprietà color rgb(), quindi non è consigliabile utilizzarla.
Di seguito è riportato un esempio che mostra più colori utilizzando i valori RGB.
Generatore di codici colore
Puoi creare milioni di codici colore con il nostro servizio.
Colori sicuri del browser
Di seguito è riportata una tabella di 216 colori che sono i più sicuri e indipendenti dal computer. Questi colori in CSS vanno da 000000 a FFFFFF codice esadecimale. Sono sicuri da usare in quanto assicurano che tutti i computer visualizzino i colori correttamente quando si lavora con la tavolozza a 256 colori.
| Tabella dei colori "sicuri" in CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Purtroppo non è ancora possibile visualizzare le sensazioni gustative sul sito. Ma questo può essere completamente compensato con l'aiuto dei colori. Dopotutto, i colori html ti consentono di visualizzare uno qualsiasi dei milioni di sfumature. Così " matite colorate” nel suo set è molto più di sette.
combinazione di colori in html
In html, il colore può essere specificato in diversi formati:
1. Come valore esadecimale, viene utilizzato il codice specificato nel sistema esadecimale. Tali codici colore in html sono costituiti da tre coppie di numeri esadecimali. Ogni coppia è responsabile della saturazione della tonalità con il suo colore primario:
- La prima coppia numerica è responsabile del colore rosso;
- La seconda coppia è per il contenuto del colore verde;
- Quest'ultimo è per il contenuto del colore blu.
All'inizio del codice (prima dei numeri) viene posizionato un cancelletto. Questo è il codice colore esadecimale. Oltre ai numeri da 1 a 9, questo sistema numerico utilizza lettere dell'alfabeto latino (A, B, C, D, E, F).
Ad esempio, il codice del colore bianco in html sarebbe simile a #FFFFFF:
2. Parola chiave - Al momento html supporta circa 147 parole chiave. Ma non tutte queste parole sono uniche. Alcuni di essi si riferiscono alla stessa tonalità di colore.
Il grigio è rappresentato da due parole chiave: grigio e grigio. Il loro codice esadecimale (HEX ) è dato dallo stesso valore #808080 .
Esempio :
#808080
3. In formato RGB - questa codifica del colore in html si basa sull'uso di tre valori impostati nell'intervallo da 0 a 255. Ognuno di essi determina la saturazione della tonalità con uno dei colori primari:
- R - rosso (rosso);
- G - verde (verde);
- B - blu (blu).
Il numero del colore in formato RGB è scritto come segue: rgb(0, 210, 100).
colore di sfondo:rgb(100,186,43)
4. In formato RGBA - è un formato RGB avanzato, dove il quarto valore specifica la trasparenza del colore sotto forma di una frazione decimale da 0 a 1.
Esempio di utilizzo:
colore di sfondo:rgba(100,86,143,0.2)
colore di sfondo:rgba(100,86,143,0.5)
colore di sfondo:rgba(100,86,143,0.8)
colore di sfondo:rgba(100,86,143,1)
tabelle dei colori html e generatori di colori
Con una gamma così ampia di formati di impostazione del colore, è facile confondersi. Pertanto, è stata inventata una tabella dei colori speciale. In esso, a 147 nomi chiave di sfumature di colore, sono forniti codici di corrispondenza in tutti i principali standard per la rappresentazione del colore. Inoltre, ogni campo è dotato di una barra per la corrispondenza visiva dei colori. Una di queste tabelle è presentata sul sito colourscheme.ru:
Ma anche con l'aiuto di una tale strutturazione della corrispondenza, la selezione della tonalità desiderata può essere difficile. E non è un dato di fatto che ci sia quello giusto nella tabella dei codici colore.
Per aggirare questa barriera e rendere il più semplice possibile la scelta della tonalità giusta, sono stati sviluppati servizi web interattivi. La loro interfaccia utente potrebbe differire leggermente l'una dall'altra.
Sul sito html-color-codes.info, il generatore di colori si presenta così:
E all'interno del servizio color-picker.appsmaster.co, questo strumento è implementato in modo leggermente diverso:
La saturazione di ogni colore nel generatore viene impostata tramite appositi cursori. Visivamente, la tonalità viene visualizzata dal colore della cornice e del rettangolo sul lato sinistro. In basso, 3 campi mostrano il codice colore nei formati principali.
Ma il generatore di colori è disponibile non solo su siti specializzati. Quasi tutti gli editor grafici sono dotati di uno strumento simile. Ad esempio, Photoshop:
Sicurezza del colore
Ed è passato molto tempo, nell'era delle schede video che supportano solo 256 colori. A quei tempi, i sistemi operativi potevano visualizzare solo un certo numero di sfumature a otto bit senza distorsioni.
Poi fu allevata la grande tavola dei colori sicuri. Indicava 216 sfumature che potevano essere visualizzate senza distorsioni in nessuno dei browser dell'epoca. E fino ad oggi questo ottimo manoscritto» è ancora disponibile su alcune risorse:
Tutto è cambiato nel nostro tempo. Pertanto, tutte le regole di sicurezza quando si lavora con il colore in html vengono completamente annullate. Dopotutto, l'hardware del computer moderno supporta più di 16 milioni di sfumature diverse. E 216 colori sicuri sono sprofondati nell'oblio.
