Web colors
\n\n\n
Authors of
web pages have a variety of options available for specifying
colors for elements of web documents. Colors may be specified as an
RGB triplet in
hexadecimal format (a
hex triplet); they may also be specified according to their common
English names in some cases.
The first versions of
Mosaic and
Netscape Navigator used the
X11 color names as the basis for their color lists, as both started as
X Window System applications. The origin of the X11 color list is unknown.
[1]
Hex triplet
A hex triplet is a 3 byte number used in HTML and CSS to represent colors, represented in hexadecimal (hex for short). Since a byte is 8 bits, values of each element can go from 00 to FF (which is 0 to 255 in decimal), and you can create 1 number by just running the bits together, to form 000000 (black) till FFFFFF (white) \n# byte: red value \n# byte: green value\n# byte : blue value
Construction
\nIf you want to construct a hex triplet, \n# try to figure out the RGB coordinates of your color (for instance, red) : \n (255, 0, 0)
- Convert the numbers to hexadecimal values:\n (FF, 00, 00)
- then just run them together:\n #FF0000
Examples
\n(your browser must support style sheets to be able to see this)
Blue : #0000FF
\n
Red : #FF0000
\n
Dark Red : #A00000
Grey : #A0A0A0 (note that any hex triplet whose three bytes are identical will result in a shade of grey)
Dark Yellow : #A0A000
Standard color names
The HTML 4.01 specification defines sixteen named colors, as follows:
{| border="0"\n!Color\n!Hexadecimal\n!Color\n!Hexadecimal\n|-\n|black\n|style="background:#000000; color:#ffffff; font-family:monospace;"|#000000\n|silver\n|style="background:#c0c0c0; color:#000000; font-family:monospace;"|#c0c0c0\n|-\n|gray\n|style="background:#808080; color:#ffffff; font-family:monospace;"|#808080\n|white\n|style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff\n|-\n|maroon\n|style="background:#800000; color:#ffffff; font-family:monospace;"|#800000\n|red\n|style="background:#ff0000; color:#000000; font-family:monospace;"|#ff0000\n|-\n|purple\n|style="background:#800080; color:#ffffff; font-family:monospace;"|#800080\n|fuchsia\n|style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff\n|-\n|green\n|style="background:#008000; color:#ffffff; font-family:monospace;"|#008000\n|lime\n|style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00\n|-\n|olive\n|style="background:#808000; color:#ffffff; font-family:monospace;"|#808000\n|yellow\n|style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00\n|-\n|navy\n|style="background:#000080; color:#ffffff; font-family:monospace;"|#000080\n|blue\n|style="background:#0000ff; color:#000000; font-family:monospace;"|#0000ff\n|-\n|teal\n|style="background:#008080; color:#ffffff; font-family:monospace;"|#008080\n|aqua\n|style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff\n|}
Proprietary color names
In addition, a number of colors are defined by browsers such as Netscape or
Internet Explorer. A particular browser may not recognise all of these colors. Many of these colors are from the list of
X11 color names distributed with the
X Window System.\nSome of them, along with their hexadecimal equivalents, are listed below.
{| border="0"\n|-\n!color\n!hexadecimal\n!color\n!hexadecimal\n|-\n|indianred\n|style="background:#cd5c5c; color:#ffffff; font-family:monospace;"|#cd5c5c\n|darksalmon\n|style="background:#e9967a; color:#ffffff; font-family:monospace;"|#e9967a\n|-\n|lightcoral\n|style="background:#f08080; color:#ffffff; font-family:monospace;"|#f08080\n|salmon\n|style="background:#fa8072; color:#ffffff; font-family:monospace;"|#fa8072\n|-\n|orangered\n|style="background:#ff4500; color:#ffffff; font-family:monospace;"|#ff4500\n|red\n|style="background:#ff0000; color:#ffffff; font-family:monospace;"|#ff0000\n|-\n|crimson\n|style="background:#dc143c; color:#ffffff; font-family:monospace;"|#dc143c\n|firebrick\n|style="background:#b22222; color:#ffffff; font-family:monospace;"|#b22222\n|-\n|darkred\n|style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000\n|mediumvioletred\n|style="background:#c71585; color:#ffffff; font-family:monospace;"|#c71585\n|-\n|pink\n|style="background:#ffc0cb; font-family:monospace;"|#ffc0cb\n|lightpink\n|style="background:#ffb6c1; font-family:monospace;"|#ffb6c1\n|-\n|hotpink\n|style="background:#ff69b4; font-family:monospace;"|#ff69b4\n|deeppink\n|style="background:#ff1493; font-family:monospace;"|#ff1493\n|-\n|palevioletred\n|style="background:#db7093; font-family:monospace;"|#db7093\n|darkkhaki\n|style="background:#bdb76b; font-family:monospace;"|#bdb76b\n|-\n|khaki\n|style="background:#f0e68c; font-family:monospace;"|#f0e68c\n|palegoldenrod\n|style="background:#eee8aa; font-family:monospace;"|#eee8aa\n|-\n|lightgoldenrodyellow\n|style="background:#fafad2; font-family:monospace;"|#fafad2\n|lightyellow\n|style="background:#ffffe0; font-family:monospace;"|#ffffe0\n|-\n|lemonchiffon\n|style="background:#fffacd; font-family:monospace;"|#fffacd\n|yellow\n|style="background:#ffff00; font-family:monospace;"|#ffff00\n|-\n|gold\n|style="background:#ffd700; font-family:monospace;"|#ffd700\n|papayawhip\n|style="background:#ffefd5; font-family:monospace;"|#ffefd5\n|-\n|moccasin\n|style="background:#ffe4b5; font-family:monospace;"|#ffe4b5\n|peachpuff\n|style="background:#ffdab9; font-family:monospace;"|#ffdab9\n|-\n|cyan\n|style="background:#00ffff; font-family:monospace;"|#00ffff\n|aqua\n|style="background:#00ffff; font-family:monospace;"|#00ffff\n|-\n|aquamarine\n|style="background:#7fffd4; font-family:monospace;"|#7fffd4\n|turquoise\n|style="background:#40e0d0; font-family:monospace;"|#40e0d0\n|-\n|mediumturquoise\n|style="background:#48d1cc; font-family:monospace;"|#48d1cc\n|darkturquoise\n|style="background:#00ced1; font-family:monospace;"|#00ced1\n|-\n|cadetblue\n|style="background:#5f9ea0; color:#ffffff; font-family:monospace;"|#5f9ea0\n|slategray\n|style="background:#708090; color:#ffffff; font-family:monospace;"|#708090\n|-\n|lightcyan\n|style="background:#e0ffff; font-family:monospace;"|#e0ffff\n|paleturquoise\n|style="background:#afeeee; font-family:monospace;"|#afeeee\n|-\n|powderblue\n|style="background:#b0e0e6; font-family:monospace;"|#b0e0e6\n|lightsteelblue\n|style="background:#b0c4de; font-family:monospace;"|#b0c4de\n|-\n|steelblue\n|style="background:#4682b4; color:#ffffff; font-family:monospace;"|#4682b4\n|lightblue\n|style="background:#add8e6; font-family:monospace;"|#add8e6\n|-\n|skyblue\n|style="background:#87ceeb; font-family:monospace;"|#87ceeb\n|lightskyblue\n|style="background:#87cefa; font-family:monospace;"|#87cefa\n|-\n|deepskyblue\n|style="background:#00bfff; font-family:monospace;"|#00bfff\n|cornflowerblue\n|style="background:#6495ed; font-family:monospace;"|#6495ed\n|-\n|royalblue\n|style="background:#4169e1; font-family:monospace;"|#4169e1\n|mediumslateblue\n|style="background:#7b68ee; font-family:monospace;"|#7b68ee\n|-\n|dodgerblue\n|style="background:#1e90ff; font-family:monospace;"|#1e90ff\n|blue\n|style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff\n|-\n|mediumblue\n|style="background:#0000cd; color:#ffffff; font-family:monospace;"|#0000cd\n|darkblue\n|style="background:#00008b; color:#ffffff; font-family:monospace;"|#00008b\n|-\n|navy\n|style="background:#000080; color:#ffffff; font-family:monospace;"|#000080\n|midnightblue\n|style="background:#191970; color:#ffffff; font-family:monospace;"|#191970\n|-\n|lightsalmon\n|style="background:#ffa07a; font-family:monospace;"|#ffa07a\n|orange\n|style="background:#ffa500; font-family:monospace;"|#ffa500\n|-\n|darkorange\n|style="background:#ff8c00; font-family:monospace;"|#ff8c00\n|coral\n|style="background:#ff7f50; font-family:monospace;"|#ff7f50\n|-\n|tomato\n|style="background:#ff6347; font-family:monospace;"|#ff6347\n|orangered\n|style="background:#ff4500; font-family:monospace;"|#ff4500\n|-\n|aquamarine\n|style="background:#7fffd4; font-family:monospace;"|#7fffd4\n|mediumspringgreen\n|style="background:#00fa9a; font-family:monospace;"|#00fa9a\n|-\n|springgreen\n|style="background:#00ff7f; font-family:monospace;"|#00ff7f\n|palegreen\n|style="background:#98fb98; font-family:monospace;"|#98fb98\n|-\n|greenyellow\n|style="background:#adff2f; font-family:monospace;"|#adff2f\n|chartreuse\n|style="background:#7fff00; font-family:monospace;"|#7fff00\n|-\n|lawngreen\n|style="background:#7cfc00; font-family:monospace;"|#7cfc00\n|lime\n|style="background:#00ff00; font-family:monospace;"|#00ff00\n|-\n|lightgreen\n|style="background:#90ee90; font-family:monospace;"|#90ee90\n|yellowgreen\n|style="background:#9acd32; font-family:monospace;"|#9acd32\n|-\n|limegreen\n|style="background:#32cd32; font-family:monospace;"|#32cd32\n|mediumseagreen\n|style="background:#3cb371; font-family:monospace;"|#3cb371\n|-\n|darkseagreen\n|style="background:#8fbc8f; font-family:monospace;"|#8fbc8f\n|forestgreen\n|style="background:#228b22; color:#ffffff; font-family:monospace;"|#228b22\n|-\n|seagreen\n|style="background:#2e8b57; color:#ffffff; font-family:monospace;"|#2e8b57\n|green\n|style="background:#008000; color:#ffffff; font-family:monospace;"|#008000\n|-\n|olivedrab\n|style="background:#6b8e23; color:#ffffff; font-family:monospace;"|#6b8e23\n|olive\n|style="background:#808000; color:#ffffff; font-family:monospace;"|#808000\n|-\n|darkolivegreen\n|style="background:#556b2f; color:#ffffff; font-family:monospace;"|#556b2f\n|darkgreen\n|style="background:#006400; color:#ffffff; font-family:monospace;"|#006400\n|-\n|mediumaquamarine\n|style="background:#66cdaa; font-family:monospace;"|#66cdaa\n|turquoise\n|style="background:#40e0d0; font-family:monospace;"|#40e0d0\n|-\n|lightseagreen\n|style="background:#20b2aa; font-family:monospace;"|#20b2aa\n|darkcyan\n|style="background:#008b8b; color:#ffffff; font-family:monospace;"|#008b8b\n|-\n|teal\n|style="background:#008080; color:#ffffff; font-family:monospace;"|#008080\n|lavender\n|style="background:#e6e6fa; font-family:monospace;"|#e6e6fa\n|-\n|thistle\n|style="background:#d8bfd8; font-family:monospace;"|#d8bfd8\n|plum\n|style="background:#dda0dd; font-family:monospace;"|#dda0dd\n|-\n|violet\n|style="background:#ee82ee; font-family:monospace;"|#ee82ee\n|fuchsia\n|style="background:#ff00ff; font-family:monospace;"|#ff00ff\n|-\n|magenta\n|style="background:#ff00ff; font-family:monospace;"|#ff00ff\n|orchid\n|style="background:#da70d6; font-family:monospace;"|#da70d6\n|-\n|mediumorchid\n|style="background:#ba55d3; font-family:monospace;"|#ba55d3\n|darkorchid\n|style="background:#9932cc; color:#ffffff; font-family:monospace;"|#9932cc\n|-\n|blueviolet\n|style="background:#8a2be2; color:#ffffff; font-family:monospace;"|#8a2be2\n|darkviolet\n|style="background:#9400d3; color:#ffffff; font-family:monospace;"|#9400d3\n|-\n|mediumpurple\n|style="background:#9370db; color:#ffffff; font-family:monospace;"|#9370db\n|slateblue\n|style="background:#6a5acd; color:#ffffff; font-family:monospace;"|#6a5acd\n|-\n|purple\n|style="background:#800080; color:#ffffff; font-family:monospace;"|#800080\n|darkmagenta\n|style="background:#8b008b; color:#ffffff; font-family:monospace;"|#8b008b\n|-\n|darkslateblue\n|style="background:#483d8b; color:#ffffff; font-family:monospace;"|#483d8b\n|indigo\n|style="background:#4b0082; color:#ffffff; font-family:monospace;"|#4b0082\n|-\n|honeydew\n|style="background:#f0fff0; font-family:monospace;"|#f0fff0\n|mintcream\n|style="background:#f5fffa; font-family:monospace;"|#f5fffa\n|-\n|azure\n|style="background:#f0ffff; font-family:monospace;"|#f0ffff\n|aliceblue\n|style="background:#f0f8ff; font-family:monospace;"|#f0f8ff\n|-\n|ghostwhite\n|style="background:#f8f8ff; font-family:monospace;"|#f8f8ff\n|whitesmoke\n|style="background:#f5f5f5; font-family:monospace;"|#f5f5f5\n|-\n|lavenderblush\n|style="background:#fff0f5; font-family:monospace;"|#fff0f5\n|mistyrose\n|style="background:#ffe4e1; font-family:monospace;"|#ffe4e1\n|-\n|antiquewhite\n|style="background:#faebd7; font-family:monospace;"|#faebd7\n|seashell\n|style="background:#fff5ee; font-family:monospace;"|#fff5ee\n|-\n|snow\n|style="background:#fffafa; font-family:monospace;"|#fffafa\n|white\n|style="background:#ffffff; font-family:monospace;"|#ffffff\n|-\n|beige\n|style="background:#f5f5dc; font-family:monospace;"|#f5f5dc\n|linen\n|style="background:#faf0e6; font-family:monospace;"|#faf0e6\n|-\n|oldlace\n|style="background:#fdf5e6; font-family:monospace;"|#fdf5e6\n|floralwhite\n|style="background:#fffaf0; font-family:monospace;"|#fffaf0\n|-\n|ivory\n|style="background:#fffff0; font-family:monospace;"|#fffff0\n|gainsboro\n|style="background:#dcdcdc; font-family:monospace;"|#dcdcdc\n|-\n|lightgrey\n|style="background:#d3d3d3; font-family:monospace;"|#d3d3d3\n|silver\n|style="background:#c0c0c0; font-family:monospace;"|#c0c0c0\n|-\n|darkgray\n|style="background:#a9a9a9; font-family:monospace;"|#a9a9a9\n|gray\n|style="background:#808080; color:#ffffff; font-family:monospace;"|#808080\n|-\n|dimgray\n|style="background:#696969; color:#ffffff; font-family:monospace;"|#696969\n|darkslategray\n|style="background:#2f4f4f; color:#ffffff; font-family:monospace;"|#2f4f4f\n|-\n|lightslategray\n|style="background:#778899; color:#ffffff; font-family:monospace;"|#778899\n|slategray\n|style="background:#708090; color:#ffffff; font-family:monospace;"|#708090\n|-\n|cornsilk\n|style="background:#fff8dc; font-family:monospace;"|#fff8dc\n|blanchedalmond\n|style="background:#ffebcd; font-family:monospace;"|#ffebcd\n|-\n|bisque\n|style="background:#ffe4c4; font-family:monospace;"|#ffe4c4\n|navajowhite\n|style="background:#ffdead; font-family:monospace;"|#ffdead\n|-\n|wheat\n|style="background:#f5deb3; font-family:monospace;"|#f5deb3\n|sandybrown\n|style="background:#f4a460; font-family:monospace;"|#f4a460\n|-\n|goldenrod\n|style="background:#daa520; font-family:monospace;"|#daa520\n|darkgoldenrod\n|style="background:#b8860b; font-family:monospace;"|#b8860b\n|-\n|peru\n|style="background:#cd853f; font-family:monospace;"|#cd853f\n|chocolate\n|style="background:#d2691e; font-family:monospace;"|#d2691e\n|-\n|maroon\n|style="background:#800000; color:#ffffff; font-family:monospace;"|#800000\n|saddlebrown\n|style="background:#8b4513; color:#ffffff; font-family:monospace;"|#8b4513\n|-\n|brown\n|style="background:#a52a2a; color:#ffffff; font-family:monospace;"|#a52a2a\n|sienna\n|style="background:#a0522d; color:#ffffff; font-family:monospace;"|#a0522d\n|-\n|darkred\n|style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000\n|burlywood\n|style="background:#deb887; font-family:monospace;"|#deb887\n|-\n|tan\n|style="background:#d2b48c; font-family:monospace;"|#d2b48c\n|rosybrown\n|style="background:#bc8f8f; font-family:monospace;"|#bc8f8f\n|-\n|black\n|style="background:#000000; color:#ffffff; font-family:monospace;"|#000000\n| \n| \n|}
Web-safe colors
Another set of 216 color values are commonly considered to be the "web-safe" color palette; when the web-safe palette was developed, computer displays were often capable of displaying only 256 colors. A set of colors was needed that could be shown without dithering on 256-color displays; the number 216 was chosen partly because computer operating systems customarily reserved sixteen to twenty colors for their own use; it was also selected because it allows exactly six shades each of red, green, and blue. (6 × 6 × 6 = 216). The palette was first identified by
Lynda Weinman.
The "web-safe" colors do not have names, but each can be specified by an
RGB triplet. In the table below, a three-digit number is used as a shorthand notation for the six-digit hexadecimal numerals above. The digit "3" is equivalent to the hexadecimal numeral "33"; "C" is equivalent to "CC". For example, "F63" in the table below is equivalent to "#FF6633" in the system used previously. This table shows all of the "web-safe" colors, underlining the
really-safe (see next section) colors:
\n| 000\n | 300\n | 600\n | 900\n | C00\n | F00\n | 003\n | 303\n | 603\n | 903\n | C03\n | F03\n | \n| 006\n | 306\n | 606\n | 906\n | C06\n | F06\n | 009\n | 309\n | 609\n | 909\n | C09\n | F09\n |
\n| 00C\n | 30C\n | 60C\n | 90C\n | C0C
| F0C\n | 00F\n | 30F\n | 60F\n | 90F\n | C0F\n | F0F\n |
\n| 030\n | 330\n | 630\n | 930\n | C30\n | F30\n | 033\n | 333\n | 633\n | 933\n | C33\n | F33\n |
\n| 036\n | 336
| 636\n | 936\n | C36\n | F36\n | 039\n | 339\n | 639\n | 939\n | C39\n | F39\n |
\n| 03C\n | 33C\n | 63C\n | 93C\n | C3C\n | F3C\n | 03F\n | 33F\n | 63F\n | 93F\n | C3F\n | F3F\n |
\n| 060\n | 360\n | 660\n | 960\n | C60\n | F60\n | 063\n | 363\n | 663\n | 963\n | C63\n | F63\n |
\n| 066\n | 366\n | 666\n | 966\n | C66\n | F66\n | 069\n | 369\n | 669\n | 969
| C69\n | F69\n |
\n| 06C\n | 36C\n | 66C\n | 96C\n | C6C\n | F6C\n | 06F\n | 36F\n | 66F\n | 96F\n | C6F\n | F6F\n |
\n| 090\n | 390\n | 690\n | 990\n | C90\n | F90\n | 093\n | 393\n | 693\n | 993\n | C93\n | F93\n |
\n| 096\n | 396\n | 696\n | 996\n | C96\n | F96\n | 099\n | 399\n | 699\n | 999\n | C99\n | F99\n |
\n| 09C\n | 39C\n | 69C\n | 99C\n | C9C\n | F9C\n | 09F\n | 39F\n | 69F\n | 99F\n | C9F\n | F9F\n |
\n| 0C0\n | 3C0\n | 6C0\n | 9C0\n | CC0\n | FC0\n | 0C3\n | 3C3\n | 6C3\n | 9C3\n | CC3\n | FC3\n |
\n| 0C6\n | 3C6\n | 6C6\n | 9C6\n | CC6\n | FC6\n | 0C9\n | 3C9\n | 6C9\n | 9C9\n | CC9\n | FC9\n |
\n| 0CC\n | 3CC\n | 6CC\n | 9CC\n | CCC\n | FCC\n | 0CF\n | 3CF\n | 6CF\n | 9CF\n | CCF\n | FCF\n |
\n| 0F0\n | 3F0\n | 6F0\n | 9F0\n | CF0\n | FF0\n | 0F3\n | 3F3\n | 6F3\n | 9F3\n | CF3\n | FF3\n |
\n| 0F6\n | 3F6\n | 6F6\n | 9F6\n | CF6\n | FF6\n | 0F9\n | 3F9\n | 6F9\n | 9F9\n | CF9\n | FF9\n |
\n| 0FC\n | 3FC\n | 6FC\n | 9FC\n | CFC\n | FFC\n | 0FF\n | 3FF\n | 6FF\n | 9FF\n | CFF\n | FFF\n |
\n
Really web safe colors
Designers are often encouraged to stick to these 216 "web-safe" colors in their websites; however, 8-bit color displays are much less common now than they were when the 216-color palette was developed. David Lehn and Hadley Stern have since discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on 16-bit computer displays; they called these 22 colors the "really safe" palette; it consists mainly of shades of green and yellow and are the underlined colors in the table above.
CSS Colors
The Cascading Style Sheets language defines the same number of named colors as the HTML 4 spec, namely the 16 listed above.\nAdditionally, CSS 2.1 adds the 'orange' color name to the list:
orange, with value
#ffA500.
CSS 2 and CSS 2.1 also allow web authors to use so-called
system colors, which are color names whose values are taken from the
operating system. This enables web authors to style their content in line with the operating system of the user agent. See
[1]. As of early 2004, it appears that the CSS3 color module will once again drop these values, marking them
deprecated, but this may change:
[1].
\n
See also
\n* RGB color space\n*
hexadecimal\n*
HTML and
CSS\n*
color\n*
RGB color model
And for further examples:\nHex triplets for each color are listed under:\n
External links
