Vlad Merzevich
In HTML, il colore viene specificato in due modi: utilizzando un codice esadecimale e il nome di alcuni colori. Il metodo più comunemente usato si basa sul sistema esadecimale, in quanto il più universale.
Colori esadecimali
HTML utilizza numeri esadecimali per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 sono sostituiti da lettere latine. In tavola. 6.1 mostra la corrispondenza tra numeri decimali ed esadecimali.
I numeri maggiori di 15 nel sistema esadecimale sono formati combinando due numeri in uno (Tabella 6.2). Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale.
Per evitare confusione nella definizione del sistema numerico, il numero esadecimale è preceduto dal cancelletto #, ad esempio #aa69cc. In questo caso, il caso non ha importanza, quindi è consentito scrivere #F0F0F0 o #f0f0f0.
Un colore tipico utilizzato in HTML è il seguente.
Qui, il colore di sfondo della pagina Web è impostato su #FA8E47. Il cancelletto # davanti a un numero significa che è in esadecimale. Le prime due cifre (FA) definiscono la componente rossa del colore, la terza e la quarta cifra (8E) la componente verde e le ultime due cifre (47) la componente blu. Il risultato finale è questo colore.
fa | + | 8E | + | 47 | = | FA8E47 |
Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF, che alla fine formano 256 sfumature. Pertanto, il numero totale di colori può essere 256x256x256 = 16.777.216 combinazioni. Il modello di colore basato sui componenti rosso, verde e blu è chiamato RGB (rosso, verde, blu; rosso, verde, blu). Questo modello è additivo (da add - add), in cui l'aggiunta di tutti e tre i componenti forma il bianco.
Per facilitare la navigazione con colori esadecimali, tieni in considerazione alcune regole.
- Se i valori delle componenti del colore sono gli stessi (ad esempio: #D6D6D6), si otterrà una tinta grigia. Più alto è il numero, più chiaro è il colore e i valori cambiano da #000000 (nero) a #FFFFFF (bianco).
- Se la componente rossa è resa massima (FF) si forma un colore rosso brillante e le componenti rimanenti sono impostate su zero. Il colore con il valore #FF0000 è la tinta rossa più rossa possibile. Lo stesso vale per il verde (#00FF00) e il blu (#0000FF).
- Il giallo (#FFFF00) si ottiene mescolando il rosso con il verde. Questo è chiaramente visibile sulla ruota dei colori (Fig. 6.1), che presenta i colori primari (rosso, verde, blu) e complementari o complementari. Questi includono giallo, ciano e viola (chiamato anche magenta). In generale, qualsiasi colore può essere ottenuto mescolando i colori adiacenti ad esso. Quindi, il ciano (#00FFFF) si ottiene combinando il blu e il verde.
Riso. 6.1. Cerchio di colore
I colori basati su valori esadecimali non devono essere selezionati empiricamente. A tale scopo è adatto un editor grafico in grado di lavorare con diversi modelli di colore, come Adobe Photoshop. Sulla fig. 6.2 mostra una finestra per la scelta di un colore in questo programma, la linea circonda il valore esadecimale risultante del colore corrente. Puoi copiarlo e incollarlo nel tuo codice.
Riso. 6.2. Selettore colore in Photoshop
Colori Web
Se si imposta la qualità del colore del monitor su 8 bit (256 colori), lo stesso colore può essere visualizzato in modo diverso in browser diversi. Questo ha a che fare con il modo in cui la grafica viene renderizzata quando il browser funziona con la propria tavolozza e non può mostrare un colore che non è nella sua tavolozza. In questo caso, il colore viene sostituito da una combinazione di pixel di altri colori, vicini ad esso, che imitano quello dato. Affinché il colore rimanga lo stesso in diversi browser, è stata introdotta una tavolozza di cosiddetti colori web. I colori web sono quei colori, per ogni componente di cui - rosso, verde e blu - è impostato uno dei sei valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Il valore esadecimale di questo componente è indicato tra parentesi. Il numero totale di colori da tutte le possibili combinazioni dà 6x6x6 - 216 colori. Un esempio di colore web è #33FF66.
La caratteristica principale del colore web è che viene visualizzato allo stesso modo in tutti i browser. Al momento, la rilevanza dei colori web è molto ridotta a causa dell'aumento della qualità dei monitor e dell'espansione delle loro capacità.
Colori per nome
Per non ricordare una raccolta di numeri, puoi invece utilizzare i nomi dei colori comunemente usati. In tavola. 6.3 mostra i nomi dei nomi dei colori popolari.
Nome del colore | Colore | Descrizione | Valore esadecimale |
---|---|---|---|
Nero | 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 come specifichi il colore, con il suo nome o usando numeri esadecimali. Nei loro effetti, questi metodi sono uguali. L'esempio 6-1 mostra come impostare lo sfondo ei colori del testo di una pagina web.
Esempio 6.1. Colore di sfondo e testo
Testo di esempio
In questo esempio, il colore di sfondo viene impostato utilizzando l'attributo bgcolor del tag
e il colore del testo tramite l'attributo text. Per varietà, il valore dell'attributo text è impostato su un numero esadecimale e bgcolor è impostato sulla parola chiave riservata teal .>>Gestione del colore
Valori di colore RGB esadecimali
I metodi per descrivere ed elaborare i colori differiscono l'uno dall'altro per la rappresentazione finale a cui sono destinati. Confrontiamo, ad esempio, le rappresentazioni dei colori per la poligrafia e per i monitor dei computer. Nel primo caso, 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 colori danno la carta bianca. Se aggiungiamo loro il nero, otteniamo CMYK- un modo per veicolare il colore quando si ottiene il colore desiderato sottraendo al bianco i colori mancanti.
Nel secondo caso, la base è Nero il colore dello schermo monitor, ogni 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 nero puro dello schermo e qualsiasi colore richiesto è dato dal rapporto di ciascuno dei tre colori. In questo caso otterremo RGB- Metodo di trasferimento del colore. I colori primari possono avere significati da 0
prima di 255
, o da 0%
prima di 100%
o può essere rappresentato come un 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 nella sua serie di cifre, ma sedici, da cui il nome. Di conseguenza, le varianti non ripetute di combinazioni di due cifre possono essere solo: 256 , per continuare la 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 è dato da tre numeri esadecimali, ciascuno composto da due cifre. Il primo numero determina l'intensità rosso colori, media verde, ultima cosa- blu colori. Tutti i numeri possono assumere valori che vanno da 00 prima di FF(da 0 a 255). Ad esempio: il colore verde è dato come #00FF00, rosso come #FF0000, blu come #0000FF, bianco come #FFFFFF, è data la completa assenza di colore o nero #000000 .
Nel modulo 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: 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 un colore con valori letterali stringa
Per facilità d'uso, ad alcuni colori e alle loro combinazioni sono stati assegnati nomi riconosciuti da tutti i browser ed è stato possibile impostarne molti per nome. La tabella seguente mostra alcuni dei nomi dei colori:
Visualizza | nome | Visualizza | nome | Visualizza | nome | Visualizza | nome |
bianco | rosso | arancione | Giallo | ||||
Verde | Blu | Viola | Nero | ||||
Alice blu | bianco antico | Acqua | acquamarina | ||||
Azzurro | Beige | Bisquit | mandorla bianca | ||||
Blu viola | Marrone | Burlywood | Blu cadetto | ||||
certosa | Cioccolato | Corallo | Fiordaliso | ||||
Mais | Cremisi | ciano | blu scuro | ||||
Darkcyan | verga d'oro scuro | grigio scuro | verde scuro | ||||
Cachi scuro | Magenta scuro | Verde oliva scuro | arancione scuro | ||||
Darkorchide | rosso scuro | salmone scuro | Verde mare scuro | ||||
blu scuro | grigio scuro | turchese scuro | viola scuro | ||||
Rosa scuro | azzurro intenso | Dimgray | blu evasore | ||||
Mattoni refrattari | Bianco floreale | verde foresta | Fucsia | ||||
Gainsboro | bianco fantasma | Oro | Verga d'oro | ||||
Grigio | Verde giallo | Melata | rosa caldo | ||||
Rosso indiano | Indaco | Avorio | Cachi | ||||
Lavanda | Blush lavanda | ciuffo di limone | azzurro | ||||
corallo chiaro | ciano chiaro | stelo freddo chiaro giallo | verde chiaro | ||||
grigio chiaro | Rosa chiaro | salmone chiaro | Verde mare | ||||
Azzurro | Grigio ardesia | azzurro acciaio | giallo chiaro | ||||
lime | Verde lime | biancheria | Magenta | ||||
marrone | acquamarina media | blu medio | Orchidea media | ||||
Viola medio | Verde mare medio | Blu ardesia medio | Verde primaverile medio | ||||
turchese medio | viola medio | blu notte | crema di menta | ||||
mistyrose | Bianco Navajo | Marina Militare | vecchio | ||||
Oliva | Olivedrab | rosso-arancio | Orchidea | ||||
verga d'oro pallido | Verde pallido | turchese chiaro | pallido | ||||
frusta di papaia | soffio di pesca | Perù | Rosa | ||||
Prugna | Azzurro polvere | Marrone rosato | Blu Reale | ||||
marrone sella | mare verde | Conchiglia | Siena | ||||
D'argento | cielo blu | Blu ardesia | Grigio ardesia | ||||
Neve | Verde primavera | Blu acciaio | Abbronzatura | ||||
Alzavola | Cardo | Pomodoro | Turchese | ||||
Viola | Grano | Fumo bianco | giallo verde |
Utilizzo di un selettore colore sicuro
Sfortunatamente, su piattaforme diverse, con impostazioni di sistema diverse, la corretta riproduzione dei colori è 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 e sostituendo i colori da solo. Di conseguenza, a volte l'utente non vede esattamente ciò che il webmaster voleva mostrargli. La via d'uscita a questa situazione è stata trovata nell'uso di una tavolozza, il cui colore è garantito per essere reso uguale da tutti i browser su piattaforme diverse. Questo cosiddetto garantito tavolozza, noto anche come sicuro tavolozza. Questa tavolozza include colori i cui componenti di colore assumono i seguenti valori: 00 ,33 ,66 ,99 , CC,FF, in ogni modo possibile 216 le 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 in CSS può essere impostato in diversi modi:
- per nome,
- per valore esadecimale,
- nei formati RGB e RGBA,
- nei formati HSL e HSLA.
Imposta il colore per nome
I browser supportano la specifica di determinati colori per gli elementi in base al nome. In questa tabella, alcune parole chiave (nomi dei colori in inglese) utilizzate per impostare le proprietà del colore, il codice RGB, il codice Hex (HEX) e il codice HSL.
Nome | Colore | RGB | ESADECIMALE | HSL | Descrizione |
---|---|---|---|---|---|
bianco | RGB(255, 255, 255) | #fffff o #fff | 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 | hsl(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 | hsl(120, 100%, 50%) | verde chiaro | |
verde | RGB(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
acqua | RGB(0, 255, 255) | #00ffff o #0ffff | 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 | hsl(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 con RGB
RGB è un modello di colore additivo. In inglese aggiunta- aggiunta. RGB è un'abbreviazione di parole inglesi: Red, Green, Blue - red, green, blue). Da ciò risulta chiaro che nel modello RGB i colori vengono sintetizzati aggiungendo tre colori (rosso, verde, blu) in varie quantità.
Mescolando i colori rosso, verde e blu, puoi ottenere diversi milioni di sfumature. Tutte le possibili combinazioni sono archiviate nella memoria dei computer.
Arriva al punto.
Per impostare le proprietà in questo formato, viene utilizzata la notazione rgb(r, g, b), dove r, g, b sono i tre canali per ciascun colore (rosso, verde, blu). I valori per ciascun canale sono impostati nell'intervallo da 0 a 255.
Esempio di codice.
Per chiarire tutto, fornirò un codice di esempio:
Ecco come dovrebbe funzionare questo esempio:
Fig. 1. Colori in RGB.Spiegazioni per esempio.
All'inizio della pagina creiamo la classe div.rgb, necessaria affinché i blocchi creati dal tag
Successivamente, nel codice imposta il colore di sfondo del blocco
Prova a modificare questo esempio per includere i tuoi valori, come rgb(100, 100, 100) .
Impostazione del colore con RGBA
CSS3 ha introdotto 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: il canale A o 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 alla piena trasparenza, 1 - piena opacità (il colore sarà lo stesso impostato nei primi tre canali RGB) e valori intermedi , come 0,4 o 0,6 - traslucenza a vari livelli.
Esempio di codice.
Ecco come funzionerà:
Questo codice è visivamente simile al seguente, che utilizza il modello RGB per impostare il valore del colore:
Ecco il suo risultato:
Un valore del canale alfa uguale a zero rende invisibile qualsiasi colore - assolutamente trasparente, un valore uguale a uno traduce il colore nel codice RGB senza modifiche. La proprietà rgba(255,0,0,1.0) mostra il colore rosso rgb(255, 0, 0) .
Per valore esadecimale (codice HEX)
Nella vita di tutti i giorni, utilizziamo 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 ci sono dieci cifre nel sistema decimale: da 0 a 9, e il numero 10 è la cifra successiva, allora ci sono 16 cifre nel sistema numerico esadecimale e la cifra successiva sarà il numero 16.
Per indicare i codici colore, le cifre decimali ordinarie da 0 a 9 vengono utilizzate come cifre esadecimali e le lettere latine da A a F vengono utilizzate per indicare i numeri da 10 a 15, ovvero (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Per chiarezza, riassumiamo in una tabella:
Per scrivere numeri esadecimali maggiori di F (15 decimali), come nel sistema decimale, usano anche l'unione di due cifre, ma già esadecimali, il che è ovvio. Quindi, per scrivere il numero decimale 255 in esadecimale, viene utilizzata la notazione FF.
Il sistema esadecimale è più comprensibile al computer, elabora i valori dati dal valore esadecimale più velocemente.
Per specificare un colore nel sistema esadecimale, fai precedere il valore numerico con un segno "#", ad esempio: #FFC0CB . Il valore #FFC0CB stesso è costituito da tre cifre esadecimali FF, C0 e CB. Il significato di questa voce è lo stesso dell'impostazione del colore nel formato RGB (rgb(r, g, b) ) - ogni cifra esadecimale nel codice HEX indica la saturazione del colore nel suo canale del modello 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 per il codice colore HEX: un numero di 6 cifre può essere scritto come un numero di 3 cifre. Questo è valido solo se vengono ripetute due cifre nel valore del colore dello stesso canale.
Cioè, la seguente abbreviazione è accettabile:
Ad esempio, il colore #ff22aa può essere scritto come #f2a , oppure il colore #44aa22 può essere scritto come #4a2 .
Impostazione del colore con HSL
CSS3 ha un nuovo formato per specificare i colori.
Il formato HSL è un'abbreviazione delle parole inglesi: Hue (hue), Saturate (saturation) e Lightness (lightness).
La tonalità in HSL è un valore di colore su una ruota dei colori speciale (Figura 2) ed è specificata in gradi. Se tracciamo analogie con il modello RGB, allora 0° corrisponde al rosso, 120° corrisponde al verde e 240° corrisponde al blu.
Il valore della tonalità cambierà da 0 a 359.
Figura 2. Ruota dei colori HSL.
Il secondo valore - saturazione (Saturato) è impostato come percentuale. Al 100% di saturazione, il colore è il più "succoso" possibile, poiché l'indicatore di saturazione si sposta verso lo 0%, il colore diventa sempre più opaco e diventa grigio.
Anche il terzo valore - luminosità (Lightness) è impostato in percentuale. Maggiore è la percentuale, più luminoso sarà il colore. I valori estremi di 0% e 100% indicheranno rispettivamente i colori nero (mancanza di luce) e bianco (esposto), e non importa quale colore dalla ruota dei colori sia stato selezionato nel primo canale. Il valore ottimale può essere considerato il valore di luminosità del colore pari al 50%.
Impostazione del colore con HSLA
Il formato HSLA è correlato a HSL, così come da RGB a RGBA. Nel formato HSLA, oltre che in RGBA, viene aggiunto un canale alfa responsabile della trasparenza del colore.
Un colore specificato nel formato HSL è più facile da leggere. Possiamo dire che è intuitivo. Ad esempio, il codice hsl(120,60%,50%) può rappresentare il colore finale se in memoria è presente un'immagine della ruota dei colori HSL. Questo non si può dire dei formati RGB ed HEX, il codice colore specificato in questi formati diventa chiaro solo dopo essere stato renderizzato sul monitor.
I nuovi formati in CSS3 (HSL, HSLA e RGBA) funzionano nei browser sin dalle versioni: IE 9.0, Opera 10.0 Firefox 3.0. Come far funzionare gli stili su 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 in browser meno recenti, il colore di sfondo per la classe .somebloсk, sebbene non utilizzi un canale alfa, verrà visualizzato in formato RGB.
In HTML, il colore può essere specificato in tre modi:
Impostazione del colore in HTML in base al suo nome
Alcuni colori possono essere specificati in base al loro nome, utilizzando il nome del colore in inglese come valore. Le parole chiave più comuni: nero (nero), bianco (bianco), rosso (rosso), verde (verde), blu (blu), ecc.:
Colore del testo: rosso
I colori più popolari dello standard World Wide Web Consortium (W3C) sono:
Colore | Nome | Colore | Nome | Colore | Nome | Colore | Nome |
---|---|---|---|---|---|---|---|
Nero | Grigio | D'argento | bianco | ||||
Giallo | lime | Acqua | Fucsia | ||||
rosso | Verde | Blu | Viola | ||||
marrone | Oliva | Marina Militare | Alzavola |
Un esempio di utilizzo di nomi di colori diversi:
Esempio: impostare un colore in base al suo nome
- Provate voi stessi "
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Intestazione su sfondo lime
Testo bianco su sfondo blu
Intestazione su sfondo rosso
Intestazione su sfondo arancione
Intestazione su sfondo lime
Testo bianco su sfondo blu
Specificare il colore con RGB
Quando si visualizzano diversi colori sul monitor, la tavolozza RGB viene presa come base. Qualsiasi colore si ottiene mescolando i tre principali: R - rosso, G - verde (verde), B - blu (blu). La luminosità di ogni colore è data da un byte e quindi può assumere valori da 0 a 255. Ad esempio, RGB (255,0,0) è reso rosso perché il rosso è impostato al suo valore più alto (255) e il resto sono impostati su 0 È anche possibile impostare il colore come percentuale. Ciascuno dei parametri indica il livello di luminosità del colore corrispondente. Ad esempio: i valori rgb(127, 255, 127) e rgb(50%, 100%, 50%) imposteranno lo stesso colore verde a saturazione media:
Esempio: specificare un colore con RGB
- Provate voi stessi "
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
RGB(127, 255, 127)
RGB(50%, 100%, 50%)
Imposta il colore in base al valore esadecimale
I valori R G B può anche essere specificato utilizzando valori di colore esadecimali (HEX) nella forma: #RRGGBB dove RR (rosso), GG (verde) e BB (blu) sono valori esadecimali da 00 a FF (come decimale 0- 255) . Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. Il sistema esadecimale utilizza i seguenti caratteri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Qui i numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale sono l'unione di due caratteri in un valore. Ad esempio, il numero più alto 255 in decimale corrisponde al più alto FF in esadecimale. A differenza del sistema decimale, il numero esadecimale è preceduto da un cancelletto. # , ad esempio, #FF0000 viene visualizzato come rosso perché il rosso è impostato sul valore più alto (FF) e gli altri colori sono impostati sul valore minimo (00). Caratteri dopo il simbolo hash # può essere digitato sia in maiuscolo che in minuscolo. Il sistema esadecimale permette di utilizzare la forma abbreviata #rgb, dove ogni carattere è uguale a due volte. Pertanto, la voce #f7O dovrebbe essere considerata come #ff7700.
Esempio: Colore HEX
- Provate voi stessi "
rosso: #FF0000
verde: #00FF00
blu: #0000FF
rosso: #FF0000
verde: #00FF00
blu: #0000FF
rosso+verde=giallo: #FFFF00
rosso+blu=viola: #FF00FF
verde+blu=ciano: #00FFFF
Elenco dei colori comunemente usati (nome, HEX e RGB):
titolo 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 | Acqua della spiaggia di Bondi | #0095B6 | 0 | 149 | 182 | |
Ottone | Ottone | #B5A642 | 181 | 166 | 66 | |
Marrone | Marrone | #964B00 | 150 | 75 | 0 | |
Ceruleo | Azzurro | #007BA7 | 0 | 123 | 167 | |
verde scuro primaverile | Verde scuro primaverile | #177245 | 23 | 114 | 69 | |
Smeraldo | Smeraldo | #50C878 | 80 | 200 | 120 | |
Melanzana | melanzana | #990066 | 153 | 0 | 102 | |
Fucsia | Fucsia | #FF00FF | 255 | 0 | 255 | |
Oro | Oro | #FFD700 | 250 | 215 | 0 | |
Grigio | Grigio | #808080 | 128 | 128 | 128 | |
Verde | Verde | #00FF00 | 0 | 255 | 0 | |
Indaco | Indaco | #4B0082 | 75 | 0 | 130 | |
Giada | Giada | #00A86B | 0 | 168 | 107 | |
lime | Lime | #CCFF00 | 204 | 255 | 0 | |
Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
Marina Militare | blu 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 | |
verde mare | mare verde | #2E8B57 | 46 | 139 | 87 | |
Verde palude | Bolotny | #ACB78E | 172 | 183 | 142 | |
Alzavola | blu verde | #008080 | 0 | 128 | 128 | |
Oltremare | blu oltremare | #120A8F | 18 | 10 | 143 | |
Viola | Viola | #8B00FF | 139 | 0 | 255 | |
Giallo | Giallo | #FFFF00 | 255 | 255 | 0 |
Codici colore (sfondo) per saturazione e tonalità.
I codici colore nei CSS vengono utilizzati per specificare i colori. In genere, i codici colore oi valori di colore vengono utilizzati per impostare un colore per il primo piano di un elemento (ad es. testo, colore del collegamento) o per lo sfondo dell'elemento (sfondo, colore del blocco). Possono anche essere usati per cambiare il colore dei pulsanti, i bordi, i pennarelli, il passaggio del mouse e altri effetti decorativi.
Puoi impostare i tuoi valori di colore in vari formati. La tabella seguente elenca tutti i formati possibili:
Questi formati sono descritti più dettagliatamente di seguito.
Colori CSS - Codici esadecimali
Codice colore esadecimaleè una rappresentazione del colore a sei cifre. Le prime due cifre (RR) sono il valore rosso, le due successive sono il valore verde (GG) e le ultime due sono il valore blu (BB).
Colori CSS - Codici esadecimali brevi
Codice colore esadecimale breveè una forma più breve di notazione a sei caratteri. In questo formato, ogni cifra viene ripetuta per produrre il valore di colore equivalente a sei cifre. Ad esempio: #0F0 diventa #00FF00.
Il valore esadecimale può essere preso da qualsiasi software di grafica come Adobe Photoshop, Core Draw, ecc.
Ogni codice colore esadecimale in CSS sarà preceduto da un cancelletto "#". I seguenti sono esempi dell'uso della notazione esadecimale.
Colori CSS - Valori RGB
Valore RGBè un codice colore impostato utilizzando la proprietà rgb(). Questa proprietà assume tre valori: uno ciascuno per rosso, verde e blu. Il valore può essere un numero intero, da 0 a 255, o una percentuale.
Nota: Non tutti i browser supportano la proprietà color rgb(), quindi non è consigliabile utilizzarla.
Di seguito è riportato un esempio che mostra più colori utilizzando i valori RGB.
Generatore di codici colore
Puoi creare milioni di codici colore con il nostro servizio.
Colori sicuri del browser
Di seguito è riportata una tabella di 216 colori che sono i più sicuri e indipendenti dal computer. Questi colori in CSS vanno da 000000 a FFFFFF codice esadecimale. Sono sicuri da usare in quanto assicurano che tutti i computer visualizzino i colori correttamente quando si lavora con la tavolozza a 256 colori.
Tabella dei colori "sicuri" in CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
#003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
#006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
#009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
#00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
#00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
#330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
#333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
#336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
#339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
#33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
#33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
#660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
#663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
#666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
#669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
#66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
#66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
#990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
#993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
#996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
#999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
#99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
#99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
#CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
#CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
#CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
#CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
#CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
#CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
#FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
#FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
#FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
#FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
#FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
#FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |