I colori HTML, o colori web, sono i colori che vediamo sullo schermo dei dispositivi e sono composti da una combinazione di rosso, verde e blu (colori primari).
La composizione dei colori viene mostrata con i pixel. Un pixel (PIcture ELement) è un puntino colorato
I codici dei colori html comunicano i livelli esatti dei colori rosso, verde e blu (in questo preciso ordine) che i pixel devono mostrare per produrre un dato colore sul monitor e sono utilizzati nella creazione e visualizzazione di pagine Web.
Nel linguaggio html i codici dei colori più comuni sono in formato HEX (esadecimale = avente per base 16), oppure in formato RGB (Red Green Blue) .
Il formato HEX utilizza tre coppie di caratteri preceduti da un cancelletto.
Il formato RGB usa tre valori numerici (uno per il rosso, uno per il giallo e uno per il blu), ciascuno dei quali può essere formato da un massimo di tre cifre.
Il codice di un colore HEX si scrive in questo modo: color: #FF0000; ▀
Il codice di un colore RGB si scrive in questo modo: color: rgb(255,0,0); ▀
Valori uguali dei colori primari danno sempre sfumature di grigio. Esempio:
color: #AAAAAA; ▀ color: rgb(100,100,100);▀
Utilizzando il codice HEX, se i tre valori sono uguali, possono essere abbreviati scrivendo soltanto 3 caratteri. Esempio:
color: #AAA; ▀
L'utilizzo di lettere maiuscole o minuscole è indifferente.
Utilizzo del nome inglese del colore
Un'altra modalità di inserimento dei colori HTML è l'utilizzo del nome proprio del colore in lingua inglese.
Esempio: color: red;
Questa modalità è meno versatile, perchè essendo legata al nome del colore non permette di variarne le sfumature.
I colori HEX (esadecimali) sono la traduzione esadecimale del colori RGB e sono espressi con una combinazione di sei numeri e/o lettere preceduta dal cancelletto “#”, che indica, appunto, che si sta usando la numerazione esadecimale.
Le prime due cifre o lettere rappresentano l'intensità del colore rosso, le successive due l'intensità del verde e le ultime due l'intensità del blu (colori primari).
Si tratta di un sistema di numerazione in base 16 che utilizza simboli da 0 a 9 per le prime 10 cifre e le lettere da A fino ad F per le restanti 6 cifre (0123456789ABCDEF).
L'intensità dei colori è rappresentata a partire dalla coppia di caratteri "00", che è l'intensità di colore minima, fino alla coppia di caratteri "FF", che è l'intensità massima.
Per esempio, il colore rosso più intenso ha codice #FF0000▀, perchè ha il rosso alla massima intensità (FF) e verde e blu a intensità 00 (assenza di colore).
Tutti gli altri colori sono il risultato delle possibili combinazioni dei tre colori primari:
Per esempio, l'arancione è #FFA500 ▀.
Valori uguali con intensità massima danno il colore bianco. Esempio:
color: #FFF; ▀
Valori uguali con intensità minima danno il colore nero. Esempio:
color: #000; ▀
La codifica esadecimale si usa esclusivamente nei codici delle pagine web.
Colori RGB
I colori RGB (Red Green Blue, colori primari) sono espressi da tre serie di tre numeri in un intervallo tra 0 e 255.
I colori RGB si scrivono con “rgb” seguito da tre numeri separati da virgole e racchiusi tra parentesi "()". Ogni numero rappresenta la percentuale di intensità di uno dei tre colori primari, espressa in un intervallo da 0 a 255, dove '0' indica la percentuale più bassa e '255' quella più alta.
Per esempio, il colore rosso più intenso ha codice rgb(255, 0, 0)▀, perchè ha il rosso alla massima intensità (255) e verde e blu a intensità 0 (assenza di colore).
Tutti gli altri colori sono il risultato delle possibili combinazioni dei tre colori primari:
Per esempio, l'arancione è rgb(255, 165, 0) ▀.
Valori uguali con intensità massima danno il colore bianco. Esempio:
color: rgb(255, 255, 255); ▀
Valori uguali con intensità minima danno il colore nero. Esempio:
color: rgb(0, 0, 0); ▀
RGBA
RGBA è un'estensione di RGB che definisce l'opacità del colore aggiungendo un canale alfa.
Il parametro alfa è un numero compreso tra 0,0 (totalmente trasparente) e 1,0 (non trasparente):
Per esempio:
rgba(0, 0, 255, 0.4) ▀
Il valore 0.8 è il parametro alfa che indica la percentuale di opacità da applicare al colore impostato.
Generare i colori HTML
È possibile generare manualmente qualsiasi colore cambiando le combinazioni di lettere e numeri che compongono i codici, ma uno strumento, il "Color Picker (selettore di colore)", può fare il lavoro per noi.
Esistono moltissime versioni di Color Picker più o meno elaborate, ma il codice di base, implementabile in qualsiasi pagina html, è molto semplice ed è questo:
<input type="color" value="#f86f0b">
Dove alla voce "value" si può inserire il codice colore preferito per la casella di prima visualizzazione.
Esempio funzionante:
Coversione da hex a rgb e da rgb a hex
Se necessario, ci sono strumenti per convertire il formato dei codici colore.
Nella sezione "Risorse varie" delle "Risorse per i webmaster" potete trovare alcune varianti di Color Picker per le pagine web.
Importanza dei colori nelle pagine web
Scegliere i colori giusti per costruire una pagina web è importante non solo per il piacere visivo, ma anche per la navigazione e per l'accessibilità.
Il contrasto dei colori è fondamentale per una corretta lettura dei contenuti, per l'accessibilità e per ottenere un buon punteggio di performance che aiuta nel posizionamento.