Come sai, il colore può influenzare lo stato di una persona: sia mentale che fisico. Ogni giorno, mentre navighiamo su siti web su Internet, gli occhi valutano milioni di colori e sfumature. Un web designer che abbia familiarità con la psicologia del colore può manipolare l'umore del visitatore per raggiungere determinati obiettivi.
Ciò è dovuto al fatto che alcune sfumature calmano e altre, al contrario, eccitano. Successivamente parleremo di come il colore viene sintetizzato e visualizzato utilizzando la tecnologia informatica.
RGB è un modello di colore che rappresenta un metodo per ottenere tutti i colori e le loro sfumature mescolando in varie proporzioni tre componenti principali, che sono:
- rosso ( Rosso);
- colore verde ( Verde);
- colore blu ( Blu).
Da qui deriva il nome abbreviato RGB. Questi colori sono stati scelti come principali per un motivo: il motivo è la fisiologia della retina dell'occhio umano e come li percepisce:
Il modello RGB rimane oggi il più popolare e viene utilizzato per riprodurre i colori sugli schermi televisivi e sui monitor dei computer. Poiché i produttori dotano i loro prodotti di caratteristiche diverse, nel 1996 è stato creato un sistema di sintesi del colore unificato basato su RGB chiamato sRGB, sul quale Microsoft e HP hanno lavorato insieme.
Rappresentazione numerica del colore
Come accennato in precedenza, i colori RGB si formano mescolando i colori primari. Per descrivere l'intensità di ciascuno di essi è stato adottato uno schema in cui il colore è rappresentato dall'intervallo 0-255 (8 bit), che in notazione esadecimale corrisponde a 00-FF.
Cioè, i colori primari appariranno così:
- Rosso – RGB (255,0,0);
- Verde – RGB (0,255,0);
- Blu – RGB (0,0,255);
Se l'intensità del colore assume valori inferiori a 255, si ottengono diverse tonalità di rosso, verde e blu. Quella che segue è una tabella delle loro gradazioni, nonché i valori esadecimali di ciascuna tonalità:
Tabelle di colori RGB
Naturalmente, oltre alle gradazioni dei colori primari, ce ne sono di misti e il loro numero è piuttosto elevato. Pertanto è stata creata una tabella dei colori RGB, che presenta tutte le sfumature esistenti, nonché i loro nomi e rappresentazioni numeriche ( in forma decimale ed esadecimale).
Puoi vederlo qui. Questa tabella rende la vita molto più semplice ai web designer, poiché in pochi secondi puoi trovare la tonalità richiesta e scoprirne la rappresentazione numerica.
Tavolozza di colori RGB sicura
Tuttavia, ad un certo punto si è verificato un problema con la visualizzazione dei colori in diversi browser e per risolverlo è stata compilata la cosiddetta tavolozza “sicura” di colori RGB, derivata da calcoli matematici.
Quando il browser non riesce a visualizzare correttamente un colore, proverà a ottenere qualcosa che si avvicini a ciò di cui ha bisogno mescolando colori adiacenti e molto probabilmente il risultato sarà completamente inaccettabile:
Utilizzando i codici colore RGB di questa tavolozza, uno sviluppatore web può stare tranquillo per quanto riguarda la visualizzazione dei colori sulle pagine del proprio sito Web quando visualizzate utilizzando browser, piattaforme e monitor diversi. Anche se al momento la tabella dei colori sicuri sta perdendo la sua rilevanza ( il progresso tecnologico ancora non si ferma), quando lo usi puoi, come si suol dire, dormire sonni tranquilli.
Colore oro nel modello RGB
La parola "oro" fu usata per la prima volta all'inizio del XIV secolo per descrivere il colore di un elemento chimico chiamato Aurum - oro. Nel modello RGB il colore oro è rappresentato dai seguenti valori numerici:
- RGB (255, 215, 0) – sistema decimale;
- HEX #FFD700 – sistema esadecimale.
Colore beige nel modello RGB
Il colore beige occupa un posto piuttosto significativo nella storia, anche se non è il più espressivo. Molti monumenti culturali, in particolare sculture antiche, erano realizzati in pietra ollare e pietra ollare, che hanno una tinta beige. Nel modello RGB, il colore beige ha le seguenti rappresentazioni numeriche.
Esistono diversi modi per rappresentare il colore nel web design.
HEX è un sistema di rappresentazione del colore esadecimale basato su base 16. Per questo sistema, le cifre decimali arabe da 0 a 9 e le lettere latine dalla A alla F vengono utilizzate per completare il numero digitale fino a 16. Per il web design, 16 colori primari (chiave) vengono utilizzati i cosiddetti codici colore esadecimali #RRGGBB, dove ciascuna coppia è responsabile della propria parte di colore: RR – rosso, GG – verde e BB – blu. Ogni frazione di colore varia da 00 a FF.
Altre due rappresentazioni del colore nel web design sono: sotto forma di RGB(*,*,*), dove ciascuna frazione “*” di un colore è rappresentata da cifre decimali da 0 a 255 e da nomi di colori in inglese.
Quando si crea un'immagine a colori, il problema principale è la corretta riproduzione dei colori su diversi tipi di computer, monitor e browser. Se il browser non riesce a visualizzare correttamente un colore, ne seleziona uno simile o mescola più colori. E a volte può essere sostituito con un colore completamente diverso.
Tavolo 16 colori primari, che vengono utilizzati in tutti i browser
| Nome | Colore | Esadecimale | (RGB) |
| Acqua (onda del mare) | #00FFFF | (000,255,255) | |
| Nero | #000000 | (000,000,000) | |
| Blu | #0000FF | (000,000,255) | |
| Fucsia (magenta) | #FF00FF | (255,000,255) | |
| Grigio | #808080 | (128,128,128) | |
| Verde | #008000 | (000,128,000) | |
| Lime (verde brillante) | #00FF00 | (000,255,000) | |
| Marrone (bordeaux scuro) | #800000 | (128,000,000) | |
| Marina (blu scuro) | #000080 | (000,000,128) | |
| Oliva | #808000 | (128,128,000) | |
| Viola | #800080 | (128,000,128) | |
| Rosso | #FF0000 | (255,000,000) | |
| Argento | #C0C0C0 | (192,192,192) | |
| Verde acqua (grigio-verde) | #008080 | (000,128,128) | |
| Bianco | #FFFFFF | (255,255,255) | |
| Giallo | #FFFF00 | (255,255,000) |
Tavolo viola colori e le sue sfumature
| Nome | Colore | Esadecimale | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fucsia (fucsia) | #FF00FF | (255,000,255) | |
| Mauvein (viola anilina) | #EF0097 | (239,000,151) | |
| Rosa salmone (rosa arancio) | #FF91A4 | (255,145,164) | |
| Cenise (una tonalità di viola) | #DE3163 | (153,149,140) | |
| Melanzane Melanzane (melanzane) | #990066 | (153,000,132) | |
| Blush lavanda (rosato-lavanda) | #FFF0F5 | (255,240,245) | |
| Lilla (lilla) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Orchidea (orchidea) | #DA70D6 | (218,112,214) | |
| Rosso-viola (rosso porpora) | #C71585 | (199,021,133) | |
| Sanguigno (sanguigno) | #92000A | (146,000,010) | |
| Cardo selvatico (tonalità di viola) | #D8BFD8 | (185,211,238) | |
| Melanzana viola (una tonalità di viola) | #991199 | (153,017,153) | |
| Rosa vivo (rosa intenso) | #FF007F | (255,000,127) | |
| Rosa lavanda (una sfumatura di viola) | #FBA0E3 | (108,123,139) | |
| Mountbatten rosa | #997ABD | (153,122,141) |
Tavolo grigio colori e le sue sfumature
| Nome | Colore | Esadecimale | (RGB) |
| Grigio | #808080 | (128,128,128) | |
| Grigio | #bebebe | (190,190,190) | |
| (Sfumatura grigia) | #858585 | (133,133,133) | |
| Grigio33 | #545454 | (084,084,084) | |
| (Grigio ardesia) | #708090 | (112,128,144) | |
| (Quarzo) | #99958с | (153,149,140) | |
| (Grigio chiaro) | #bbbbbb | (187,187,187) | |
| (Argento) | #c0c0c0 | (192,192,192) | |
| (Grigio-bianco) | #f0f0f0 | (240,240,240) | |
| (Barbe di Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
| LightGray (Grigio chiaro) | #d3d3d3 | (211,211,211) | |
| Grigio stato chiaro() | #778899 | (119,136,153) | |
| StateGray-1 (Blu fiordaliso pallido1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Blu fiordaliso pallido2) | #b9d3ee | (185,211,238) | |
| StatoGrigio3() | #9fb6cd | (159,182,205) | |
| StatoGrigio4() | #6c7b8b | (108,123,139) |
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.
Per le pagine html i colori sono indicati prevalentemente nel sistema esadecimale. Per fare ciò, vengono utilizzati due tipi di registrazione del codice: completa o abbreviata. Per indicare correttamente il colore html per intero è necessario scrivere sei caratteri (numeri e/o lettere inglesi) dopo il cancelletto, ad esempio il nero si scrive così: #000000. La scorciatoia per specificare i colori html è composta da un cancelletto seguito da tre numeri e/o lettere. Tuttavia, questo tipo di stock può essere utilizzato solo se il record completo di un determinato colore è costituito da simboli identici dopo il cancelletto. Ad esempio, lo stesso colore nero può essere scritto così: #000. Puoi specificare i colori html utilizzando sia caratteri grandi che piccoli, poiché non fanno distinzione tra maiuscole e minuscole.
Ogni carattere scritto dopo "#" corrisponde ad una certa proporzione dei colori rosso, verde e blu. A loro volta, tutti i monitor sono costituiti da un numero enorme di pixel (punti microscopici), ciascuno dei quali include 3 cosiddette "torce elettriche" (sorgenti luminose): rosso, verde e blu. Quindi, regolando l'intensità della luce emessa da queste “torce elettriche”, il monitor visualizza il colore di cui abbiamo bisogno.
Combinando l'intensità di emissione della luce rossa, blu e verde (da 0 a 256), i monitor possono visualizzare 16.000.000 di tonalità diverse.
Inoltre, i colori per i siti Web possono essere indicati verbalmente o in codice RGB.
Oggi si possono scrivere verbalmente 147 colori. È importante sapere che alcuni nomi diversi possono significare gli stessi colori, ad esempio Grigio e Grigio sono il colore grigio (#808080).
Colori sicuri per i siti web.
Non tutti i monitor e browser possono visualizzare correttamente tutti i 16 milioni di colori html.
Se, ad esempio, ti imbatti in un colore che il browser non riesce a visualizzare correttamente, allora:
- Il browser lo sostituisce con quello ad esso più simile e riproducibile con successo;
- Per visualizzare correttamente, il browser può mescolare diversi colori e riprodurre il risultato.
Per garantire che l'output in qualsiasi browser e su qualsiasi monitor sia il colore specificato nel codice, si consiglia di utilizzare "Colori sicuri". Sono stati determinati non manualmente o dal desiderio di qualcun altro, ma matematicamente. Esistono 216 colori sicuri al 100% per i documenti HTML e sebbene le tecnologie odierne abbiano raggiunto il punto in cui i monitor e i browser moderni riconoscono milioni di sfumature, consigliamo di utilizzare questi colori sicuri per garantire la resa cromatica.
| Sistema di colori esadecimale. | Codici colore in RGB (Rosso, Verde, Blu). |
| Codice colore HTML: #000000 | Colore RGB: 0 0 0 |
| Codice colore HTML: #333333 | Colore RGB: 51 51 51 |
| Codice colore HTML: #666666 | Colore RGB: 102 102 102 |
| Codice colore HTML: #999999 | Colore RGB: 153 153 153 |
| Codice colore HTML: #CCCCCC | Colore RGB: 204 204 204 |
| Codice colore HTML: #FFFFFF | Colore RGB: 255 255 255 |
| Codice colore HTML: #666600 | Colore RGB: 102 102 0 |
| Codice colore HTML: #999900 | Colore RGB: 153 153 0 |
| Codice colore HTML: #999933 | Colore RGB: 153 153 51 |
| Codice colore HTML: #999966 | Colore RGB: 153 153 102 |
| Codice colore HTML: #CCCC33 | Colore RGB: 204 204 51 |
| Codice colore HTML: #CCCC66 | Colore RGB: 204 204 102 |
| Codice colore HTML: #333300 | Colore RGB: 51 51 0 |
| Codice colore HTML: #666633 | Colore RGB: 102 102 51 |
| Codice colore HTML: #CCCC99 | Colore RGB: 204 204 153 |
| Codice colore HTML: #CCFF33 | Colore RGB: 204 255 51 |
| Codice colore HTML: #CCFF00 | Colore RGB: 204 255 0 |
| Codice colore HTML: #CCFF66 | Colore RGB: 204 255 102 |
| Codice colore HTML: #669900 | Colore RGB: 102 153 0 |
| Codice colore HTML: #99CC33 | Colore RGB: 153 204 51 |
| Codice colore HTML: #99CC00 | Colore RGB: 153 204 0 |
| Codice colore HTML: #99CC66 | Colore RGB: 153 204 102 |
| Codice colore HTML: #99FF33 | Colore RGB: 153 255 51 |
| Codice colore HTML: #99FF00 | Colore RGB: 153 255 0 |
| Codice colore HTML: #336600 | Colore RGB: 51 102 0 |
| Codice colore HTML: #669933 | Colore RGB: 102 153 51 |
| Codice colore HTML: #66CC33 | Colore RGB: 102 204 51 |
| Codice colore HTML: #66CC00 | Colore RGB: 102 204 0 |
| Codice colore HTML: #99FF66 | Colore RGB: 153 255 102 |
| Codice colore HTML: #CCFF99 | Colore RGB: 204 255 153 |
| Codice colore HTML: #009900 | Colore RGB: 0 153 0 |
| Codice colore HTML: #339900 | Colore RGB: 51 153 0 |
| Codice colore HTML: #33CC00 | Colore RGB: 51 204 0 |
| Codice colore HTML: #33FF00 | Colore RGB: 51 255 0 |
| Codice colore HTML: #66FF33 | Colore RGB: 102 255 51 |
| Codice colore HTML: #66FF00 | Colore RGB: 102 255 0 |
| Codice colore HTML: #00CC33 | Colore RGB: 0 204 51 |
| Codice colore HTML: #33CC33 | Colore RGB: 51 204 51 |
| Codice colore HTML: #00CC00 | Colore RGB: 0 204 0 |
| Codice colore HTML: #00FF00 | Colore RGB: 0 255 0 |
| Codice colore HTML: #00FF33 | Colore RGB: 0 255 51 |
| Codice colore HTML: #33FF33 | Colore RGB: 51 255 51 |
| Codice colore HTML: #003300 | Colore RGB: 0 51 0 |
| Codice colore HTML: #336633 | Colore RGB: 51 102 51 |
| Codice colore HTML: #669966 | Colore RGB: 102 153 102 |
| Codice colore HTML: #66CC66 | Colore RGB: 102 204 102 |
| Codice colore HTML: #99CC99 | Colore RGB: 153 204 153 |
| Codice colore HTML: #CCFFCC | Colore RGB: 204 255 204 |
| Codice colore HTML: #006600 | Colore RGB: 0 102 0 |
| Codice colore HTML: #339933 | Colore RGB: 51 153 51 |
| Codice colore HTML: #00FF66 | Colore RGB: 0 255 102 |
| Codice colore HTML: #33FF66 | Colore RGB: 51 255 102 |
| Codice colore HTML: #66FF66 | Colore RGB: 102 255 102 |
| Codice colore HTML: #99FF99 | Colore RGB: 153 255 153 |
| Codice colore HTML: #009933 | Colore RGB: 0 153 51 |
| Codice colore HTML: #00CC66 | Colore RGB: 0 204 102 |
| Codice colore HTML: #33CC66 | Colore RGB: 51 204 102 |
| Codice colore HTML: #00FF99 | Colore RGB: 0 255 153 |
| Codice colore HTML: #33FF99 | Colore RGB: 51 255 153 |
| Codice colore HTML: #66FF99 | Colore RGB: 102 255 153 |
| Codice colore HTML: #006633 | Colore RGB: 0 102 51 |
| Codice colore HTML: #009966 | Colore RGB: 0 153 102 |
| Codice colore HTML: #339966 | Colore RGB: 51 153 102 |
| Codice colore HTML: #00CC99 | Colore RGB: 0 204 153 |
| Codice colore HTML: #33CC99 | Colore RGB: 51 204 153 |
| Codice colore HTML: #66CC99 | Colore RGB: 102 204 153 |
| Codice colore HTML: #009999 | Colore RGB: 0 153 153 |
| Codice colore HTML: #33CCCC | Colore RGB: 51 204 204 |
| Codice colore HTML: #00FFCC | Colore RGB: 0 255 204 |
| Codice colore HTML: #33FFCC | Colore RGB: 51 255 204 |
| Codice colore HTML: #66FFCC | Colore RGB: 102 255 204 |
| Codice colore HTML: #99FFCC | Colore RGB: 153 255 204 |
| Codice colore HTML: #00CCCC | Colore RGB: 0 204 204 |
| Codice colore HTML: #00FFFF | Colore RGB: 0 255 255 |
| Codice colore HTML: #33FFFF | Colore RGB: 51 255 255 |
| Codice colore HTML: #66FFFF | Colore RGB: 102 255 255 |
| Codice colore HTML: #99FFFF | Colore RGB: 153 255 255 |
| Codice colore HTML: #CCFFFF | Colore RGB: 204 255 255 |
| Codice colore HTML: #336666 | Colore RGB: 51 102 102 |
| Codice colore HTML: #006666 | Colore RGB: 0 102 102 |
| Codice colore HTML: #669999 | Colore RGB: 102 153 153 |
| Codice colore HTML: #339999 | Colore RGB: 51 153 153 |
| Codice colore HTML: #66CCCC | Colore RGB: 102 204 204 |
| Codice colore HTML: #99CCCC | Colore RGB: 153 204 204 |
| Codice colore HTML: #003333 | Colore RGB: 0 51 51 |
| Codice colore HTML: #0099CC | Colore RGB: 0 153 204 |
| Codice colore HTML: #3399CC | Colore RGB: 51 153 204 |
| Codice colore HTML: #00CCFF | Colore RGB: 0 204 255 |
| Codice colore HTML: #33CCFF | Colore RGB: 51 204 255 |
| Codice colore HTML: #66CCFF | Colore RGB: 102 204 255 |
| Codice colore HTML: #006699 | Colore RGB: 0 102 153 |
| Codice colore HTML: #336699 | Colore RGB: 51 102 153 |
| Codice colore HTML: #6699CC | Colore RGB: 102 153 204 |
| Codice colore HTML: #0099FF | Colore RGB: 0 153 255 |
| Codice colore HTML: #3399FF | Colore RGB: 51 153 255 |
| Codice colore HTML: #99CCFF | Colore RGB: 153 204 255 |
| Codice colore HTML: #003366 | Colore RGB: 0 51 102 |
| Codice colore HTML: #003399 | Colore RGB: 0 51 153 |
| Codice colore HTML: #0033FF | Colore RGB: 0 51 255 |
| Codice colore HTML: #3366CC | Colore RGB: 51 102 204 |
| Codice colore HTML: #0066CC | Colore RGB: 0 102 204 |
| Codice colore HTML: #0066FF | Colore RGB: 0 102 255 |
| Codice colore HTML: #000033 | Colore RGB: 0 0 51 |
| Codice colore HTML: #0033CC | Colore RGB: 0 51 204 |
| Codice colore HTML: #0000CC | Colore RGB: 0 0 204 |
| Codice colore HTML: #0000FF | Colore RGB: 0 0 255 |
| Codice colore HTML: #3366FF | Colore RGB: 51 102 255 |
| Codice colore HTML: #6699FF | Colore RGB: 102 153 255 |
| Codice colore HTML: #000066 | Colore RGB: 0 0 102 |
| Codice colore HTML: #000099 | Colore RGB: 0 0 153 |
| Codice colore HTML: #3333CC | Colore RGB: 51 51 204 |
| Codice colore HTML: #3300CC | Colore RGB: 51 0 204 |
| Codice colore HTML: #3300FF | Colore RGB: 51 0 255 |
| Codice colore HTML: #3333FF | Colore RGB: 51 51 255 |
| Codice colore HTML: #333366 | Colore RGB: 51 51 102 |
| Codice colore HTML: #333399 | Colore RGB: 51 51 153 |
| Codice colore HTML: #666699 | Colore RGB: 102 102 153 |
| Codice colore HTML: #6666CC | Colore RGB: 102 102 204 |
| Codice colore HTML: #6666FF | Colore RGB: 102 102 255 |
| Codice colore HTML: #9999CC | Colore RGB: 153 153 204 |
| Codice colore HTML: #330066 | Colore RGB: 51 0 102 |
| Codice colore HTML: #330099 | Colore RGB: 51 0 153 |
| Codice colore HTML: #6600FF | Colore RGB: 102 0 255 |
| Codice colore HTML: #6633FF | Colore RGB: 102 51 255 |
| Codice colore HTML: #9999FF | Colore RGB: 153 153 255 |
| Codice colore HTML: #CCCCFF | Colore RGB: 204 204 255 |
| Codice colore HTML: #330033 | Colore RGB: 51 0 51 |
| Codice colore HTML: #663399 | Colore RGB: 102 51 153 |
| Codice colore HTML: #6633CC | Colore RGB: 102 51 204 |
| Codice colore HTML: #6600CC | Colore RGB: 102 0 204 |
| Codice colore HTML: #9966FF | Colore RGB: 153 102 255 |
| Codice colore HTML: #9966CC | Colore RGB: 153 102 204 |
| Codice colore HTML: #663366 | Colore RGB: 102 51 102 |
| Codice colore HTML: #660099 | Colore RGB: 102 0 153 |
| Codice colore HTML: #9900FF | Colore RGB: 153 0 255 |
| Codice colore HTML: #9933FF | Colore RGB: 153 51 255 |
| Codice colore HTML: #9933CC | Colore RGB: 153 51 204 |
| Codice colore HTML: #CC99FF | Colore RGB: 204 153 255 |
| Codice colore HTML: #660066 | Colore RGB: 102 0 102 |
| Codice colore HTML: #996699 | Colore RGB: 153 102 153 |
| Codice colore HTML: #9900CC | Colore RGB: 153 0 204 |
| Codice colore HTML: #CC00FF | Colore RGB: 204 0 255 |
| Codice colore HTML: #CC33FF | Colore RGB: 204 51 255 |
| Codice colore HTML: #CC66FF | Colore RGB: 204 102 255 |
| Codice colore HTML: #993399 | Colore RGB: 153 51 153 |
| Codice colore HTML: #990099 | Colore RGB: 153 0 153 |
| Codice colore HTML: #CC33CC | Colore RGB: 204 51 204 |
| Codice colore HTML: #CC00CC | Colore RGB: 204 0 204 |
| Codice colore HTML: #CC66CC | Colore RGB: 204 102 204 |
| Codice colore HTML: #CC99CC | Colore RGB: 204 153 204 |
| Codice colore HTML: #CC3399 | Colore RGB: 204 51 153 |
| Codice colore HTML: #FF00FF | Colore RGB: 255 0 255 |
| Codice colore HTML: #FF33FF | Colore RGB: 255 51 255 |
| Codice colore HTML: #FF66FF | Colore RGB: 255 102 255 |
| Codice colore HTML: #FF99FF | Colore RGB: 255 153 255 |
| Codice colore HTML: #FFCCFF | Colore RGB: 255 204 255 |
| Codice colore HTML: #990066 | Colore RGB: 153 0 102 |
| Codice colore HTML: #CC0099 | Colore RGB: 204 0 153 |
| Codice colore HTML: #CC6699 | Colore RGB: 204 102 153 |
| Codice colore HTML: #FF33CC | Colore RGB: 255 51 204 |
| Codice colore HTML: #FF00CC | Colore RGB: 255 0 204 |
| Codice colore HTML: #FF66CC | Colore RGB: 255 102 204 |
| Codice colore HTML: #660033 | Colore RGB: 102 0 51 |
| Codice colore HTML: #993366 | Colore RGB: 153 51 102 |
| Codice colore HTML: #CC0066 | Colore RGB: 204 0 102 |
| Codice colore HTML: #FF0099 | Colore RGB: 255 0 153 |
| Codice colore HTML: #FF3399 | Colore RGB: 255 51 153 |
| Codice colore HTML: #FF99CC | Colore RGB: 255 153 204 |
| Codice colore HTML: #663333 | Colore RGB: 102 51 51 |
| Codice colore HTML: #996666 | Colore RGB: 153 102 102 |
| Codice colore HTML: #CC3366 | Colore RGB: 204 51 102 |
| Codice colore HTML: #FF0066 | Colore RGB: 255 0 102 |
| Codice colore HTML: #FF3366 | Colore RGB: 255 51 102 |
| Codice colore HTML: #FF6699 | Colore RGB: 255 102 153 |
| Codice colore HTML: #330000 | Colore RGB: 51 0 0 |
| Codice colore HTML: #990033 | Colore RGB: 153 0 51 |
| Codice colore HTML: #993333 | Colore RGB: 153 51 51 |
| Codice colore HTML: #CC3333 | Colore RGB: 204 51 51 |
| Codice colore HTML: #CC6666 | Colore RGB: 204 102 102 |
| Codice colore HTML: #CC9999 | Colore RGB: 204 153 153 |
| Codice colore HTML: #CC0033 | Colore RGB: 204 0 51 |
| Codice colore HTML: #FF0033 | Colore RGB: 255 0 51 |
| Codice colore HTML: #FF3333 | Colore RGB: 255 51 51 |
| Codice colore HTML: #FF6666 | Colore RGB: 255 102 102 |
| Codice colore HTML: #FF9999 | Colore RGB: 255 153 153 |
| Codice colore HTML: #FFCCCC | Colore RGB: 255 204 204 |
| Codice colore HTML: #990000 | Colore RGB: 153 0 0 |
| Codice colore HTML:#CC0000 | Colore RGB: 204 0 0 |
| Codice colore HTML: #FF0000 | Colore RGB: 255 0 0 |
| Codice colore HTML: #FF3300 | Colore RGB: 255 51 0 |
| Codice colore HTML: #CC3300 | Colore RGB: 204 51 0 |
| Codice colore HTML: #FF6633 | Colore RGB: 255 102 51 |
| Codice colore HTML: #660000 | Colore RGB: 102 0 0 |
| Codice colore HTML: #993300 | Colore RGB: 153 51 0 |
| Codice colore HTML: #CC6633 | Colore RGB: 204 102 51 |
| Codice colore HTML: #FF6600 | Colore RGB: 255 102 0 |
| Codice colore HTML: #FF9966 | Colore RGB: 255 153 102 |
| Codice colore HTML: #FFCC99 | Colore RGB: 255 204 153 |
| Codice colore HTML: #663300 | Colore RGB: 102 51 0 |
| Codice colore HTML: #996633 | Colore RGB: 153 102 51 |
| Codice colore HTML: #CC6600 | Colore RGB: 204 102 0 |
| Codice colore HTML: #CC9966 | Colore RGB: 204 153 102 |
| Codice colore HTML: #FF9933 | Colore RGB: 255 153 51 |
| Codice colore HTML: #FF9900 | Colore RGB: 255 153 0 |
| Codice colore HTML: #996600 | Colore RGB: 153 102 0 |
| Codice colore HTML: #CC9933 | Colore RGB: 204 153 51 |
| Codice colore HTML: #CC9900 | Colore RGB: 204 153 0 |
| Codice colore HTML: #FFCC33 | Colore RGB: 255 204 51 |
| Codice colore HTML: #FFCC00 | Colore RGB: 255 204 0 |
| Codice colore HTML: #FFCC66 | Colore RGB: 255 204 102 |
| Codice colore HTML: #CCCC00 | Colore RGB: 204 204 0 |
| Codice colore HTML: #FFFF00 | Colore RGB: 255 255 0 |
| Codice colore HTML: #FFFF33 | Colore RGB: 255 255 51 |
| Codice colore HTML: #FFFF66 | Colore RGB: 255 255 102 |
| Codice colore HTML: #FFFF99 | Colore RGB: 255 255 153 |
| Codice colore HTML: #FFFFCC | Colore RGB: 255 255 204 |
Questa tabella include 216 codici colore HTML sicuri. Ogni colore ha un valore in RGB per specificare il colore negli editor grafici e HEX per specificare il colore nelle pagine html.
>>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
A 255
, o da 0%
A 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 A 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, scorso- blu colori. Tutti i numeri possono assumere valori nell'intervallo da 00 A 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 | Bisque | Blanchedalmond | ||||
| Bluviola | 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 intenso | Blu cielo profondo | Scura | Dodgerblu | ||||
| Mattone refrattario | Florealebianco | Verde foresta | Fucsia | ||||
| Gainsboro | Bianco fantasma | Oro | Verga d'oro | ||||
| Grigio | Verdegiallo | 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 | Navajobianco | Marina | 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 | Verde mare | Conchiglia | Siena | ||||
| Argento | Blu cielo | Blu ardesia | Grigio ardesia | ||||
| Nevicare | Verde primavera | Blu acciaio | Abbronzatura | ||||
| Verde acqua | Cardo | Pomodoro | Turchese | ||||
| Viola | Grano | Fumo bianco | Gialloverde |
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 garantito 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 |