Palette di colori per il web


Come sono rappresentati i colori in html/css

Quando abbiamo a che fare con il codice css o html ci capita di utlizzare dei codici che rappresentano i colori. Ogni codice corrispondente a un colore contiene il simbolo # seguito da 6 caratteri esadecimali. Questi caratteri vanno interpretati in questo modo:
I primi 2 rappresentano l’intensità del rosso.
#FF0000
Il terzo e quarto indicano l’intensità del verde.
#00FF00
Gli ultimi due indicano l’intensità del blu.
#0000FF
Teoricamente la combinazione dei valori di rosso verde e blu da 0 a 255 permette di ottenere un totale di più di 16 milioni di colori (256 * 256 * 256).
La maggior parte dei browser moderni permette di visualizzare almeno 16384 colori differenti.

Come utilizzare i codici del colore

Impostiamo un colore di sfondo per la pagina web

<body style="background-color:#CCCCCC">

Impostiamo un colore particolare per una porzione di testo

<span style="color:#0000FF">Testo</span>

In un foglio di stile esterno scriveremo invece

body { background-color:#CCCCCC }

 

span { color:#0000FF }

Specificare i colori in RGB

Esiste un sistema alternativo per indicare i colori. Un colore RGB (red, green, blue) è specificato con la scrittura rgb(rosso, verde, blu). Ogni parametro all’interno delle parentesi definisce l’intensità del colore e può assumere valori che vanno dallo 0 a 255 oppure una percentuale da 0 a 100%.

Per esempio con le scritture rgb(255,0,0) oppure rgb(100%,0%,0%) otteniamo la massima intensità di rosso.

Gli esempi precedenti possono essere riscritti in questo modo

<body style="background-color: rgb(204,204,204) ">
<span style="color:  rgb(0%,0%,100%)">Testo</span>

Cosa sono i Web safe colors – Colori web standard

Sono l’insieme di 216 colori standard html i quali appaiono sempre allo stesso modo indipendentemente dal monitor, browser o sistema operativo utilizzati.

Riconoscere un colore ‘web safe’

Il codice esadecimale di un colore standard è costituito dalla combinazione delle seguenti coppie 00, 33, 66, 99, CC e FF.

Oppure:

Valori RGB corrispondenti:
0, 51, 102, 153, 204, 255

Valori espressi in percentuale rispetto a 255
0%, 20%, 40%, 60%, 80%, 100%

Tutte le combinazioni possibili

  • #000000
  • #000033
  • #000066
  • #000099
  • #0000CC
  • #0000FF
  • #003300
  • #003333
  • #003366
  • #003399
  • #0033CC
  • #0033FF
  • #006600
  • #006633
  • #006666
  • #006699
  • #0066CC
  • #0066FF
  • #009900
  • #009933
  • #009966
  • #009999
  • #0099CC
  • #0099FF
  • #00CC00
  • #00CC33
  • #00CC66
  • #00CC99
  • #00CCCC
  • #00CCFF
  • #00FF00
  • #00FF33
  • #00FF66
  • #00FF99
  • #00FFCC
  • #00FFFF
  • #330000
  • #330033
  • #330066
  • #330099
  • #3300CC
  • #3300FF
  • #333300
  • #333333
  • #333366
  • #333399
  • #3333CC
  • #3333FF
  • #336600
  • #336633
  • #336666
  • #336699
  • #3366CC
  • #3366FF
  • #339900
  • #339933
  • #339966
  • #339999
  • #3399CC
  • #3399FF
  • #33CC00
  • #33CC33
  • #33CC66
  • #33CC99
  • #33CCCC
  • #33CCFF
  • #33FF00
  • #33FF33
  • #33FF66
  • #33FF99
  • #33FFCC
  • #33FFFF
  • #660000
  • #660033
  • #660066
  • #660099
  • #6600CC
  • #6600FF
  • #663300
  • #663333
  • #663366
  • #663399
  • #6633CC
  • #6633FF
  • #666600
  • #666633
  • #666666
  • #666699
  • #6666CC
  • #6666FF
  • #669900
  • #669933
  • #669966
  • #669999
  • #6699CC
  • #6699FF
  • #66CC00
  • #66CC33
  • #66CC66
  • #66CC99
  • #66CCCC
  • #66CCFF
  • #66FF00
  • #66FF33
  • #66FF66
  • #66FF99
  • #66FFCC
  • #66FFFF
  • #990000
  • #990033
  • #990066
  • #990099
  • #9900CC
  • #9900FF
  • #993300
  • #993333
  • #993366
  • #993399
  • #9933CC
  • #9933FF
  • #996600
  • #996633
  • #996666
  • #996699
  • #9966CC
  • #9966FF
  • #999900
  • #999933
  • #999966
  • #999999
  • #9999CC
  • #9999FF
  • #99CC00
  • #99CC33
  • #99CC66
  • #99CC99
  • #99CCCC
  • #99CCFF
  • #99FF00
  • #99FF33
  • #99FF66
  • #99FF99
  • #99FFCC
  • #99FFFF
  • #CC0000
  • #CC0033
  • #CC0066
  • #CC0099
  • #CC00CC
  • #CC00FF
  • #CC3300
  • #CC3333
  • #CC3366
  • #CC3399
  • #CC33CC
  • #CC33FF
  • #CC6600
  • #CC6633
  • #CC6666
  • #CC6699
  • #CC66CC
  • #CC66FF
  • #CC9900
  • #CC9933
  • #CC9966
  • #CC9999
  • #CC99CC
  • #CC99FF
  • #CCCC00
  • #CCCC33
  • #CCCC66
  • #CCCC99
  • #CCCCCC
  • #CCCCFF
  • #CCFF00
  • #CCFF33
  • #CCFF66
  • #CCFF99
  • #CCFFCC
  • #CCFFFF
  • #FF0000
  • #FF0033
  • #FF0066
  • #FF0099
  • #FF00CC
  • #FF00FF
  • #FF3300
  • #FF3333
  • #FF3366
  • #FF3399
  • #FF33CC
  • #FF33FF
  • #FF6600
  • #FF6633
  • #FF6666
  • #FF6699
  • #FF66CC
  • #FF66FF
  • #FF9900
  • #FF9933
  • #FF9966
  • #FF9999
  • #FF99CC
  • #FF99FF
  • #FFCC00
  • #FFCC33
  • #FFCC66
  • #FFCC99
  • #FFCCCC
  • #FFCCFF
  • #FFFF00
  • #FFFF33
  • #FFFF66
  • #FFFF99
  • #FFFFCC
  • #FFFFFF

Nomi dei colori definiti in css/html

Nelle specifiche CSS/HTML sono definiti 140 nomi di colori differenti, diciassette dei quali sono colori standard. Significa che possiamo utilizzare direttamente il nome del colore senza conoscere il codice esadecimale relativo.

<span style="color: Blue">Testo</span>

Nome coloreCodiceColore
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 
DarkOrchid9932CC 
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 

  inStileWeb.com