I colori HTML permettono di stabilire, mediante una classe CSS apposita oppure l’attributo style, il colore sia di sfondo che principale di un qualsiasi contenitore HTML. Possiamo cambiare i colori dei tag P, SPAN, UL, LI, LO e DIV, ed ottenere diverse combinazioni sulla base delle nostre preferenze.
Come funzionano i colori in formato esadecimale
I colori in HEX (esadecimale) sono un modo di rappresentare i colori usando la combinazione dei tre colori primari della luce: Rosso (R), Verde (G) e Blu (B).
Ogni colore è composto da due cifre esadecimali, che vanno da 00 (completamente spento) a FF (completamente acceso).
È come avere tre finestrelle, una per ogni colore: R, G e B. Se la finestrella è spalancata (FF), il colore è al massimo, se è chiusa (00), è spento.
10 esempi pratici con spiegazione:
| HEX | RGB | Spiegazione |
|---|---|---|
#FF0000 | (255, 0, 0) | Rosso puro → la finestrella del Rosso è spalancata, le altre chiuse. |
#00FF00 | (0, 255, 0) | Verde puro → la finestrella del Verde è aperta, le altre chiuse. |
#0000FF | (0, 0, 255) | Blu puro → la finestrella del Blu è aperta, le altre chiuse. |
#FFFF00 | (255, 255, 0) | Giallo → Rosso e Verde spalancati, Blu chiuso (rosso+verde = giallo). |
#FF00FF | (255, 0, 255) | Magenta → Rosso e Blu spalancati, Verde chiuso. |
#00FFFF | (0, 255, 255) | Ciano → Verde e Blu spalancati, Rosso chiuso. |
#000000 | (0, 0, 0) | Nero → tutte le finestrelle chiuse. |
#FFFFFF | (255, 255, 255) | Bianco → tutte le finestrelle spalancate. |
#808080 | (128, 128, 128) | Grigio medio → tutte le finestrelle a metà aperte. |
#FFA500 | (255, 165, 0) | Arancione → Rosso spalancato, Verde semiaperto, Blu chiuso. |
Quindi, giocare con le finestrelle (00 → chiuso, FF → aperto, valori intermedi → socchiuso) ti permette di ottenere qualsiasi colore!
Come impostare un colore in HTML
Per mantere il markup HTML separato dalla grafica, in genere si definisce una nuova classe CSS e si attribuisce all’elemento da colorare. La classe può essere predefinita nel framework CSS che stiamo usando (ad esempio Boostrap) oppure può essere definita da noi in un file CSS o un attributo <style> che viene incluso nella pagina.
Per esempio, se volessi colorare:
<div>questa scritta</div>
aggiungo come prima cosa la classe CSS al DIV:
<div class="coloreprova">questa scritta</div>
e poi aggiungo la definizione della classe coloreprova nel CSS (nello specifico, il blu, ovvero #0000FF):
.coloreprova{color: #0000FF;}
ottenendo così il seguente risultato finale:
cosa ottenibile inserendo, in alternativa, un attributo inline di tipo style nella pagina, in questo caso senza file esterni CSS:
<style>.coloreprova{color: #0000FF;}</style>
Grazie alla codifica esadecimale (detta in gergo HEX), è possibile ottenere fino a 16.777.216 sfumature di colore diverse tra loro.
Codici dei colori HTML
Di seguito riportiamo i codici HEX, ovvero i numeri esadecimali associati ai principali colori standard del CSS. È plausibile che, nonostante esistano varie sfumature, nei vostri siti web dobbiate scegliere esclusivamente tra questi.
| Nome Colore | Colore HEX | Anteprima |
|---|---|---|
| Rosso | #FF0000 | |
| Verde | #00FF00 | |
| Blu | #0000FF | |
| Giallo | #FFFF00 | |
| Arancione | #FFA500 | |
| Magenta | #FF00FF | |
| Ciano | #00FFFF | |
| Nero | #000000 | |
| Bianco | #FFFFFF | |
| Grigio | #808080 | |
| Rosa | #FFC0CB | |
| Marrone | #A52A2A | |
| Bordeaux | #800000 | |
| Indaco | #4B0082 | |
| Lavanda | #E6E6FA | |
| Verde oliva | #808000 | |
| Azzurro | #87CEEB | |
| Verde scuro | #006400 | |
| Beige | #F5F5DC | |
| Panna | #FFFDD0 | |
| Corallo | #FF7F50 | |
| Lilla | #C8A2C8 | |
| Turchese | #40E0D0 | |
| Argento | #C0C0C0 | |
| Oro | #FFD700 |
Scegli i colori da una tavolozza utilizzando questo tool gratuito:
Come usare i colori nel web
In genere il testo colorato non è un grandissima idea: nel testo di un articolo, ad esempio, sarebbe opportuno evitare di usarne più di un paio, perchè l’effetto “psichedelico” che genera un testo HTML con molti colori da’ più svantaggi al lettore che altro.
Grazie alla ruota dei colori (Color wheel) possiamo scegliere le combinazioni in modo avveduto, ricordandoci di massimizzare sempre il contrasto tra sfondo e testo. (color contrast checker).
Potete anche provare il nostro selettore di colori in esadecimale.
Plugin WordPress per i colori nel testo
L’editor classico di WP non fornisce la possibilità di cambiare i colori nel testo, per un motivo legato essenzialmente all’usabilità del web ed alla possibilità di usarne troppi ed inficiarne la leggibilità . Ad ogni modo, è certamente possibile abilitare questa feature nel proprio sito, grazie all’installazione di alcuni plugin specifici. I plugin gratuiti utilizzabili per supportare il testo colorato, che verrà quindi abilitato nell’editor di default, sono di fatto due:
- TinyMCE Color Picker che è utile per abilitare il selettore dei colori nella barra degli strumenti;
- ACF RGBA Color Picker che fa la stessa cosa se usate i campi personalizzati di ACF (Advanced Custom Fields)
