Colori HTML: come impostarli. Codici HEX

Aggiornato il: 27-06-2022 11:02
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 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.

Tabella colori HTML

Scegli i colori da una tavolozza utilizzando questo tool gratuito:

Color Picker

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)

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)