Come sai, il colore può influenzare le condizioni di una persona: sia mentali che fisiche. Ogni giorno, guardando i siti su Internet, gli occhi valutano milioni di colori e sfumature. Un web designer che ha familiarità con la psicologia del colore può manipolare l'umore di un visitatore per raggiungere qualsiasi obiettivo.
Ciò è dovuto al fatto che alcune sfumature sono rilassanti, mentre altre, al contrario, sono eccitanti. 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:
- Colore 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 il più popolare oggi e viene utilizzato per riprodurre i colori su schermi TV e monitor di computer. Poiché i produttori dotano i loro prodotti di caratteristiche diverse, nel 1996 è stato creato un sistema unificato di sintesi del colore basato su RGB chiamato sRGB, a cui Microsoft e HP hanno collaborato.
Rappresentazione numerica del colore
Come accennato in precedenza, i colori RGB si formano mescolando i colori principali. Per descrivere l'intensità di ciascuno di essi è stato adottato uno schema in cui il colore è rappresentato dal range 0-255 (8 bit), che nel sistema esadecimale corrisponde a 00-FF.
Cioè, i colori primari saranno simili a questo:
- 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. Di seguito è riportata una tabella della loro gradazione, nonché i valori esadecimali di ciascuna delle sfumature:
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 di colori RGB, in cui sono presentate tutte le sfumature esistenti, nonché i loro nomi e rappresentazioni numeriche ( decimale ed esadecimale).
Puoi conoscerlo qui. Questa tabella rende la vita molto più semplice ai web designer, poiché in pochi secondi puoi trovare la tonalità desiderata e scoprirne la rappresentazione numerica.
Tavolozza dei colori RGB sicura
Tuttavia, a un certo punto si è verificato un problema di visualizzazione dei colori in diversi browser e per risolverlo è stata compilata una cosiddetta tavolozza "sicura" di colori RGB, che sono stati dedotti da calcoli matematici.
Quando il browser non riesce a visualizzare correttamente un colore, cerca di avvicinarsi a quello desiderato mescolando i colori adiacenti e molto probabilmente il risultato sarà del tutto inaccettabile:
Utilizzando i codici colore RGB di questa tavolozza, uno sviluppatore web non può temere di visualizzare i colori sulle pagine del proprio sito se visualizzate con browser, piattaforme e monitor diversi. Sebbene al momento la tabella dei colori sicuri stia perdendo di rilevanza ( il progresso tecnico non si ferma ancora), quando lo usi, puoi, come si suol dire, dormire bene.
Colore oro nel modello RGB
Per la prima volta la parola "oro" fu usata all'inizio del XIV secolo per descrivere il colore di un elemento chimico chiamato Aurum - oro. In RGB, l'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. In RGB, il beige ha le seguenti rappresentazioni numeriche.
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 definisce 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
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 |
>> Gestione del colore
Valori di colore RGB esadecimali
I metodi di descrizione ed elaborazione del colore differiscono l'uno dall'altro per la presentazione finale a cui sono destinati. Confrontiamo, ad esempio, le rappresentazioni dei colori per la stampa e per i monitor dei computer. Nel primo caso, la base è presa bianco il colore della carta, sulla quale vengono successivamente applicati tre colori primari: blu, viola e giallo... Mescolandosi tra loro e con il colore bianco della carta in diverse proporzioni, questi tre colori primari danno sfumature di colore diverse, ad eccezione del nero puro, oppure, in completa assenza di vernice, danno il colore bianco della carta. Se aggiungiamo il nero, otteniamo CMYK- un metodo di resa cromatica, quando il colore richiesto si ottiene sottraendo al bianco i colori mancanti.
Nel secondo caso, la base è presa Nero il colore dello schermo del monitor, ogni cui cella si illumina in uno dei tre colori seguenti: rosso-Rosso, verde-verde e blu-blu. Quindi, in completa assenza di bagliore, otteniamo un colore dello schermo nero puro e uno qualsiasi dei colori richiesti è impostato dal rapporto di ciascuno dei tre colori. In questo caso, otteniamo RGB- un metodo di trasferimento del colore. I colori primari possono variare da 0
prima di 255
, o da 0%
prima di 100%
o può essere rappresentato come un valore esadecimale. Nell'immagine qui sotto, puoi vedere i risultati della miscelazione dei colori primari.
Il sistema numerico esadecimale, in contrasto con il numero decimale nella sua riga di cifre, non ha dieci cifre, ma sedici, da cui il nome. Di conseguenza, le varianti non ripetute di combinazioni di due cifre possono essere solo - 256 , per continuare una serie di cifre dopo 9 lettere da UN prima di F quindi la riga 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, nella media verde, ultima cosa- blu colori. Tutti i numeri possono assumere valori nell'intervallo da 00 prima di FF(da 0 a 255). Ad esempio: il verde è dato come # 00FF00, rosso - come #FF0000, blu - come # 0000FF, bianco - come #FFFFFF, la completa assenza di colore o nero è data come #000000 .
Nel form sottostante puoi impostare 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 sono le gradazioni di rosso, blu e verde.
| Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il 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 |
Specificare il colore usando stringhe letterali
Per facilità d'uso, ad alcuni colori e alle loro combinazioni sono stati assegnati nomi che sono riconosciuti da tutti i browser, ed è stato possibile impostarne molti per nome. La tabella seguente elenca alcuni dei nomi dei colori:
| Visualizza | nome | Visualizza | nome | Visualizza | nome | Visualizza | nome |
| bianco | rosso | arancione | Giallo | ||||
| Verde | Blu | Viola | Nero | ||||
| AliceBlue | Bianco Antico | Acqua | Acquamarina | ||||
| Azzurro | Beige | bisque | blanchedalmond | ||||
| Blu viola | Marrone | Burlywood | Cadetblue | ||||
| Certosa | Cioccolato | Corallo | Fiordaliso | ||||
| Seta di mais | Cremisi | ciano | Blu scuro | ||||
| Darkciano | Darkgoldenrod | Grigio scuro | Verde scuro | ||||
| kaki scuro | Darkmagenta | verde oliva scuro | Arancione scuro | ||||
| Orchidea scura | Rosso scuro | salmone scuro | verde scuro | ||||
| Darkslateblue | Darkslategray | Turchese scuro | viola scuro | ||||
| Rosa scuro | Deepskyblue | Dimgray | Dodgerblue | ||||
| mattone refrattario | Florealebianco | Verde foresta | fucsia | ||||
| Gainsboro | Ghostwhite | Oro | Fiordoropoli | ||||
| Grigio | Verde giallo | Melata | Rosa caldo | ||||
| indiano rosso | Indaco | Avorio | Cachi | ||||
| Lavanda | blush lavanda | Lemonchiffon | Azzurro | ||||
| corallo chiaro | Lightciano | Lightcoldenrodgiallo | Verde chiaro | ||||
| Grigio chiaro | Rosa chiaro | salmone leggero | verde chiaro | ||||
| Azzurro Light | grigio chiaro | Lightsteelblue | Giallo chiaro | ||||
| Lime | Verde lime | Biancheria | Magenta | ||||
| Marrone | Acquamarina media | blu medio | Orchidea media | ||||
| Viola medio | Mediumseagreen | Mediumslateblue | Medioprimaverile | ||||
| Turchese medio | viola medio | Blu notte | crema alla menta | ||||
| Mistyrose | Navajowhite | Marina Militare | Oldlace | ||||
| Oliva | Olivedrab | Rosso-arancio | Orchidea | ||||
| pallida verga d'oro | Verde pallido | turchese pallido | viola pallido | ||||
| papayawhip | Peachpuff | Perù | Rosa | ||||
| Prugna | blu polvere | marrone rosato | Blu Reale | ||||
| marrone sella | Mare verde | Conchiglia | Siena | ||||
| D'argento | Cielo blu | Blu ardesia | grigio ardesia | ||||
| Neve | Verde primavera | Blu acciaio | Tan | ||||
| verde acqua | Cardo | Pomodoro | Turchese | ||||
| Viola | Grano | Fumo bianco | Giallo verde |
Utilizzo di un selettore di colori sicuro
Sfortunatamente, su piattaforme diverse, con impostazioni di sistema diverse, la corretta resa cromatica è un problema. Il fatto è che il browser cerca sempre di adattare la tavolozza dei colori del documento alle impostazioni di sistema e alle capacità del monitor, mescolando indipendentemente 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, di cui ogni colore è garantito per essere reso uguale da tutti i browser su piattaforme diverse. Questo è il cosiddetto garantito tavolozza, chiamata anche sicuro tavolozza. Questa tavolozza include i colori, i cui componenti di colore assumono i seguenti valori: 00 ,33 ,66 ,99 , CC,FF, in tutto il possibile 216 loro combinazioni.
| Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il codice | Visualizza | il 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 |
Il colore nel linguaggio CSS può essere impostato in diversi modi:
- per nome,
- per valore esadecimale,
- nei formati RGB e RGBA,
- nei formati HSL e HSLA.
Assegnazione del colore per nome
I browser supportano la specifica di alcuni colori per gli elementi in base al nome. In questa tabella, alcune parole chiave (nomi di colore inglesi) utilizzate per impostare le proprietà del colore sono codice RGB, codice esadecimale (HEX) e codice HSL.
| Nome | Colore | RGB | ESADECIMALE | Hsl | Descrizione |
|---|---|---|---|---|---|
| bianco | RGB (255, 255, 255) | #ffffff o #ffff | hsl (0, 0%, 100%) | bianco | |
| d'argento | RGB (192, 192, 192) | # c0c0c0 | hsl (0, 0%, 75%) | Grigio | |
| grigio | RGB (128, 128, 128) | #808080 | hsl (0, 0%, 50%) | Grigio scuro | |
| Nero | RGB (0, 0, 0) | # 000000 o # 000 | hsl (0, 0%, 0%) | Nero | |
| marrone | RGB (128, 0, 0) | #800000 | hsl (0, 100%, 25%) | Rosso scuro | |
| rosso | RGB (255, 0, 0) | #ff0000 o #f00 | hsl (0, 100%, 50%) | rosso | |
| arancione | RGB (255, 165, 0) | #ffa500 | slm (38,8, 100%, 50%) | arancione | |
| giallo | RGB (255, 255, 0) | # ffff00 o # ff0 | hsl (60, 100%, 50%) | Giallo | |
| oliva | RGB (128, 128, 0) | #808000 | hsl (60, 100%, 25%) | Oliva | |
| lime | RGB (0, 255, 0) | # 00ff00 o # 0f0 | slm (120, 100%, 50%) | Verde chiaro | |
| verde | RGB (0, 128, 0) | #008000 | hsl (120, 100%, 25%) | Verde | |
| acqua | RGB (0, 255, 255) | # 00ffff o # 0ff | hsl (180, 100%, 50%) | Blu | |
| blu | RGB (0, 0, 255) | # 0000ff o # 00f | hsl (240, 100%, 50%) | Blu | |
| Marina Militare | RGB (0,0,128) | #000080 | hsl (240, 100%, 25%) | blu navy | |
| verde acqua | RGB (0, 128, 128) | #008080 | hsl (180, 100%, 25%) | Blu verde | |
| fucsia | RGB (255, 0, 255) | # ff00ff o # f0f | alta velocità (300, 100%, 50%) | Rosa | |
| viola | RGB (128, 0, 128) | #800080 | hsl (300, 100%, 25%) | Viola |
Questo è un esempio dell'uso dei nomi dei colori, i nomi dei colori sono presi dalla tabella estesa.
Ecco come funziona questo codice:
Impostazione del colore utilizzando RGB
RGB è un modello di colore additivo. In inglese addizione- aggiunta. RGB è un'abbreviazione delle parole inglesi: rosso, verde, blu - rosso, verde, blu). Da ciò è chiaro che nel modello RGB, i colori vengono sintetizzati aggiungendo tre colori (rosso, verde, blu) in quantità diverse.
Mescolando rosso, verde e blu, puoi ottenere diversi milioni di sfumature. Tutte le possibili combinazioni sono memorizzate nella memoria dei computer.
Arriva al punto.
Per impostare le proprietà in questo formato, utilizzare la notazione rgb (r, g, b), dove r, g, b sono tre canali per ogni colore (rosso, verde, blu). I valori per ogni canale vanno da 0 a 255.
Codice d'esempio.
Per chiarire tutto, darò un codice di esempio:
Ecco come dovrebbe funzionare questo esempio:
Fig. 1. Colori in RGB. Spiegazioni per esempio.
All'inizio della pagina creiamo una classe div.rgb, necessaria affinché i blocchi creati dal tag
Successivamente, nel codice, impostiamo il colore di sfondo del blocco
Prova a modificare questo esempio e specifica i tuoi valori, ad esempio rgb (100, 100, 100).
Impostazione del colore tramite RGBA
CSS3 introduce un nuovo strumento per lavorare con il colore: il formato RGBA. Può essere definito un'evoluzione del modello RGB, ma con l'aggiunta di un nuovo canale: A o canale alfa. Questo canale imposta la trasparenza del colore. I suoi valori sono impostati nell'intervallo da 0 a 1. Un valore uguale a 0 corrisponde a piena trasparenza, 1 - a piena opacità (il colore sarà lo stesso specificato nei primi tre canali RGB) e intermedio valori, come 0,4 o 0,6 - a vari gradi di traslucenza.
Codice d'esempio.
È così che funziona:
Questo codice è visivamente simile al seguente, che utilizza il modello RGB per impostare il valore del colore:
Ecco il risultato:
Un valore del canale alfa uguale a zero rende invisibile qualsiasi colore - assolutamente trasparente, un valore pari a uno traduce il colore nel codice RGB senza modifiche. La proprietà rgba (255,0,0,1.0) mostra rgb (255, 0, 0) rosso.
Valore esadecimale (codice HEX)
Nella vita di tutti i giorni, usiamo il sistema di conteggio decimale. Le sue origini sono molto semplici: abbiamo dieci dita sulle mani ed era conveniente contare sulle dita nella vita. Se nel sistema decimale ci sono dieci cifre: da 0 a 9 e il numero 10 è già la cifra successiva, nel sistema esadecimale ci sono 16 cifre e la cifra successiva sarà il numero 16.
Per indicare i codici colore come cifre esadecimali, vengono utilizzate le normali cifre decimali da 0 a 9 e per indicare le cifre da 10 a 15, vengono utilizzate lettere latine da A a F, ovvero (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Per chiarezza, riassumiamo questo in una tabella:
Per scrivere numeri esadecimali maggiori di F (15 nel sistema decimale), come nel sistema decimale, si usa anche l'unione di due cifre, ma già esadecimale, il che è ovvio. Quindi, per scrivere il numero decimale 255 in notazione esadecimale viene utilizzato FF.
Il sistema esadecimale è più comprensibile per il computer, elabora più velocemente i valori specificati dal valore esadecimale.
Per specificare il colore in sistema esadecimale, anteporre al valore numerico un segno "#", esempio: # FFC0CB. Il valore # FFC0CB stesso è costituito da tre cifre esadecimali FF, C0 e CB. Il significato di questa notazione è lo stesso dell'impostazione del colore RGB (rgb (r, g, b)) - ogni cifra esadecimale nel codice HEX indica la saturazione del colore nel suo canale RGB.
Questo codice visualizzerà i seguenti elementi:
Ed ecco un'immagine con il risultato della sezione "Impostazione del colore con RGB" in questa pagina sopra.
Fig. 1. Colori in RGB. Vediamo che i colori sono identici.
È consentita una notazione abbreviata del codice HEX del colore: un numero a 6 cifre può essere scritto come un numero a 3 cifre. Questo è valido solo quando vengono ripetute due cifre nel valore del colore di un canale.
Cioè, la seguente abbreviazione della notazione è accettabile:
Ad esempio, il colore # ff22aa può essere scritto in questo modo - # f2a, oppure il colore # 44aa22 può essere specificato come # 4a2.
Impostazione del colore utilizzando HSL
CSS3 introduce un nuovo formato per specificare i colori.
HSL è un'abbreviazione delle parole inglesi Hue, Saturate e Lightness.
La tonalità in HSL è un valore di colore su una ruota dei colori speciale (Figura 2) ed è specificato in gradi. In analogia con il modello RGB, 0° corrisponde al rosso, 120° corrisponde al verde e 240° corrisponde al blu.
Il valore della tonalità andrà da 0 a 359.
Figura 2. Ruota dei colori HSL. Il secondo valore è la saturazione (Saturate) è impostato in percentuale. Al 100% di saturazione, il colore è massimo "succoso", poiché l'indicatore di saturazione si sposta allo 0%, il colore diventa sempre più opaco e diventa grigio.
Anche il terzo valore, Luminosità, è impostato come percentuale. Maggiore è la percentuale, più brillante sarà il colore. I valori estremi di 0% e 100% significheranno rispettivamente i colori nero (nessuna luce) e bianco (spento), indipendentemente dal colore selezionato dalla ruota dei colori nel primo canale. Il valore ottimale di luminosità del colore può essere considerato pari al 50%.
Impostazione del colore con HSLA
HSLA è correlato a HSL, proprio come RGB a RGBA. Nel formato HSLA, come in RGBA, viene aggiunto un canale alfa responsabile della trasparenza del colore.
Il colore HSL è più facile da leggere. Possiamo dire che è intuitivo. Ad esempio, un codice hsl (120,60%, 50%) può rappresentare il colore finale se in memoria è presente un'immagine della ruota dei colori HSL. Lo stesso non si può dire dei formati RGB e HEX, il codice colore specificato in questi formati diventa comprensibile solo dopo essere stato visualizzato sul monitor.
I nuovi formati in CSS3 (HSL, HSLA e RGBA) funzionano nei browser a partire dalle versioni: IE 9.0, Opera 10.0 Firefox 3.0. Come faccio a far funzionare gli stili sui browser meno recenti?
Someblock (colore di sfondo: rgb (255,50,50); colore di sfondo: rgba (255,50,50,0.85))
Quando si utilizza questo codice nei browser meno recenti, il colore di sfondo per la classe .somebloсk, anche se non utilizzerà il canale alfa, verrà visualizzato in formato RGB.
