gb colore. Il colore negli stili può essere impostato in diversi modi: per valore esadecimale, per nome, in formato RGB, RGBA, HSL, HSLA

I codici colore nei CSS vengono utilizzati per specificare i colori. Tipicamente, 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 di un 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.

I numeri esadecimali vengono utilizzati per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale sono formati combinando due numeri in uno. 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 simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF. Pertanto, la designazione del colore è divisa in tre componenti #rrggbb, dove i primi due caratteri segnano la componente rossa del colore, i due centrali segnano il verde e gli ultimi due segnano il blu. È consentito utilizzare la forma abbreviata #rgb, dove ogni carattere deve essere raddoppiato. Pertanto, la voce #fe0 dovrebbe essere considerata come #ffee00.

per nome

I browser supportano alcuni colori in base al nome. In tavola. 1 mostra i nomi, il codice esadecimale, i valori in formato RGB, HSL e la descrizione.

Con RGB

Puoi definire un colore usando i valori rosso, verde e blu in termini decimali. Ciascuno dei tre componenti del colore assume un valore da 0 a 255. È anche accettabile impostare il colore come percentuale, mentre 100% corrisponderà al numero 255. Innanzitutto, viene specificata la parola chiave rgb, quindi i componenti del colore sono specificato tra parentesi, separati da virgole, ad esempio rgb(255 , 128, 128) o rgb(100%, 50%, 50%).

RGBA

Il formato RGBA è simile nella sintassi a RGB, ma include un canale alfa che imposta la trasparenza dell'elemento. Un valore di 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è traslucido.

RGBA viene aggiunto a CSS3, quindi la convalida del codice CSS dovrebbe essere eseguita secondo questa versione. Va notato che lo standard CSS3 è ancora in fase di sviluppo e alcune sue caratteristiche potrebbero cambiare. Ad esempio, un colore RGB aggiunto alla proprietà background-color supera la convalida, ma non uno aggiunto alla proprietà background. Allo stesso tempo, i browser comprendono abbastanza correttamente il colore per entrambe le proprietà.

HSL

Il nome del formato HSL è formato dalla combinazione delle prime lettere Hue (tonalità), Saturate (saturazione) e Lightness (leggerezza). Tonalità è il valore del colore sulla ruota dei colori (Fig. 1) ed è specificato 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 da 0% a 100%. Un valore di 0% indica nessun colore e una sfumatura di grigio, 100% è il valore di saturazione massimo.

Luminosità imposta la luminosità del colore ed è specificata come percentuale da 0% a 100%. Valori piccoli rendono il colore più scuro, mentre valori alti lo rendono più chiaro, valori estremi di 0% e 100% corrispondono al bianco e nero.

HSLA

Il formato HSLA è simile nella sintassi a HSL, ma include un canale alfa che imposta la trasparenza dell'elemento. Un valore di 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è traslucido.

I valori di colore nei formati RGBA, HSL e HSLA vengono aggiunti a CSS3, quindi quando si utilizzano questi formati, verificare la validità del codice rispetto alla versione.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Un avvertimento

Tutti i metodi per catturare un leone elencati sul sito sono teorici e basati su metodi computazionali. Gli autori non garantiscono la vostra 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

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:

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 la stessa saturazione media di verde:

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 consente l'uso di una forma abbreviata come #rgb, dove ogni carattere equivale 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):

Codici colore (sfondo) per saturazione e tonalità.