logo simone provenzano

 

Come usare i nomi dei colori al posto delle codifiche HEX, RGB ed HSL

Risorse per il tuo sito web

nomi colori html   nomi colori css   nomi colori web

 

 

 

 

 

Quando si realizza un sito web capita praticamente sempre di dover ricorrere all'uso dei colori per personalizzarne l'aspetto. Può essere necessario, ad esempio, assegnare un colore ad un testo, allo sfondo della pagina, alle celle di una tabella, ai bordi di un livello, ecc.
Se hai letto l'articolo "Tavolozza colori HEX (esadecimali), RGB e HSL (o HSB)", avrai notato che esistono diverse codifiche numeriche o alfanumeriche per impostare il colore desiderato. Ricorrere a queste codifiche può rendere il lavoro complicato se non si utilizza uno strumento che consenta di convertire i colori in codice, oppure se non si dispone di abbastanza esperienza per ricordare a memoria i codici dei colori più utilizzati.
In questo caso sappi che non tutto è perduto! Esiste infatti anche un'altra codifica che consiste semplicemente nel chiamare i colori per nome! Se, ad esempio, vuoi impostare il colore blu, puoi utilizzare il valore "Blue", per il nero puoi utilizzare il valore "Black", e via dicendo. Si tratta inoltre di una codifica supportata da tutti i principali browser, quindi non dovrai nemmeno porti il problema della compatibilità.
La codifica a nomi ti mette a disposizione una lista di 141 colori. Un numero molto più ridotto rispetto ai 16 milioni di colori che si possono ottenere con le altre codifiche (per approfondire questo argomento puoi leggere l'articolo: "Profondità di colore, modello RGB e CYMK").
Tuttavia va detto che molto spesso i colori più utilizzati nei casi comuni sono inferiori anche ai 141 della codifica a nomi, e che una scelta più minuziosa dei colori, in genere, è prevista solo in ambiti nel quali siano molto importanti il design e l'aspetto estetico di un sito web.
Perciò, se non vai molto d'accordo con le codifiche HEX (esadecimale), RGB ed HSL, o se i colori presenti nella codifica a nomi bastano a soddisfare le tue esigenze, potrai alleggerire il tuo lavoro imparando solo pochi termini.

 

 

 

Ecco la lista di tutti i nomi insieme ai corrispondenti colori codificati.
N.B. Il grigio può essere indicato come "Gray" ma anche come "Grey", quindi considera questa possibile alternativa per tutti i colori che contengono il termine "Gray" nel relativo nome.

 

NOME COLORE COLORE
AliceBlue   
AntiqueWhite   
Aqua   
Aquamarine   
Azure   
Beige   
Bisque   
Black   
BlanchedAlmond   
Blue   
BlueViolet   
Brown   
BurlyWood   
CadetBlue   
Chartreuse   
Chocolate   
Coral   
CornflowerBlue   
Cornsilk   
Crimson   
Cyan   
DarkBlue   
DarkCyan   
DarkGoldenRod   
DarkGray   
DarkGreen   
DarkKhaki   
DarkMagenta   
DarkOliveGreen   
DarkOrange   
DarkOrchid   
DarkRed   
DarkSalmon   
DarkSeaGreen   
DarkSlateBlue   
DarkSlateGray   
DarkTurquoise   
DarkViolet   
DeepPink   
DeepSkyBlue   
DimGray   
DodgerBlue   
FireBrick   
FloralWhite   
ForestGreen   
Fuchsia   
Gainsboro   
GhostWhite   
Gold   
GoldenRod   
Gray   
Green   
GreenYellow   
HoneyDew   
HotPink   
IndianRed    
Indigo    
Ivory   
Khaki   
Lavender   
LavenderBlush   
LawnGreen   
LemonChiffon   
LightBlue   
LightCoral   
LightCyan   
LightGoldenRodYellow   
LightGray   
LightGreen   
LightPink   
LightSalmon   
LightSeaGreen   
LightSkyBlue   
LightSlateGray   
LightSteelBlue   
LightYellow   
Lime   
LimeGreen   
Linen   
Magenta   
Maroon   
MediumAquaMarine   
MediumBlue   
MediumOrchid   
MediumPurple   
MediumSeaGreen   
MediumSlateBlue   
MediumSpringGreen   
MediumTurquoise   
MediumVioletRed   
MidnightBlue   
MintCream   
MistyRose   
Moccasin   
NavajoWhite   
Navy   
OldLace   
Olive   
OliveDrab   
Orange   
OrangeRed   
Orchid   
PaleGoldenRod   
PaleGreen   
PaleTurquoise   
PaleVioletRed   
PapayaWhip   
PeachPuff   
Peru   
Pink   
Plum   
PowderBlue   
Purple   
RebeccaPurple   
Red   
RosyBrown   
RoyalBlue   
SaddleBrown   
Salmon   
SandyBrown   
SeaGreen   
SeaShell   
Sienna   
Silver   
SkyBlue   
SlateBlue   
SlateGray   
Snow   
SpringGreen   
SteelBlue   
Tan   
Teal   
Thistle   
Tomato   
Turquoise   
Violet   
Wheat   
White   
WhiteSmoke   
Yellow   
YellowGreen   

 

 

 

Facciamo giusto un paio di esempi per testare concretamente l'utilizzo di questa codifica nel nostro CSS:

 

Esempio 1. Testo colorato in Magenta

p {
color: Magenta;
}

 

Il testo che stai leggendo in questo momento rappresenta il risultato dell'esempio 1.

 

 

Esempio 2. Livello con sfondo blu, bordo rosso e testo giallo oro al suo interno

div {
background-color: RoyalBlue;
border:2px solid Red;
}

p {
color: Gold;
}

 

Quello che stai vedendo rappresenta il risultato dell'esempio 2.

 

 

Spero che questo articolo possa esserti di aiuto per personalizzare i colori del tuo sito web.
Voglio comunque ribadire che esistono diverse altre codifiche, e che non necessariamente questa codifica a nomi si rivela sempre la più comoda. Io personalmente preferisco la codifica esadecimale, perché mi consente di ottenere con una precisione molto superiore il colore che mi serve, e per ottenere il codice esatto utilizzo la Tavolozza colori HEX (esadecimali), RGB e HSL (o HSB).
Ognuno ha le sue esigenze e le sue preferenze; io ti ho fornito le informazioni e gli strumenti necessari, ora sta a te scegliere la soluzione che ti soddisfa di più!

 

 

Simone Provenzano

 

 

 

 

 

Privacy e Cookie