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):
Usa il codice
189ed7ca010140fc2065b06e3802bcd5
per ricevere 5 € dopo l’iscrizione
.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
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 Name | HEX | Resa 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:
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)
👇 Da non perdere 👇
- Cellulari 📱
- Gratis 🎉
- Informatica 🖥
- intelligenza artificiale 👁
- monitoraggio servizi online 📈
- Scrivere 🖋
- WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟢 Come rinnovare un dominio scaduto [guida]
- 🔵 TrueName: garanzia per evitare la registrazione di nomi di domini simili
- 🟠 Registrazione domini con estensione: .ac