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 si formano combinando due numeri in uno solo. Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale. Per evitare confusione nella determinazione del sistema numerico, prima del numero esadecimale viene inserito il simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori – rosso, verde e blu – può assumere valori da 00 a FF. Pertanto, il simbolo del colore è diviso in tre componenti #rrggbb, dove i primi due simboli indicano la componente rossa del colore, i due centrali il verde e gli ultimi due il blu. È consentito l'uso della forma abbreviata #rgb, dove ogni carattere deve essere raddoppiato. Pertanto la voce #fe0 deve essere considerata come #ffee00.
Per nome
Internet Explorer | Cromo | Opera | Safari | Firefox | Androide | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
I browser supportano alcuni colori tramite il loro nome. Nella tabella 1 riporta i nomi, il codice esadecimale, i valori RGB, HSL e la descrizione.
Nome | Colore | Codice | RGB | HSL | Descrizione |
---|---|---|---|---|---|
bianco | #ffffff 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%) | 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 #0ff | RGB(0,255,255) | hsl(180,100%,50%) | Blu | |
blu | #0000ff o #00f | RGB(0,0,255) | hsl(240,100%,50%) | Blu | |
marina | #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 |
Utilizzando RGB
Internet Explorer | Cromo | Opera | Safari | Firefox | Androide | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Puoi definire il colore utilizzando i valori rosso, verde e blu in termini decimali. Ciascuno dei tre componenti di colore assume un valore compreso tra 0 e 255. È anche consentito specificare il colore come percentuale, con 100% corrispondente al numero 255. Innanzitutto, specificare la parola chiave rgb, quindi specificare i componenti di colore tra parentesi , separati da virgole, ad esempio rgb(255, 128, 128) o rgb(100%, 50%, 50%).
RGBA
Internet Explorer | Cromo | Opera | 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 specifica la trasparenza dell'elemento. Un valore pari a 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è semitrasparente.
RGBA è stato aggiunto a CSS3, quindi il codice CSS deve essere convalidato rispetto a questa versione. Va notato che lo standard CSS3 è ancora in fase di sviluppo e alcune funzionalità potrebbero cambiare. Ad esempio, un colore in formato RGB aggiunto alla proprietà background-color viene convalidato, ma uno aggiunto alla proprietà background non è più valido. Allo stesso tempo, i browser comprendono abbastanza correttamente il colore per entrambe le proprietà.
HSL
Internet Explorer | Cromo | Opera | Safari | Firefox | Androide | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Il nome del formato HSL deriva dalla combinazione delle prime lettere Hue (tonalità), Saturate (saturazione) e Lightness (leggerezza). La tonalità è il valore del colore sulla ruota dei colori (Fig. 1) ed è espresso in gradi. 0° corrisponde al rosso, 120° al verde e 240° al blu. Il valore della tonalità può variare da 0 a 359.
Riso. 1. Ruota dei colori
La saturazione è l'intensità di un colore e viene misurata in percentuale dallo 0% al 100%. Un valore dello 0% indica assenza di colore e una sfumatura di grigio, 100% è il valore massimo per la saturazione.
La luminosità specifica la luminosità del colore ed è specificata come percentuale compresa tra 0% e 100%. Valori bassi rendono il colore più scuro e valori alti rendono il colore più chiaro; valori estremi di 0% e 100% corrispondono al bianco e nero;
HSLA
Internet Explorer | Cromo | Opera | 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 per specificare la trasparenza dell'elemento. Un valore pari a 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è semitrasparente.
I valori di colore RGBA, HSL e HSLA vengono aggiunti a CSS3, quindi controlla la validità della versione del codice quando utilizzi questi formati.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Avvertimento
Tutti i metodi di cattura dei leoni 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 i risultati. Ricorda, un leone è un predatore e un animale pericoloso!
Il risultato di questo esempio è mostrato in Fig. 2.
Riso. 2. Colori sulla pagina web
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 relativo 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 | Verde acqua |
Esempio di utilizzo di nomi di colori diversi:
Esempio: specificare un colore tramite il suo nome
- Provalo 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 di media saturazione:
Esempio: specifica del colore utilizzando RGB
- Provalo 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
- Provalo 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 | ESAGONALE | 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 | 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à.
Questa pagina contiene una tabella con parole chiave che possono essere utilizzate per denotare i colori in linguaggi di sviluppo Web come: HTML, CSS, JavaScript, Flash, ecc.
Nelle vecchie specifiche per il WC3 venivano specificate solo 16 parole chiave, con l'aiuto delle quali venivano impostati i colori in HTML e CSS. In ulteriori specifiche più moderne sono state aggiunte altre 130 parole chiave per indicare i nomi dei colori. La tabella seguente contiene i nomi dei colori e i codici esadecimali e RGB a cui corrispondono.
Secondo le regole CSS, i nomi dei colori non fanno distinzione tra maiuscole e minuscole. Le voci colore IndianRed e indianred sono equivalenti.
Vale anche la pena notare che delle 146 parole chiave nella tabella in realtà sono presenti meno colori. Questo perché alcune parole chiave si riferiscono allo stesso colore. Pertanto, i nomi Grigio e Grigio rappresentano il codice colore grigio al 50% #808080, e la parola Magenta è sinonimo del colore HTML Fucsia, corrispondente al codice esadecimale #FF00FF. Sono sinonimi anche le parole Aqua e Cyan, corrispondono al codice #00FFFF.
|
|
Il modulo colore CSS descrive in dettaglio i valori che consentono agli autori di definire i colori e l'opacità degli elementi html, nonché i valori della proprietà color.
proprietà del colore
1. Colori prioritari: proprietà del colore
La proprietà specifica il colore del carattere utilizzando vari sistemi di resa cromatica. La proprietà descrive il colore del contenuto testuale dell'elemento. Inoltre, viene utilizzato per fornire un potenziale valore indiretto (currentColor) per qualsiasi altra proprietà che accetta valori di colore.
La proprietà è ereditaria.
2. Valori del colore
2.1. Parole chiave principali
L'elenco delle parole chiave principali include i seguenti significati:
Nome | ESAGONALE | RGB | Colore |
---|---|---|---|
nero | #000000 | 0,0,0 | |
argento | #C0C0C0 | 192,192,192 | |
grigio | #808080 | 128,128,128 | |
bianco | #FFFFFF | 255,255,255 | |
marrone | #800000 | 128,0,0 | |
rosso | #FF0000 | 255,0,0 | |
viola | #800080 | 128,0,128 | |
fucsia | #FF00FF | 255,0,255 | |
verde | #008000 | 0,128,0 | |
lime | #00FF00 | 0,255,0 | |
oliva | #808000 | 128,128,0 | |
giallo | #FFFF00 | 255,255,0 | |
marina | #000080 | 0,0,128 | |
blu | #0000FF | 0,0,255 | |
verde acqua | #008080 | 0,128,128 | |
acqua | #00FFFF | 0,255,255 |
I nomi dei colori non fanno distinzione tra maiuscole e minuscole.
Sintassi
Colore: verde acqua;
2.2. Valori numerici del colore
2.2.1. Colori del modello RGB
Il formato esadecimale di un valore RGB è un segno # seguito immediatamente da tre o sei caratteri esadecimali. La notazione RGB a tre cifre #rgb viene convertita nella forma a sei cifre #rrggbb copiando le cifre anziché aggiungendo zeri. Ad esempio, #fb0 si espande in #ffbb00 . Ciò garantisce che il bianco #ffffff possa essere specificato nella breve voce #fff e rimuove qualsiasi dipendenza dalla profondità del colore del display.
Il formato di un valore RGB nella notazione funzionale è rgb(, seguito da un elenco separato da virgole di tre valori numerici (tre valori interi o tre valori percentuali), seguito da un simbolo). Il valore intero 255 corrisponde al 100% e F o FF in notazione esadecimale:
RGB(255.255.255) = RGB(100%, 100%, 100%) = #FFF
Sono consentiti caratteri spaziali attorno ai valori numerici.
Tabella (tavolozza) di colori html ti dà l'opportunità di scegliere autonomamente il tono di cui hai bisogno. Il valore del colore viene visualizzato in tre formati: Hex, RGB e HSV.
- Hex è costituito da tre valori di due caratteri nel sistema numerico esadecimale. Ad esempio: #ff00b3, dove la prima coppia di numeri è rossa, la seconda è verde e la terza è blu.
- RGB (RedGreenBlue) ha la forma "200.100.255", che indica la quantità del tono corrispondente (rosso, verde, blu) nel colore risultante.
- HSV (Tonalità, Saturazione, Valore - tono, saturazione, valore) - un modello di colore in cui le coordinate sono:
- Tonalità - tonalità del colore, può variare da 0° a 360°.
- Saturazione: la saturazione varia da 0-100 o 0-1. Più alto è questo parametro, più “puro” sarà il colore, motivo per cui questo parametro viene talvolta chiamato purezza del colore. E quanto più questo parametro è vicino a zero, tanto più il colore è vicino al grigio neutro.
- Valore (valore colore) - imposta la luminosità, il valore può anche variare tra 0-100 o 0-1.
Inserisci il codice colore: ANDARE
Elenco dei colori con nomi
La tabella elenca i nomi dei colori inglesi (che possono essere utilizzati come valori) supportati da tutti i browser e i relativi valori esadecimali. Tutti i colori elencati sono "sicuri", nel senso che appariranno uguali in tutti i browser.
Nome del colore | ESAGONALE | Colore |
---|---|---|
Nero | #000000 | |
Marina | #000080 | |
Blu scuro | #00008B | |
Blu medio | #0000CD | |
Blu | #0000FF | |
Verde scuro | #006400 | |
Verde | #008000 | |
Verde acqua | #008080 | |
DarkCyan | #008B8B | |
DeepSkyBlue | #00BFFF | |
Turchese scuro | #00CED1 | |
MedioVerdePrimavera | #00FA9A | |
Lime | #00FF00 | |
Primaveraverde | #00FF7F | |
Acqua | #00FFFF | |
Ciano | #00FFFF | |
Blu notte | #191970 | |
Dodger Blu | #1E90FF | |
Verdemarechiaro | #20B2AA | |
Foresta Verde | #228B22 | |
Mare Verde | #2E8B57 | |
Grigio ardesia scuro | #2F4F4F | |
Verde lime | #32CD32 | |
MedioVerdemare | #3CB371 | |
Turchese | #40E0D0 | |
Blu reale | #4169E1 | |
SteelBlue | #4682B4 | |
Blu ardesia scuro | #483D8B | |
Turchese medio | #48D1CC | |
Indaco | #4B0082 | |
Verde oliva scuro | #556B2F | |
CadetBlue | #5F9EA0 | |
Blu Fiordaliso | #6495ED | |
MedioAcquaMarine | #66CDAA | |
DimGray | #696969 | |
Blu ardesia | #6A5ACD | |
OliveDrab | #6B8E23 | |
Grigio ardesia | #708090 | |
Grigio ardesia chiaro | #778899 | |
MedioArdesiaBlu | #7B68EE | |
Prato Verde | #7CFC00 | |
Certosa | #7FFF00 | |
Acquamarina | #7FFFD4 | |
Marrone | #800000 | |
Viola | #800080 | |
Oliva | #808000 | |
Grigio | #808080 | |
Cielo blu | #87CEEB | |
Blu cielo chiaro | #87CEFA | |
BluViola | #8A2BE2 | |
Rosso scuro | #8B0000 | |
DarkMagenta | #8B008B | |
Marrone sella | #8B4513 | |
Verdemarescuro | #8FBC8F | |
Verde chiaro | #90EE90 | |
Medio viola | #9370D8 | |
Viola scuro | #9400D3 | |
Verdepallido | #98FB98 | |
DarkOrchidea | #9932CC | |
GialloVerde | #9ACD32 | |
Siena | #A0522D | |
Marrone | #A52A2A | |
Grigio scuro | #A9A9A9 | |
Azzurro | #ADD8E6 | |
VerdeGiallo | #ADFF2F | |
Turchese pallido | #AFEEEE | |
LuceAcciaioBlu | #B0C4DE | |
Blu polvere | #B0E0E6 | |
FireBrick | #B22222 | |
DarkGoldenRod | #B8860B | |
Orchidea media | #BA55D3 | |
Marrone rosato | #BC8F8F | |
Cachi scuro | #BDB76B | |
Argento | #C0C0C0 | |
MedioViolaRosso | #C71585 | |
Rosso indiano | #CD5C5C | |
Perù | #CD853F | |
Cioccolato | #D2691E | |
Abbronzatura | #D2B48C | |
Grigio chiaro | #D3D3D3 | |
RossoViolaPallido | #D87093 | |
Cardo | #D8BFD8 | |
Orchidea | #DA70D6 | |
Verga d'Oro | #DAA520 | |
Cremisi | #DC143C | |
Gainsboro | #DCDCDC | |
Prugna | #DDA0DD | |
BurlyWood | #DEB887 | |
LightCyan | #E0FFFF | |
Lavanda | #E6E6FA | |
Salmonescuro | #E9967A | |
Viola | #EE82EE | |
PaleGoldenRod | #EEE8AA | |
LightCoral | #F08080 | |
Cachi | #F0E68C | |
AliceBlu | #F0F8FF | |
Melata | #F0FFF0 | |
Azzurro | #F0FFFF | |
SandyBrown | #F4A460 | |
Grano | #F5DEB3 | |
Beige | #F5F5DC | |
Fumo Bianco | #F5F5F5 | |
Crema Di Menta | #F5FFFA | |
GhostWhite | #F8F8FF | |
Salmone | #FA8072 | |
Bianco Antico | #FAEBD7 | |
Biancheria | #FAF0E6 | |
Asta d'oro chiaro giallo | #FAFAD2 | |
OldLace | #DFF5E6 | |
Rosso | #FF0000 | |
Fucsia | #FF00FF | |
Magenta | #FF00FF | |
DeepPink | #FF1493 | |
ArancioneRosso | #FF4500 | |
Pomodoro | #FF6347 | |
HotPink | #FF69B4 | |
Corallo | #FF7F50 | |
Arancione scuro | #FF8C00 | |
Salmone chiaro | #FFA07A | |
Arancia | #FFA500 | |
Rosa chiaro | #FFB6C1 | |
Rosa | #FFC0CB | |
Oro | #FFD700 | |
PeachPuff | #FFDAB9 | |
NavajoBianco | #FFDEAD | |
Mocassino | #FFE4B5 | |
Bisque | #FFE4C4 | |
MistyRose | #FFE4E1 | |
Mandorla pelata | #FFEBCD | |
PapayaWhip | #FFEFD5 | |
LavandaBlush | #FFF0F5 | |
Conchiglia | #FFF5EE | |
Seta di mais | #FFF8DC | |
LimoneChiffon | #FFFACD | |
FlorealeBianco | #FFFAF0 | |
Nevicare | #FFFAFA | |
Giallo | #FFFF00 | |
Giallo chiaro | #FFFFE0 | |
Avorio | #FFFFFF0 | |
Bianco | #FFFFFF |