Codici di lettere colorate. Il colore negli stili può essere specificato in diversi modi: per valore esadecimale, per nome, in formato RGB, RGBA, HSL, HSLA

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 si formano combinando due numeri in uno solo. Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale. Per evitare confusione nella determinazione del sistema numerico, prima del numero esadecimale viene inserito il simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori – rosso, verde e blu – può assumere valori da 00 a FF. Pertanto, il simbolo del colore è diviso in tre componenti #rrggbb, dove i primi due simboli indicano la componente rossa del colore, i due centrali il verde e gli ultimi due il blu. È consentito l'uso della forma abbreviata #rgb, dove ogni carattere deve essere raddoppiato. Pertanto la voce #fe0 deve essere considerata come #ffee00.

Per nome

I browser supportano alcuni colori tramite il loro nome. Nella tabella 1 riporta i nomi, il codice esadecimale, i valori RGB, HSL e la descrizione.

Utilizzando RGB

Puoi definire il colore utilizzando i valori rosso, verde e blu in termini decimali. Ciascuno dei tre componenti di colore assume un valore compreso tra 0 e 255. È anche consentito specificare il colore come percentuale, con 100% corrispondente al numero 255. Innanzitutto, specificare la parola chiave rgb, quindi specificare i componenti di colore 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 specifica la trasparenza dell'elemento. Un valore pari a 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è semitrasparente.

RGBA è stato aggiunto a CSS3, quindi il codice CSS deve essere convalidato rispetto a questa versione. Va notato che lo standard CSS3 è ancora in fase di sviluppo e alcune funzionalità potrebbero cambiare. Ad esempio, un colore in formato RGB aggiunto alla proprietà background-color viene convalidato, ma uno aggiunto alla proprietà background non è più valido. Allo stesso tempo, i browser comprendono abbastanza correttamente il colore per entrambe le proprietà.

HSL

Il nome del formato HSL deriva dalla combinazione delle prime lettere Hue (tonalità), Saturate (saturazione) e Lightness (leggerezza). La tonalità è il valore del colore sulla ruota dei colori (Fig. 1) ed è espresso in gradi. 0° corrisponde al rosso, 120° al verde e 240° al blu. Il valore della tonalità può variare da 0 a 359.

Riso. 1. Ruota dei colori

La saturazione è l'intensità di un colore e viene misurata in percentuale dallo 0% al 100%. Un valore dello 0% indica assenza di colore e una sfumatura di grigio, 100% è il valore massimo per la saturazione.

La luminosità specifica la luminosità del colore ed è specificata come percentuale compresa tra 0% e 100%. Valori bassi rendono il colore più scuro e valori alti rendono il colore 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 per specificare la trasparenza dell'elemento. Un valore pari a 0 è completamente trasparente, 1 è opaco e un valore intermedio come 0,5 è semitrasparente.

I valori di colore RGBA, HSL e HSLA vengono aggiunti a CSS3, quindi controlla la validità della versione del codice quando utilizzi questi formati.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Avvertimento

Tutti i metodi di cattura dei leoni 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 i risultati. Ricorda, un leone è un predatore e un animale pericoloso!

Il risultato di questo esempio è mostrato in Fig. 2.

Riso. 2. Colori sulla pagina web

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.

Purtroppo non è ancora possibile visualizzare le sensazioni gustative sul sito. Ma questo può essere completamente compensato con l’aiuto dei colori. Dopotutto, i colori HTML ti consentono di visualizzare milioni di sfumature. COSÌ " matite colorate Ce ne sono molti più di sette nel suo set.

Combinazione di colori in HTML

In HTML, il colore può essere specificato in diversi formati:

1. Come valore esadecimale: viene utilizzato il codice specificato nel sistema numerico esadecimale. Tali codici colore in HTML sono costituiti da tre coppie di numeri esadecimali. Ogni coppia è responsabile della saturazione dell'ombra con il suo colore primario:

• La prima coppia numerica è responsabile del colore rosso;
• La seconda coppia è per il contenuto di colore verde;
• Quest'ultimo è per il suo contenuto blu.

All'inizio del codice (prima dei numeri) viene inserito un cancelletto. Questo è il codice colore esadecimale. Oltre ai numeri da 1 a 9, questo sistema numerico utilizza lettere dell'alfabeto latino (A, B, C, D, E, F).

Ad esempio, il codice del colore bianco in html sarà simile a #FFFFFF:

2. Parola chiave: attualmente l'HTML supporta circa 147 parole chiave. Ma non tutte queste parole sono uniche. Alcuni di essi si riferiscono alla stessa tonalità di colore.

Il colore grigio è rappresentato da due parole chiave: grigio e grigio. Il loro codice esadecimale (HEX) è dato dallo stesso valore #808080.

Esempio:

#808080

3. In formato RGB: questa codifica del colore in html si basa sull'uso di tre valori, impostati nell'intervallo da 0 a 255. Ciascuno di essi determina la saturazione della tonalità con uno dei colori primari:

• R – rosso (rosso);
• G – verde (verde);
• B – blu (blu).

Il numero del colore in formato RGB è scritto nella seguente forma: rgb(0, 210, 100).

colore di sfondo:rgb(100,186,43)

4. Nel formato RGBA - è un formato RGB migliorato, dove il quarto valore specifica la trasparenza del colore come frazione decimale da 0 a 1.

Esempio di utilizzo:

colore di sfondo:rgba(100,86,143,0.2)

colore di sfondo:rgba(100,86,143,0,5)

colore di sfondo:rgba(100,86,143,0.8)

colore di sfondo:rgba(100,86,143,1)

Tabelle di colori HTML e generatori di colori

Con una gamma così ampia di formati di impostazione del colore, è facile confondersi. Pertanto, è stata inventata una tabella dei colori speciale. Fornisce 147 nomi chiave di sfumature di colore con codici di conformità in tutti i principali standard di colore. Inoltre ogni campo è dotato di una barra per la selezione visiva del colore. Una di queste tabelle è presentata sul sito webcolorscheme.ru:

Ma anche con questa strutturazione degli abbinamenti, scegliere la tonalità giusta può essere difficile. E non è un dato di fatto che la tabella dei codici colore conterrà quello di cui hai bisogno.

Per aggirare questo ostacolo e rendere la scelta della tonalità giusta il più semplice possibile, sono stati sviluppati servizi web interattivi. La loro interfaccia utente potrebbe differire leggermente l'una dall'altra.

Sul sito web html-color-codes.info il generatore di colori si presenta così:

E all'interno del servizio color-picker.appsmaster.co, questo strumento è implementato in modo leggermente diverso:

La saturazione di ciascun colore nel generatore viene impostata utilizzando cursori speciali. Visivamente, l'ombra viene visualizzata dal colore della cornice e del rettangolo sul lato sinistro. In basso, 3 campi mostrano il codice colore nei formati base.

Ma il generatore di colori è disponibile non solo su siti specializzati. Quasi tutti gli editor grafici sono dotati di uno strumento simile. Ad esempio, Photoshop:

Precauzioni di sicurezza quando si lavora con il colore

E questo è successo molto tempo fa, nell'era delle schede video che supportavano solo 256 colori. In quei tempi lontani, i sistemi operativi potevano visualizzare solo un certo numero di sfumature a otto bit senza distorsioni.

Poi è stata sviluppata una grande tavola di colori sicuri. Specificava 216 tonalità che potevano essere visualizzate senza distorsioni in nessuno dei browser dell'epoca. E fino ad oggi questo " ottimo manoscritto» è ancora disponibile su alcune risorse:

Al giorno d'oggi tutto è cambiato. Pertanto, tutte le regole di sicurezza quando si lavora con il colore in HTML vengono completamente annullate. Dopotutto, l'hardware del computer moderno supporta più di 16 milioni di sfumature diverse. E 216 colori sicuri sono caduti nell'oblio.

Questi dati sono pienamente confermati dalle statistiche. A giudicare da ciò, nel 2014 solo lo 0,5% degli utenti dispone di computer che supportano solo 256 tonalità.

Nozioni di base sull'armonia dei colori

Non tutti siamo dotati di un senso del gusto naturale e armonioso. Pertanto, scegliere il colore giusto può essere una vera sfida. Ma, lode alla scienza, è riuscita persino a descrivere l'armonia dei colori sotto forma di diversi schemi. Tutti si basano sull'uso di una ruota dei colori. Schemi per la selezione armoniosa dei colori in HTML.

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. In questo caso 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 di 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:

1. Il browser lo sostituisce con quello ad esso più simile e riproducibile con successo;
2. 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.

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.

I codici colore nei CSS vengono utilizzati per specificare i colori. In genere, i codici colore o i valori dei colori vengono utilizzati per impostare il colore per il colore di primo piano di un elemento (ad esempio colore del testo, colore del collegamento) o il colore di sfondo di un elemento (colore di sfondo, colore del blocco). Possono essere utilizzati anche per modificare il colore di un pulsante, bordo, pennarello, passaggio del mouse e altri effetti decorativi.

Puoi specificare i valori del 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 del colore a sei cifre. 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è una forma più breve di notazione di sei caratteri. In questo formato, ogni cifra viene ripetuta per produrre un 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 nei CSS sarà preceduto da un cancelletto "#". Di seguito sono riportati esempi di utilizzo della notazione esadecimale.

Colori CSS - Valori RGB

Valore RGBè un codice colore impostato utilizzando la proprietà rgb(). Questa proprietà accetta 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 valori RGB.

Generatore di codici colore

Puoi creare milioni di codici colore utilizzando 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 nei CSS vanno da 000000 al codice esadecimale FFFFFF. Sono sicuri da usare perché garantiscono che tutti i computer visualizzino correttamente i colori quando lavorano con la tavolozza dei 256 colori.