Colore bianco perla html. Esercitazione sull'HTML. Colori RGB. Tavolozza di colori sicura. Nozioni di base sull'armonia dei colori

Questa pagina contiene una tabella con parole chiave che possono essere utilizzate per denotare i colori in linguaggi di sviluppo Web come: HTML, CSS, JavaScript, Flash, ecc.

Nelle vecchie specifiche per il WC3 venivano specificate solo 16 parole chiave, con l'aiuto delle quali venivano impostati i colori in HTML e CSS. In ulteriori specifiche più moderne sono state aggiunte altre 130 parole chiave per indicare i nomi dei colori. La tabella seguente contiene i nomi dei colori e i codici esadecimali e RGB a cui corrispondono.

Secondo le regole CSS, i nomi dei colori non fanno distinzione tra maiuscole e minuscole. Le voci di colore IndianRed e indianred sono equivalenti.

Vale anche la pena notare che delle 146 parole chiave nella tabella in realtà sono presenti meno colori. Questo perché alcune parole chiave si riferiscono allo stesso colore. Pertanto, i nomi Grigio e Grigio rappresentano il codice colore grigio al 50% #808080, e la parola Magenta è sinonimo del colore HTML Fucsia, corrispondente al codice esadecimale #FF00FF. Sono sinonimi anche le parole Aqua e Cyan, corrispondono al codice #00FFFF.

I colori HTML sono indicati da sei caratteri dopo la barra, ad esempio #000000. Questi sei simboli rappresentano le proporzioni dei diversi colori (rosso, verde, blu) nel colore finale. Sul monitor del tuo computer, l'immagine è formata da un numero enorme di punti chiamati pixel. Ogni pixel è una piccola fonte di luce, chiamiamola "torcia", che a sua volta è composta da tre torce: rossa, verde e blu. Diminuendo o aumentando l'intensità del bagliore delle singole torce colorate, otteniamo il colore desiderato.

Codici colore HTML

I colori in HTML sono rappresentati da una notazione esadecimale (HEX) di rosso, blu e verde (RGB).

Il valore di colore più piccolo è 0 (00 esadecimale). Il valore di colore più alto è 255 (hex FF).

Il valore del colore esadecimale è composto da tre cifre che iniziano con il segno #.

Codici colore (significati)

16 milioni di sfumature

Combinando rosso, blu e verde con valori compresi tra 0 e 255 per la percentuale di ciascun colore si ottiene un totale di oltre 16 milioni di sfumature (256 x 256 x 256).

La maggior parte dei monitor moderni è in grado di visualizzare almeno 16.384 sfumature diverse (i monitor LCD sono generalmente in grado di visualizzare 262mila 16 milioni (aggiornato ottobre 2013) colori e i monitor CRT possono visualizzare un numero virtualmente illimitato di colori).

La tabella dei colori seguente mostra la variazione della proporzione del rosso da 0 a 255 con valori pari a zero per il blu e il verde:

Sfumature di grigio

Per ottenere sfumature di grigio vengono utilizzate parti uguali di tutti i colori. Per facilitarti la scelta del colore giusto, ti forniamo i codici delle sfumature di grigio

Nomi dei colori html cross-browser (tutti i browser).

Una raccolta di 150 nomi di colori in html, supportati in tutti i browser.

Nomi dei colori standardizzati

Il W3C elenca 16 nomi di colori validi per HTML e CSS: acqua, nero, blu, fucsia, grigio, verde, lime, marrone (castagno), navy (oltremare), oliva (oliva), viola (viola), rosso (rosso) , argento (argento), verde acqua (grigio), bianco (bianco) e giallo (giallo).

Quando si utilizzano colori non presenti in questa lista è più corretto utilizzare il loro codice esadecimale (HEX) o il codice RGB.

Colori sicuri

Diversi anni fa, quando i computer potevano supportare un massimo di 256 colori diversi, fu proposta una lista di 216 "Web Safe Colors", con 40 colori riservati al sistema.

Questa tavolozza a 216 colori è stata creata per visualizzare correttamente i colori nella modalità tavolozza a 256 colori.

Ora questo non ha importanza perché la maggior parte dei computer nel mondo supporta milioni di sfumature di colore. In ogni caso, ecco un elenco di questi colori:

Vlad Merzhevich

In HTML, il colore viene specificato in due modi: utilizzando il codice esadecimale e tramite il nome di determinati colori. Viene utilizzato prevalentemente il metodo basato sul sistema numerico esadecimale, poiché è il più universale.

Colori esadecimali

L'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. Nella tabella 6.1 mostra la corrispondenza tra numeri decimali ed esadecimali.

I numeri maggiori di 15 nel sistema esadecimale si formano 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, un numero esadecimale è preceduto dal simbolo cancelletto #, ad esempio #aa69cc. In questo caso il caso non ha importanza, quindi è consentito scrivere #F0F0F0 o #f0f0f0.

Un tipico colore utilizzato in HTML è simile a questo.

Qui il colore di sfondo della pagina web è impostato su #FA8E47. Il simbolo cancelletto # davanti a un numero significa che è esadecimale. Le prime due cifre (FA) definiscono la componente rossa del colore, dalla terza alla quarta cifra (8E) definiscono la componente verde e le ultime due cifre (47) definiscono la componente blu. Il risultato finale sarà di questo colore.

Ciascuno dei tre colori - rosso, verde e blu - può assumere valori da 00 a FF, per un totale di 256 sfumature. Pertanto, il numero totale di colori può essere 256x256x256 = 16.777.216 combinazioni. Un 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'addizione di tutti e tre i componenti forma il colore bianco.

Per facilitare la navigazione tra i colori esadecimali, prendi in considerazione alcune regole.

• Se i valori dei componenti del colore sono gli stessi (ad esempio: #D6D6D6), il risultato sarà una tinta grigia. Più alto è il numero, più chiaro sarà il colore, con valori che vanno da #000000 (nero) a #FFFFFF (bianco).
• Se la componente rossa viene portata al massimo (FF) e le restanti componenti vengono impostate a zero si forma un colore rosso brillante. Un colore con un valore di #FF0000 è la tonalità di rosso più rossa possibile. Lo stesso vale per il verde (#00FF00) e il blu (#0000FF).
• Il giallo (#FFFF00) è ottenuto mescolando rosso e verde. Ciò è ben visibile sulla ruota dei colori (Fig. 6.1), che presenta i colori primari (rosso, verde, blu) e quelli complementari o aggiuntivi. Questi includono giallo, ciano e viola (chiamato anche magenta). In generale, qualsiasi colore può essere ottenuto mescolando colori ad esso vicini. Pertanto, il ciano (#00FFFF) si ottiene combinando blu e verde.

Riso. 6.1. Cerchio di colori

I colori basati su valori esadecimali non devono essere selezionati empiricamente. A questo scopo è adatto un editor grafico in grado di funzionare con diversi modelli di colore, ad esempio Adobe Photoshop. Nella fig. La Figura 6.2 mostra la finestra per la selezione di un colore in questo programma; il valore esadecimale risultante del colore corrente è delineato da una linea. Puoi copiarlo e incollarlo nel tuo codice.

Riso. 6.2. Finestra per la scelta dei colori in Photoshop

Colori della rete

Se imposti la qualità di resa cromatica del monitor su 8 bit (256 colori), lo stesso colore può essere visualizzato in modo diverso in browser diversi. Ciò è dovuto al modo in cui viene visualizzata la grafica, quando il browser funziona con la propria tavolozza e non può mostrare un colore che non sia presente nella sua tavolozza. In questo caso il colore viene sostituito da una combinazione di pixel di altri colori vicini che imitano quello dato. Per garantire che il colore rimanga lo stesso nei diversi browser, è stata introdotta una tavolozza dei cosiddetti colori web. I colori Web sono quei colori per i quali ciascun componente - rosso, verde e blu - è impostato su uno dei sei valori: 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Tra parentesi è indicato il valore esadecimale di questo componente. Il numero totale di colori di tutte le combinazioni possibili dà 6x6x6 - 216 colori. Un esempio di colore web è #33FF66.

La caratteristica principale del colore web è che appare uguale in tutti i browser. Al momento, l'importanza dei colori web è molto ridotta a causa del miglioramento della qualità dei monitor e dell'espansione delle loro capacità.

Colori per nome

Per evitare di dover ricordare una serie di numeri, è possibile utilizzare invece i nomi dei colori comunemente utilizzati. Nella tabella 6.3 mostra i nomi dei colori più diffusi.

Non importa se specifichi un colore tramite il suo nome o utilizzando numeri esadecimali. Questi metodi hanno lo stesso effetto. L'esempio 6.1 mostra come impostare i colori dello sfondo e del testo di una pagina web.

Esempio 6.1. Colore dello sfondo e del testo

Testo di esempio

In questo esempio, il colore dello sfondo viene impostato utilizzando l'attributo bgcolor del tag e il colore del testo tramite l'attributo text. Per varietà, l'attributo text è impostato su un numero esadecimale e l'attributo bgcolor è impostato sulla parola chiave riservata teal .

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:

• 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 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.

In HTML, il colore può essere specificato in tre modi:

Impostazione di un colore in HTML in base al suo nome

Alcuni colori possono essere specificati tramite il nome, utilizzando il nome del colore in inglese come valore. Le parole chiave più comuni: nero, bianco, rosso, verde, blu, ecc.:

Colore del testo: rosso

I colori più popolari dello standard World Wide Web Consortium (W3C):

Esempio di utilizzo di nomi di colori diversi:

Esempio: specificare un colore tramite il suo nome

• Prova tu stesso "

Intestazione su sfondo rosso

Intestazione su sfondo arancione

Rubrica su sfondo lime

Testo bianco su sfondo blu

Intestazione su sfondo rosso

Intestazione su sfondo arancione

Rubrica su sfondo lime

Testo bianco su sfondo blu

Specifica del colore utilizzando RGB

Quando si visualizzano colori diversi su un monitor, viene utilizzata la tavolozza RGB come base. Qualsiasi colore si ottiene mescolando tre colori base: R - rosso, G - verde, B-blu. La luminosità di ciascun colore è data da un byte e può quindi assumere valori da 0 a 255. Ad esempio, RGB(255,0,0) viene visualizzato come rosso poiché il rosso è impostato al suo valore più alto (255) e il il resto è impostato su 0. Puoi anche impostare il colore come percentuale. Ogni parametro indica il livello di luminosità del colore corrispondente. Ad esempio: i valori rgb(127, 255, 127) e rgb(50%, 100%, 50%) imposteranno lo stesso colore verde medio:

Esempio: specifica del colore utilizzando RGB

• Prova tu stesso "

RGB(127, 255, 127)

RGB(50%, 100%, 50%)

RGB(127, 255, 127)

RGB(50%, 100%, 50%)

Imposta il colore in base al valore esadecimale

Valori R G B può anche essere specificato utilizzando valori di colore esadecimali (HEX) nella forma: #RRGGBB dove RR (rosso), GG (verde) e BB (blu) sono valori esadecimali da 00 a FF (come decimale 0-255 ). Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. Il sistema esadecimale utilizza i seguenti segni: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Qui i numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale sono rappresentati combinando due caratteri in un unico valore. Ad esempio, il numero più alto 255 in decimale corrisponde al valore FF più alto in esadecimale. A differenza del sistema decimale, un numero esadecimale è preceduto dal simbolo cancelletto. # , ad esempio, #FF0000 viene visualizzato come rosso perché il rosso è impostato sul valore massimo (FF) e gli altri colori sono impostati sul valore minimo (00). Segni dopo il simbolo del cancelletto # È possibile digitare sia in maiuscolo che in minuscolo. Il sistema esadecimale permette di utilizzare la forma abbreviata #rgb, dove ogni carattere equivale al doppio. Pertanto la voce #f7O dovrebbe essere considerata come #ff7700.

Esempio: Colore HEX

• Prova tu stesso "

rosso: #FF0000

verde: #00FF00

blu: #0000FF

rosso: #FF0000

verde: #00FF00

blu: #0000FF

rosso+verde=giallo: #FFFF00

rosso+blu=viola: #FF00FF

verde+blu=ciano: #00FFFF

Elenco dei colori comuni (nome, HEX e RGB):

Codici colore (sfondo) per saturazione e tonalità.