Colori HTML: come impostarli. Codici HEX

Colori HTML: come impostarli. Codici HEX (Guide, Assistenza Tecnica, Suggerimenti per gestire il tuo sito)
Argomenti trattati: ,
Pubblicato il: 14 Marzo 2021

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:

questa scritta

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

Questi colori sono supportati universalmente da qualsiasi browser. Ci sono 140 colori (17 base + 123 aggiuntivi) con annessa descrizione standard in CSS (il nome CSS) ed il codice esadecimale annesso. I 17 colori standard sono i seguenti: aqua, nero, blu, fucsia, grigio, verde, lime, marrone, blu scuro, oliva, arancione, viola, rosso, argento, verde acqua, bianco e giallo.
Color NameHEXResa grafica
AliceBlue#F0F8FF   
AntiqueWhite#FAEBD7   
Aqua#00FFFF   
Aquamarine#7FFFD4   
Azure#F0FFFF   
Beige#F5F5DC   
Bisque#FFE4C4   
Black#000000   
BlanchedAlmond#FFEBCD   
Blue#0000FF   
BlueViolet#8A2BE2   
Brown#A52A2A   
BurlyWood#DEB887   
CadetBlue#5F9EA0   
Chartreuse#7FFF00   
Chocolate#D2691E   
Coral#FF7F50   
CornflowerBlue#6495ED   
Cornsilk#FFF8DC   
Crimson#DC143C   
Cyan#00FFFF   
DarkBlue#00008B   
DarkCyan#008B8B   
DarkGoldenRod#B8860B   
DarkGray#A9A9A9   
DarkGreen#006400   
DarkKhaki#BDB76B   
DarkMagenta#8B008B   
DarkOliveGreen#556B2F   
DarkOrange#FF8C00   
DarkOrchid#9932CC   
DarkRed#8B0000   
DarkSalmon#E9967A   
DarkSeaGreen#8FBC8F   
DarkSlateBlue#483D8B   
DarkSlateGray#2F4F4F   
DarkTurquoise#00CED1   
DarkViolet#9400D3   
DeepPink#FF1493   
DeepSkyBlue#00BFFF   
DimGray#696969   
DodgerBlue#1E90FF   
FireBrick#B22222   
FloralWhite#FFFAF0   
ForestGreen#228B22   
Fuchsia#FF00FF   
Gainsboro#DCDCDC   
GhostWhite#F8F8FF   
Gold#FFD700   
GoldenRod#DAA520   
Gray#808080   
Green#008000   
GreenYellow#ADFF2F   
HoneyDew#F0FFF0   
HotPink#FF69B4   
IndianRed#CD5C5C   
Indigo#4B0082   
Ivory#FFFFF0   
Khaki#F0E68C   
Lavender#E6E6FA   
LavenderBlush#FFF0F5   
LawnGreen#7CFC00   
LemonChiffon#FFFACD   
LightBlue#ADD8E6   
LightCoral#F08080   
LightCyan#E0FFFF   
LightGoldenRodYellow#FAFAD2   
LightGray#D3D3D3   
LightGreen#90EE90   
LightPink#FFB6C1   
LightSalmon#FFA07A   
LightSeaGreen#20B2AA   
LightSkyBlue#87CEFA   
LightSlateGray#778899   
LightSteelBlue#B0C4DE   
LightYellow#FFFFE0   
Lime#00FF00   
LimeGreen#32CD32   
Linen#FAF0E6   
Magenta#FF00FF   
Maroon#800000   
MediumAquaMarine#66CDAA   
MediumBlue#0000CD   
MediumOrchid#BA55D3   
MediumPurple#9370DB   
MediumSeaGreen#3CB371   
MediumSlateBlue#7B68EE   
MediumSpringGreen#00FA9A   
MediumTurquoise#48D1CC   
MediumVioletRed#C71585   
MidnightBlue#191970   
MintCream#F5FFFA   
MistyRose#FFE4E1   
Moccasin#FFE4B5   
NavajoWhite#FFDEAD   
Navy#000080   
OldLace#FDF5E6   
Olive#808000   
OliveDrab#6B8E23   
Orange#FFA500   
OrangeRed#FF4500   
Orchid#DA70D6   
PaleGoldenRod#EEE8AA   
PaleGreen#98FB98   
PaleTurquoise#AFEEEE   
PaleVioletRed#DB7093   
PapayaWhip#FFEFD5   
PeachPuff#FFDAB9   
Peru#CD853F   
Pink#FFC0CB   
Plum#DDA0DD   
PowderBlue#B0E0E6   
Purple#800080   
Red#FF0000   
RosyBrown#BC8F8F   
RoyalBlue#4169E1   
SaddleBrown#8B4513   
Salmon#FA8072   
SandyBrown#F4A460   
SeaGreen#2E8B57   
SeaShell#FFF5EE   
Sienna#A0522D   
Silver#C0C0C0   
SkyBlue#87CEEB   
SlateBlue#6A5ACD   
SlateGray#708090   
Snow#FFFAFA   
SpringGreen#00FF7F   
SteelBlue#4682B4   
Tan#D2B48C   
Teal#008080   
Thistle#D8BFD8   
Tomato#FF6347   
Turquoise#40E0D0   
Violet#EE82EE   
Wheat#F5DEB3   
White#FFFFFF   
WhiteSmoke#F5F5F5   
Yellow#FFFF00   
YellowGreen#9ACD32   

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)
5/5 (1)

Che te ne pare?

Articoli più letti su questi argomenti: