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.
Usa il codice
189ed7ca010140fc2065b06e3802bcd5
per ricevere 5 € dopo l'iscrizioneCome 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.
👇 Servizi free
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
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:
Usa il codice
189ed7ca010140fc2065b06e3802bcd5
per ricevere 5 € dopo l'iscrizione- 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)
👇 Contenuti da non perdere 👇
- Domini Internet 🌍
- Gratis 🎉
- Informatica 🖥
- intelligenza artificiale 👁
- Scrivere 🖋
- WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🔵 Uso di WP Asset CleanUp: ottimizzare il PageSpeed Insights (guida)
- 🟡 Domini .com: come e dove registrarne uno
- 🟢 DNS privati: come e perchè farne uso