I codici colore CSS vengono utilizzati per specificare un colore. In genere, i codici colore o i valori dei colori vengono utilizzati per impostare un colore per il primo piano di un elemento (ad esempio, colore del testo, colore del collegamento) o per lo sfondo di un elemento (colore di sfondo, colore del blocco). Possono anche essere usati per cambiare il colore di un pulsante, bordo, pennarello, 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:
I formati elencati sono descritti più dettagliatamente di seguito.
Colori CSS - Codici esadecimali
Codice colore esadecimaleè una rappresentazione a sei cifre di un colore. Le prime due cifre (RR) rappresentano il valore rosso, le due successive rappresentano il valore verde (GG) e le ultime due rappresentano il valore blu (BB).
Colori CSS - Codici esadecimali brevi
Codice colore esadecimale cortoè la forma più breve della notazione a sei cifre. In questo formato, ogni cifra viene ripetuta per produrre il valore di colore a sei cifre equivalente. 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 "#". Di seguito sono riportati esempi di utilizzo della notazione esadecimale.
Colori CSS - Valori RGB
valore RGBè il codice colore, che viene impostato utilizzando la proprietà rgb(). Questa proprietà accetta tre valori, uno per rosso, verde e blu. Il valore può essere un numero intero, compreso tra 0 e 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 utilizzando il nostro servizio.
Colori del browser sicuri
Di seguito è riportata una tabella di 216 colori che sono i più sicuri e indipendenti dal computer. Questi colori CSS vanno da 000000 a FFFFFF esadecimale. Sono sicuri da usare perché assicurano che tutti i computer visualizzino correttamente i colori quando si lavora con una tavolozza di 256 colori.
| Tabella dei colori CSS "sicura" | |||||
| #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 |
In HTML, il colore può essere impostato in tre modi:
Impostare un colore in HTML con il suo nome
Alcuni colori possono essere specificati con il loro nome, utilizzando il nome del colore in inglese come valore. Le parole chiave più comuni sono 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 | D'argento | bianco | ||||
| Giallo | Lime | Acqua | Fucsia | ||||
| rosso | Verde | Blu | Viola | ||||
| Marrone | Oliva | Marina Militare | verde acqua |
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
Titolo su sfondo lime
Testo bianco su sfondo blu
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Titolo su sfondo lime
Testo bianco su sfondo blu
Specificare il colore usando RGB
Quando si visualizzano colori diversi sul monitor, si basa sulla tavolozza RGB. Qualsiasi colore si ottiene mescolando tre principali: R - rosso (rosso), G - verde (verde), B - blu... La luminosità di ogni colore è specificata da un byte e quindi può variare da 0 a 255. Ad esempio, RGB (255,0,0) viene visualizzato come rosso perché il rosso è impostato al suo valore più alto (255) e il resto è impostato a 0 È inoltre possibile impostare il colore come percentuale. Ciascuno dei parametri indica il livello di luminosità del colore corrispondente. Ad esempio: rgb (127, 255, 127) e rgb (50%, 100%, 50%) imposteranno la stessa saturazione media del verde:
Esempio: Specificare un colore usando RGB
- Provate voi stessi "
RGB (127, 255, 127)
RGB (50%, 100%, 50%)
RGB (127, 255, 127)
RGB (50%, 100%, 50%)
Impostazione del colore 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 (uguale a 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, С, D, E, F. Qui i numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 in esadecimale rappresentano la combinazione di due caratteri in un unico valore. Ad esempio, il numero più alto 255 in decimale è il FF più alto in esadecimale. A differenza del sistema decimale, davanti al numero esadecimale viene posizionato un simbolo cancelletto # ad esempio, # FF0000 viene visualizzato come rosso perché il rosso è impostato sul valore più alto (FF) e il resto dei colori è impostato sul valore minimo (00). Caratteri dopo il simbolo cancelletto # puoi scrivere sia in maiuscolo che in minuscolo. Il sistema esadecimale permette di utilizzare una forma abbreviata come #rgb, dove ogni carattere equivale a double. Quindi, 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 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 | Bondi Beach Acqua | # 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 navy | #000080 | 0 | 0 | 128 | |
| Ocra | Ocra | # CC7722 | 204 | 119 | 34 | |
| Oliva | Oliva | #808000 | 128 | 128 | 0 | |
| arancione | arancione | #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 | Pantano | # 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à.
28/11/14 11,1KPurtroppo 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 una qualsiasi delle milioni di sfumature. Così che " matite colorate Ci sono molto più di sette nel suo set.
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 html sono costituiti da tre coppie di numeri esadecimali. Ogni coppia è responsabile della saturazione della tonalità con il suo colore principale:
- La prima coppia numerica è responsabile del colore rosso;
- La seconda coppia è per il contenuto di verde;
- Quest'ultimo è per il contenuto del colore blu.
Un cancelletto è posto all'inizio del codice (prima dei numeri). Questo è il codice colore esadecimale. Oltre ai numeri da 1 a 9, questo sistema di numerazione utilizza lettere dell'alfabeto latino (A, B, C, D, E, F).
Ad esempio, il codice bianco in html sarà simile a #FFFFFF:
2. Parola chiave: html attualmente supporta circa 147 parole chiave. Ma non tutte queste parole sono uniche. Alcuni di loro si riferiscono alla stessa tonalità di colore.
Il grigio è rappresentato da due parole chiave: grigio e grigio. Il loro codice esadecimale (HEX) è impostato dallo stesso valore # 808080.
Esempio:
#808080
3. In formato RGB: questa codifica del colore html si basa sull'uso di tre valori, impostati nell'intervallo da 0 a 255. Ciascuno di essi determina la saturazione della tonalità con uno dei colori primari:
- R - rosso (rosso);
- G - verde (verde);
- B - 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 migliorato, dove il quarto valore specifica la trasparenza del colore come 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 colori HTML e generatori di colori
Con una gamma così ampia di impostazioni del colore, è facile confondersi. Pertanto, è stata inventata una cartella colori speciale. In esso, a 147 nomi chiave di sfumature di colore vengono assegnati codici di conformità 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 web colorscheme.ru:
Ma anche con una tale strutturazione della partita, la selezione della tonalità desiderata può essere difficile. E non è un dato di fatto che la tabella dei codici colore contenga quella giusta.
Per aggirare questa barriera e rendere il più facile possibile trovare la giusta tonalità, sono stati sviluppati servizi web interattivi. La loro interfaccia utente può variare leggermente.
Sul sito web html-color-codes.info, il generatore di colori ha questo aspetto:
E all'interno del servizio color-picker.appsmaster.co, questo strumento è implementato in modo leggermente diverso:
La saturazione di ciascun colore nel generatore viene impostata utilizzando appositi cursori. Visivamente, la tinta viene visualizzata nel colore della cornice e del rettangolo sul lato sinistro. In basso, in 3 campi, viene visualizzato il codice colore nei principali formati.
Ma il generatore di colori è disponibile non solo su siti specializzati. Quasi tutti gli editor grafici sono dotati di tale strumento. Ad esempio Photoshop:
Sicurezza del colore
Ed è stato molto tempo fa, nell'era delle schede video che supportano solo 256 colori. In quei tempi lontani, i sistemi operativi potevano visualizzare solo un certo numero di sfumature a otto bit senza distorsioni.
Quindi è stato sviluppato il grande tavolo color safe. Indicava 216 sfumature che potevano essere visualizzate senza distorsioni in nessuno dei browser dell'epoca. E fino ad oggi questo" grande manoscritto"È ancora disponibile su alcune risorse:
Nel nostro tempo, tutto è cambiato. 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 caduti nell'oblio.
Vlad Merzhevich
In HTML, un colore viene specificato in due modi: utilizzando un codice esadecimale e il nome di alcuni colori. Viene utilizzato principalmente il metodo basato sul sistema numerico esadecimale, in quanto il più universale.
Colori esadecimali
I numeri esadecimali vengono utilizzati per specificare i colori in HTML. 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. Tavolo 6.1 mostra la corrispondenza tra numeri decimali ed esadecimali.
I numeri maggiori di 15 nel sistema esadecimale sono formati dalla combinazione di due numeri in uno (Tabella 6.2). Ad esempio, 255 decimale è FF esadecimale.
Per evitare confusione nella definizione del sistema di numerazione, il carattere cancelletto # viene anteposto al numero esadecimale, ad esempio # aa69cc. In questo caso, il registro 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) sono verdi e le ultime due cifre (47) sono blu. Di conseguenza, ottieni questo colore.
| fa | + | 8E | + | 47 | = | FA8E47 |
Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF, risultando in 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 aggiungere - ad aggiungere), in cui l'aggiunta di tutti e tre i componenti forma un colore bianco.
Per facilitare la navigazione nei colori esadecimali, tieni conto di alcune regole.
- Se i valori dei componenti del colore sono gli stessi (ad esempio: # D6D6D6), si ottiene una sfumatura grigia. Più alto è il numero, più chiaro è il colore, i valori variano da # 000000 (nero) a #FFFFFF (bianco).
- Si forma un colore rosso brillante se il componente rosso è impostato al massimo (FF) e il resto dei componenti è impostato su zero. Il colore # 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), dove sono presentati i colori primari (rosso, verde, blu) e i colori complementari o complementari. Questi includono giallo, ciano e viola (chiamato anche magenta). In generale, qualsiasi colore può essere ottenuto mescolando colori vicini. Quindi, il ciano (# 00FFFF) si ottiene combinando blu e verde.
Riso. 6.1. Cerchio di colori
I colori esadecimali non devono essere scelti empiricamente. A tale scopo è adatto un editor grafico in grado di funzionare con diversi modelli di colore, ad esempio Adobe Photoshop. Nella fig. 6.2 mostra una finestra per la scelta di un colore in questo programma, il valore esadecimale risultante del colore corrente è delineato con una linea. Puoi copiarlo e incollarlo nel tuo codice.
Riso. 6.2. Finestra di selezione del 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. Ciò è dovuto al modo in cui vengono visualizzati i grafici, in cui 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 specificato. Per mantenere il colore invariato nei diversi browser, abbiamo introdotto una tavolozza di cosiddetti colori web. I colori Web sono quei colori, per ciascun componente dei quali - rosso, verde e blu - viene impostato uno dei sei valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Le parentesi indicano il valore esadecimale di questo componente. Il numero totale di colori di tutte le possibili combinazioni dà 6x6x6 - 216 colori. Un esempio di colore web è # 33FF66.
La caratteristica principale del colore web è che appare lo stesso su 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 memorizzare una serie di numeri, è possibile utilizzare invece i nomi dei colori di uso comune. Tavolo 6.3 elenca i nomi dei nomi di colori popolari.
| 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 navy | #000080 | |
| oliva | Oliva | #808000 | |
| viola | Viola scuro | #800080 | |
| rosso | rosso | #FF0000 | |
| d'argento | Grigio chiaro | # C0C0C0 | |
| verde acqua | Blu verde | #008080 | |
| bianco | bianco | #FFFFFF | |
| giallo | Giallo | #FFFF00 |
Non importa in che modo specifichi il colore - con il suo nome o usando numeri esadecimali. Questi metodi sono uguali nella loro azione. L'Esempio 6.1 mostra come impostare lo sfondo e il colore 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 cambiare, l'attributo text è impostato su un numero esadecimale e bgcolor è impostato sulla parola chiave riservata teal.I numeri esadecimali vengono utilizzati per impostare 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 in esadecimale si formano combinando due numeri in uno. Ad esempio, 255 decimale equivale a FF esadecimale. Per evitare confusione nella definizione del sistema di numerazione, il simbolo cancelletto # è posto davanti al numero esadecimale, ad esempio # 666999. Ciascuno dei tre colori — rosso, verde e blu — può variare da 00 a FF. Pertanto, la designazione del colore è divisa in tre componenti #rrggbb, dove i primi due caratteri indicano la componente rossa del colore, i due centrali - verde e gli ultimi due - blu. È consentito utilizzare una forma abbreviata come #rgb, dove ogni carattere deve essere raddoppiato. Quindi, la voce # fe0 dovrebbe essere trattata come # ffee00.
Per nome
| Internet Explorer | Cromo | musica lirica | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
I browser supportano alcuni colori per nome. Tavolo 1 mostra i nomi, il codice esadecimale, i valori RGB, HSL e la descrizione.
| Nome | Colore | Il codice | RGB | Hsl | Descrizione |
|---|---|---|---|---|---|
| bianco | #ffffff o #ffff | RGB (255,255,255) | hsl (0,0%, 100%) | bianco | |
| d'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%) | 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 | |
| arancione | #ffa500 | RGB (255,165,0) | slm (38,8,100%, 50%) | arancione | |
| giallo | # ffff00 o # ff0 | RGB (255,255,0) | slm (60,100%, 50%) | Giallo | |
| oliva | #808000 | RGB (128,128,0) | slm (60,100%, 25%) | Oliva | |
| lime | # 00ff00 o # 0f0 | RGB (0.255.0) | slm (120,100%, 50%) | Verde chiaro | |
| verde | #008000 | RGB (0.128.0) | slm (120,100%, 25%) | Verde | |
| acqua | # 00ffff o # 0ff | RGB (0,255,255) | slm (180,100%, 50%) | Blu | |
| blu | # 0000ff o # 00f | RGB (0,0,255) | slm (240,100%, 50%) | Blu | |
| Marina Militare | #000080 | RGB (0,0,128) | slm (240,100%, 25%) | blu navy | |
| verde acqua | #008080 | RGB (0.128.128) | slm (180,100%, 25%) | Blu verde | |
| fucsia | # ff00ff o # f0f | RGB (255,0,255) | slm (300,100%, 50%) | Rosa | |
| viola | #800080 | RGB (128,0,128) | slm (300,100%, 25%) | Viola |
Con RGB
| Internet Explorer | Cromo | musica lirica | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Puoi determinare il colore usando i valori decimali dei componenti rosso, verde e blu. Ognuna delle tre componenti di colore assume un valore da 0 a 255. E' anche consentito impostare il colore in percentuale, mentre 100% corrisponderà al numero 255. Prima viene indicata la parola chiave rgb, e poi tra parentesi, la sono indicate le componenti del colore, separate da virgole, ad esempio rgb (255 , 128, 128) o rgb (100%, 50%, 50%).
RGBA
| Internet Explorer | Cromo | musica lirica | Safari | Firefox | Android | 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 controlla la trasparenza dell'elemento. Un valore 0 corrisponde alla trasparenza totale, 1 all'opacità e un valore intermedio come 0,5 alla semi-trasparenza.
RGBA è stato aggiunto in CSS3, quindi la convalida del codice CSS dovrebbe essere eseguita utilizzando questa versione. Va notato che lo standard CSS3 è ancora in fase di sviluppo e alcune funzionalità potrebbero cambiare. Ad esempio, viene convalidato un colore RGB aggiunto alla proprietà background-color, ma il colore aggiunto alla proprietà background non è più. Allo stesso tempo, i browser comprendono abbastanza correttamente il colore per entrambe le proprietà.
Hsl
| Internet Explorer | Cromo | musica lirica | Safari | Firefox | Android | 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 (luminosità). La tonalità è il valore di un colore sulla ruota dei colori (Fig. 1) ed è espresso 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 dallo 0% al 100%. Un valore di 0% denota nessun colore e una sfumatura di grigio, 100% è il valore di saturazione massimo.
Luminosità imposta la luminosità del colore ed è indicata come percentuale da 0% a 100%. Valori bassi rendono il colore più scuro e valori alti schiariscono, i valori estremi di 0% e 100% corrispondono al bianco e nero.
HSLA
| Internet Explorer | Cromo | musica lirica | Safari | Firefox | Android | 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 0 corrisponde alla trasparenza totale, 1 all'opacità e un valore intermedio come 0,5 alla semi-trasparenza.
I valori di colore nei formati RGBA, HSL e HSLA sono stati aggiunti in CSS3, quindi assicurati di verificare la validità della versione quando utilizzi questi formati.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Avvertimento
Tutti i metodi per catturare un leone elencati nel sito sono teorici e basati su metodi computazionali. Gli autori non garantiscono la tua 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
