I colori standard del linguaggio HTML
Le specifiche del linguaggio di marcatura HTML (v. 4.01) identifica una tavolozza (palette) di 16 colori standard che prendono il nome di Web Safe Color. Di seguito sono riportati in ordine alfabetico.
| Name | HEX | RGB | |
|---|---|---|---|
| aqua | #00ffff | 0,255,255 | |
| black | #000000 | 0,0,0 | |
| blue | #0000ff | 0,0,255 | |
| fuchsia | #ff00ff | 255,0,255 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 | |
| lime | #00ff00 | 0,255,0 | |
| maroon | #800000 | 128,0,0 | |
| navy | #000080 | 0,0,128 | |
| olive | #808000 | 128,128,0 | |
| purple | #800080 | 128,0,128 | |
| red | #ff0000 | 255,0,0 | |
| silver | #c0c0c0 | 192,192,192 | |
| teal | #008080 | 0,128,128 | |
| white | #ffffff | 255,255,255 | |
| yellow | #ffff00 | 255,255,0 |
X11 Colors
Oltre ai 16 colori definiti dallo standard HTML, è possibile identificare una seconda tavolozza colori, molto più ampia, conosciuta come Standard X11. Questa tavolozza contiene svariati colori riconosciuti da praticamente tutti i browser in circolazione. Di seguito la tavolozza coi colori in ordine alfabetico:
| Name | HEX | RGB | |
|---|---|---|---|
| aliceblue | #f0f8ff | 240,248,255 | |
| antiquewhite | #faebd7 | 250,235,215 | |
| aqua | #00ffff | 0,255,255 | |
| aquamarine | #7fffd4 | 127,255,212 | |
| azure | #f0ffff | 240,255,255 | |
| beige | #f5f5dc | 245,245,220 | |
| bisque | #ffe4c4 | 255,228,196 | |
| black | #000000 | 0,0,0 | |
| blanchedalmond | #ffebcd | 255,235,205 | |
| blue | #0000ff | 0,0,255 | |
| blueviolet | #8a2be2 | 138,43,226 | |
| brown | #a52a2a | 165,42,42 | |
| burlywood | #deb887 | 222,184,135 | |
| cadetblue | #5f9ea0 | 95,158,160 | |
| chartreuse | #7fff00 | 127,255,0 | |
| chocolate | #d2691e | 210,105,30 | |
| coral | #ff7f50 | 255,127,80 | |
| cornflowerblue | #6495ed | 100,149,237 | |
| cornsilk | #fff8dc | 255,248,220 | |
| crimson | #dc143c | 220,20,60 | |
| cyan | #00ffff | 0,255,255 | |
| darkblue | #00008b | 0,0,139 | |
| darkcyan | #008b8b | 0,139,139 | |
| darkgoldenrod | #b8860b | 184,134,11 | |
| darkgray | #a9a9a9 | 169,169,169 | |
| darkgreen | #006400 | 0,100,0 | |
| darkgrey | #a9a9a9 | 169,169,169 | |
| darkkhaki | #bdb76b | 189,183,107 | |
| darkmagenta | #8b008b | 139,0,139 | |
| darkolivegreen | #556b2f | 85,107,47 | |
| darkorange | #ff8c00 | 255,140,0 | |
| darkorchid | #9932cc | 153,50,204 | |
| darkred | #8b0000 | 139,0,0 | |
| darksalmon | #e9967a | 233,150,122 | |
| darkseagreen | #8fbc8f | 143,188,143 | |
| darkslateblue | #483d8b | 72,61,139 | |
| darkslategray | #2f4f4f | 47,79,79 | |
| darkslategrey | #2f4f4f | 47,79,79 | |
| darkturquoise | #00ced1 | 0,206,209 | |
| darkviolet | #9400d3 | 148,0,211 | |
| deeppink | #ff1493 | 255,20,147 | |
| deepskyblue | #00bfff | 0,191,255 | |
| dimgray | #696969 | 105,105,105 | |
| dimgrey | #696969 | 105,105,105 | |
| dodgerblue | #1e90ff | 30,144,255 | |
| firebrick | #b22222 | 178,34,34 | |
| floralwhite | #fffaf0 | 255,250,240 | |
| forestgreen | #228b22 | 34,139,34 | |
| fuchsia | #ff00ff | 255,0,255 | |
| gainsboro | #dcdcdc | 220,220,220 | |
| ghostwhite | #f8f8ff | 248,248,255 | |
| gold | #ffd700 | 255,215,0 | |
| goldenrod | #daa520 | 218,165,32 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 | |
| greenyellow | #adff2f | 173,255,47 | |
| grey | #808080 | 128,128,128 | |
| honeydew | #f0fff0 | 240,255,240 | |
| hotpink | #ff69b4 | 255,105,180 | |
| indianred | #cd5c5c | 205,92,92 | |
| indigo | #4b0082 | 75,0,130 | |
| ivory | #fffff0 | 255,255,240 | |
| khaki | #f0e68c | 240,230,140 | |
| lavender | #e6e6fa | 230,230,250 | |
| lavenderblush | #fff0f5 | 255,240,245 | |
| lawngreen | #7cfc00 | 124,252,0 | |
| lemonchiffon | #fffacd | 255,250,205 | |
| lightblue | #add8e6 | 173,216,230 | |
| lightcoral | #f08080 | 240,128,128 | |
| lightcyan | #e0ffff | 224,255,255 | |
| lightgoldenrodyellow | #fafad2 | 250,250,210 | |
| lightgray | #d3d3d3 | 211,211,211 | |
| lightgreen | #90ee90 | 144,238,144 | |
| lightgrey | #d3d3d3 | 211,211,211 | |
| lightpink | #ffb6c1 | 255,182,193 | |
| lightsalmon | #ffa07a | 255,160,122 | |
| lightseagreen | #20b2aa | 32,178,170 | |
| lightskyblue | #87cefa | 135,206,250 | |
| lightslategray | #778899 | 119,136,153 | |
| lightslategrey | #778899 | 119,136,153 | |
| lightsteelblue | #b0c4de | 176,196,222 | |
| lightyellow | #ffffe0 | 255,255,224 | |
| lime | #00ff00 | 0,255,0 | |
| limegreen | #32cd32 | 50,205,50 | |
| linen | #faf0e6 | 250,240,230 | |
| magenta | #ff00ff | 255,0,255 | |
| maroon | #800000 | 128,0,0 | |
| mediumaquamarine | #66cdaa | 102,205,170 | |
| mediumblue | #0000cd | 0,0,205 | |
| mediumorchid | #ba55d3 | 186,85,211 | |
| mediumpurple | #9370db | 147,112,219 | |
| mediumseagreen | #3cb371 | 60,179,113 | |
| mediumslateblue | #7b68ee | 123,104,238 | |
| mediumspringgreen | #00fa9a | 0,250,154 | |
| mediumturquoise | #48d1cc | 72,209,204 | |
| mediumvioletred | #c71585 | 199,21,133 | |
| midnightblue | #191970 | 25,25,112 | |
| mintcream | #f5fffa | 245,255,250 | |
| mistyrose | #ffe4e1 | 255,228,225 | |
| moccasin | #ffe4b5 | 255,228,181 | |
| navajowhite | #ffdead | 255,222,173 | |
| navy | #000080 | 0,0,128 | |
| oldlace | #fdf5e6 | 253,245,230 | |
| olive | #808000 | 128,128,0 | |
| olivedrab | #6b8e23 | 107,142,35 | |
| orange | #ffa500 | 255,165,0 | |
| orangered | #ff4500 | 255,69,0 | |
| orchid | #da70d6 | 218,112,214 | |
| palegoldenrod | #eee8aa | 238,232,170 | |
| palegreen | #98fb98 | 152,251,152 | |
| paleturquoise | #afeeee | 175,238,238 | |
| palevioletred | #db7093 | 219,112,147 | |
| papayawhip | #ffefd5 | 255,239,213 | |
| peachpuff | #ffdab9 | 255,218,185 | |
| peru | #cd853f | 205,133,63 | |
| pink | #ffc0cb | 255,192,203 | |
| plum | #dda0dd | 221,160,221 | |
| powderblue | #b0e0e6 | 176,224,230 | |
| purple | #800080 | 128,0,128 | |
| red | #ff0000 | 255,0,0 | |
| rosybrown | #bc8f8f | 188,143,143 | |
| royalblue | #4169e1 | 65,105,225 | |
| saddlebrown | #8b4513 | 139,69,19 | |
| salmon | #fa8072 | 250,128,114 | |
| sandybrown | #f4a460 | 244,164,96 | |
| seagreen | #2e8b57 | 46,139,87 | |
| seashell | #fff5ee | 255,245,238 | |
| sienna | #a0522d | 160,82,45 | |
| silver | #c0c0c0 | 192,192,192 | |
| skyblue | #87ceeb | 135,206,235 | |
| slateblue | #6a5acd | 106,90,205 | |
| slategray | #708090 | 112,128,144 | |
| slategrey | #708090 | 112,128,144 | |
| snow | #fffafa | 255,250,250 | |
| springgreen | #00ff7f | 0,255,127 | |
| steelblue | #4682b4 | 70,130,180 | |
| tan | #d2b48c | 210,180,140 | |
| teal | #008080 | 0,128,128 | |
| thistle | #d8bfd8 | 216,191,216 | |
| tomato | #ff6347 | 255,99,71 | |
| turquoise | #40e0d0 | 64,224,208 | |
| violet | #ee82ee | 238,130,238 | |
| wheat | #f5deb3 | 245,222,179 | |
| white | #ffffff | 255,255,255 | |
| whitesmoke | #f5f5f5 | 245,245,245 | |
| yellow | #ffff00 | 255,255,0 | |
| yellowgreen | #9acd32 | 154,205,50 |
Utilizzare i colori in HTML e nei CSS
Negli attributi di layout di HTML è possibile esprimere i colori sia mediante il loro nome convenzionale che attraverso la notazione esadecimale, vediamo un esempio:
<body bgcolor="yellow">
è equivalente a
<body bgcolor="#FFFF00">
Utilizzando i CSS possiamo utilizzare, indifferentemente, il nome, la notazione esadecimale o RGB. Ad esempio:
body {
background-color: yellow;
}
è equivalente a
body {
background-color: #FFFF00;
}
ed anche a
body {
background-color: rgb(255,255,0);
}