Codici di colori

Come possiamo fare apparire sui dispositivi di output (es. televisori, monitor, display) i colori che incontriamo nella vita di ogni giorno? Come possiamo scrivere nel linguaggio del device elettronico quale punto dell'immagine sarà rosso, bianco, nero o di qualsiasi altro colore? Se dovessimo dare una risposta breve a tutte queste domande, essa sarebbe la sintesi del colore e l'uso dei modelli di colore. I modelli descrivono diversi modi di sintesi per riprodurre i colori. In altre parole i modelli permettono di codificare ogni colore, in modo che la scelta possa essere effettuata immettendo il relativo codice.

I modelli di colore più famosi sono RGB, CMYK, HSL, HSV (ovvero HSB), XYZ, Yxy. Esistono anche altri modelli. Il nostro scopo è fornire informazione sui codici di colore per il web, per questo siamo orientati verso i codici hex e i codici del modello RGB. Scegliete la sezione del sito che v’interessa di più.

Colori HTML

E' possibile stabilire il colore degli elementi delle pagine web in quattro modi.

1. Con l'ausilio delle tre coppie di codici esadicemali (conosciuti come hex): #FF0000 (rosso), #A52A2A (marrone).
   .text { color: #FF0000; }
.bg { background: #A52A2A; }
2. Con i nomi inglesi dei colori: green, blue, orange e altri.
   .text { color: red; }
.bg { background: brown; }
   Ogni colore popolare ha un proprio nome.
3. 3. Con il modello RGB attraverso la costruzione tipo rgb(ххх,ххх,ххх) o rgba(ххх,ххх,ххх,А). Ogni blocco ххх è un elemento del colore nell'intervallo da 0 a 255, il blocco А è invece un canale alfa che definisce il livello di trasparenza dell'elemento sulla pagina web e si trova nell'intervallo tra 0 e 1.
   .text { color: rgb(255,0,0,0.7); }
.bg { background: rgb(165,42,42); }
   Nota: rgba è stato introdotto nel CSS3.
4. Con il modello HSL, introdotto nel CSS3 utilizzando la costruzione hsl(xxx,xxx,xxx) oppure la variante con il canale alfa hsla(xxx,xxx,xxx,A).
   .text { color: hsla(120, 100%, 50%, 0.5); }
.bg { background: hsl(0, 100%, 50%); }

RGB

Il nome del modello è un'abbreviazione delle parole inglesi Red + Green + Blue. RGB è un modello di colore composto da tre canali: rosso + verde + blu. Ognuno dei tre canali è composto da un intervallo numerico da 0 a 255. Così ogni colore è rappresentato da tre coppie d’intervalli. Il modello definisce ogni colore come un mix di tre colori in proporzioni diversi.

Esempi di colori definiti secondo il modello RGB: 255.0.0 — rosso, 255.255.0 — giallo, 165.42.42 — marrone.

Un’altra cosa interessante da capire è: quanti colori ci sono alla fine? Dato che ogni intervallo include 256 combinazioni e ci sono tre intervalli, allora il numero totale dei colori è 256³ = 16 777 216. Ogni colore del modello è definito da un codice unico.

Questo modello di colore è utilizzato molto nei dispositivi.

Avrà una dimensione completa di 4096×4096 pixel.