From Wikipedia, the free encyclopedia.
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; they may also be specified according to their common English names in some cases.
The HTML 4.01 specification defines sixteen named colors, as follows:
{| border="0"
!Color
!Hexadecimal
!Color
!Hexadecimal
|-
|black
|style="background:#000000; color:#ffffff; font-family:monospace;"|#000000
|silver
|style="background:#c0c0c0; color:#000000; font-family:monospace;"|#c0c0c0
|-
|gray
|style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
|white
|style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff
|-
|maroon
|style="background:#800000; color:#ffffff; font-family:monospace;"|#800000
|red
|style="background:#ff0000; color:#000000; font-family:monospace;"|#ff0000
|-
|purple
|style="background:#800080; color:#ffffff; font-family:monospace;"|#800080
|fuchsia
|style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff
|-
|green
|style="background:#008000; color:#ffffff; font-family:monospace;"|#008000
|lime
|style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00
|-
|olive
|style="background:#808000; color:#ffffff; font-family:monospace;"|#808000
|yellow
|style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00
|-
|navy
|style="background:#000080; color:#ffffff; font-family:monospace;"|#000080
|blue
|style="background:#0000ff; color:#000000; font-family:monospace;"|#0000ff
|-
|teal
|style="background:#008080; color:#ffffff; font-family:monospace;"|#008080
|aqua
|style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff
|}
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.
Some of these colors, along with their hexadecimal equivalents, are listed below.
{| border="0"
|-
!color
!hexadecimal
!color
!hexadecimal
|-
|indianred
|style="background:#cd5c5c; color:#ffffff; font-family:monospace;"|#cd5c5c
|darksalmon
|style="background:#e9967a; color:#ffffff; font-family:monospace;"|#e9967a
|-
|lightcoral
|style="background:#f08080; color:#ffffff; font-family:monospace;"|#f08080
|salmon
|style="background:#fa8072; color:#ffffff; font-family:monospace;"|#fa8072
|-
|orangered
|style="background:#ff4500; color:#ffffff; font-family:monospace;"|#ff4500
|red
|style="background:#ff0000; color:#ffffff; font-family:monospace;"|#ff0000
|-
|crimson
|style="background:#dc143c; color:#ffffff; font-family:monospace;"|#dc143c
|firebrick
|style="background:#b22222; color:#ffffff; font-family:monospace;"|#b22222
|-
|darkred
|style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000
|mediumvioletred
|style="background:#c71585; color:#ffffff; font-family:monospace;"|#c71585
|-
|pink
|style="background:#ffc0cb; font-family:monospace;"|#ffc0cb
|lightpink
|style="background:#ffb6c1; font-family:monospace;"|#ffb6c1
|-
|hotpink
|style="background:#ff69b4; font-family:monospace;"|#ff69b4
|deeppink
|style="background:#ff1493; font-family:monospace;"|#ff1493
|-
|palevioletred
|style="background:#db7093; font-family:monospace;"|#db7093
|darkkhaki
|style="background:#bdb76b; font-family:monospace;"|#bdb76b
|-
|khaki
|style="background:#f0e68c; font-family:monospace;"|#f0e68c
|palegoldenrod
|style="background:#eee8aa; font-family:monospace;"|#eee8aa
|-
|lightgoldenrodyellow
|style="background:#fafad2; font-family:monospace;"|#fafad2
|lightyellow
|style="background:#ffffe0; font-family:monospace;"|#ffffe0
|-
|lemonchiffon
|style="background:#fffacd; font-family:monospace;"|#fffacd
|yellow
|style="background:#ffff00; font-family:monospace;"|#ffff00
|-
|gold
|style="background:#ffd700; font-family:monospace;"|#ffd700
|papayawhip
|style="background:#ffefd5; font-family:monospace;"|#ffefd5
|-
|moccasin
|style="background:#ffe4b5; font-family:monospace;"|#ffe4b5
|peachpuff
|style="background:#ffdab9; font-family:monospace;"|#ffdab9
|-
|cyan
|style="background:#00ffff; font-family:monospace;"|#00ffff
|aqua
|style="background:#00ffff; font-family:monospace;"|#00ffff
|-
|aquamarine
|style="background:#7fffd4; font-family:monospace;"|#7fffd4
|turquoise
|style="background:#40e0d0; font-family:monospace;"|#40e0d0
|-
|mediumturquoise
|style="background:#48d1cc; font-family:monospace;"|#48d1cc
|darkturquoise
|style="background:#00ced1; font-family:monospace;"|#00ced1
|-
|cadetblue
|style="background:#5f9ea0; color:#ffffff; font-family:monospace;"|#5f9ea0
|slategray
|style="background:#708090; color:#ffffff; font-family:monospace;"|#708090
|-
|lightcyan
|style="background:#e0ffff; font-family:monospace;"|#e0ffff
|paleturquoise
|style="background:#afeeee; font-family:monospace;"|#afeeee
|-
|powderblue
|style="background:#b0e0e6; font-family:monospace;"|#b0e0e6
|lightsteelblue
|style="background:#b0c4de; font-family:monospace;"|#b0c4de
|-
|steelblue
|style="background:#4682b4; color:#ffffff; font-family:monospace;"|#4682b4
|lightblue
|style="background:#add8e6; font-family:monospace;"|#add8e6
|-
|skyblue
|style="background:#87ceeb; font-family:monospace;"|#87ceeb
|lightskyblue
|style="background:#87cefa; font-family:monospace;"|#87cefa
|-
|deepskyblue
|style="background:#00bfff; font-family:monospace;"|#00bfff
|cornflowerblue
|style="background:#6495ed; font-family:monospace;"|#6495ed
|-
|royalblue
|style="background:#4169e1; font-family:monospace;"|#4169e1
|mediumslateblue
|style="background:#7b68ee; font-family:monospace;"|#7b68ee
|-
|dodgerblue
|style="background:#1e90ff; font-family:monospace;"|#1e90ff
|blue
|style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff
|-
|mediumblue
|style="background:#0000cd; color:#ffffff; font-family:monospace;"|#0000cd
|darkblue
|style="background:#00008b; color:#ffffff; font-family:monospace;"|#00008b
|-
|navy
|style="background:#000080; color:#ffffff; font-family:monospace;"|#000080
|midnightblue
|style="background:#191970; color:#ffffff; font-family:monospace;"|#191970
|-
|lightsalmon
|style="background:#ffa07a; font-family:monospace;"|#ffa07a
|orange
|style="background:#ffa500; font-family:monospace;"|#ffa500
|-
|darkorange
|style="background:#ff8c00; font-family:monospace;"|#ff8c00
|coral
|style="background:#ff7f50; font-family:monospace;"|#ff7f50
|-
|tomato
|style="background:#ff6347; font-family:monospace;"|#ff6347
|orangered
|style="background:#ff4500; font-family:monospace;"|#ff4500
|-
|aquamarine
|style="background:#7fffd4; font-family:monospace;"|#7fffd4
|mediumspringgreen
|style="background:#00fa9a; font-family:monospace;"|#00fa9a
|-
|springgreen
|style="background:#00ff7f; font-family:monospace;"|#00ff7f
|palegreen
|style="background:#98fb98; font-family:monospace;"|#98fb98
|-
|greenyellow
|style="background:#adff2f; font-family:monospace;"|#adff2f
|chartreuse
|style="background:#7fff00; font-family:monospace;"|#7fff00
|-
|lawngreen
|style="background:#7cfc00; font-family:monospace;"|#7cfc00
|lime
|style="background:#00ff00; font-family:monospace;"|#00ff00
|-
|lightgreen
|style="background:#90ee90; font-family:monospace;"|#90ee90
|yellowgreen
|style="background:#9acd32; font-family:monospace;"|#9acd32
|-
|limegreen
|style="background:#32cd32; font-family:monospace;"|#32cd32
|mediumseagreen
|style="background:#3cb371; font-family:monospace;"|#3cb371
|-
|darkseagreen
|style="background:#8fbc8f; font-family:monospace;"|#8fbc8f
|forestgreen
|style="background:#228b22; color:#ffffff; font-family:monospace;"|#228b22
|-
|seagreen
|style="background:#2e8b57; color:#ffffff; font-family:monospace;"|#2e8b57
|green
|style="background:#008000; color:#ffffff; font-family:monospace;"|#008000
|-
|olivedrab
|style="background:#6b8e23; color:#ffffff; font-family:monospace;"|#6b8e23
|olive
|style="background:#808000; color:#ffffff; font-family:monospace;"|#808000
|-
|darkolivegreen
|style="background:#556b2f; color:#ffffff; font-family:monospace;"|#556b2f
|darkgreen
|style="background:#006400; color:#ffffff; font-family:monospace;"|#006400
|-
|mediumaquamarine
|style="background:#66cdaa; font-family:monospace;"|#66cdaa
|turquoise
|style="background:#40e0d0; font-family:monospace;"|#40e0d0
|-
|lightseagreen
|style="background:#20b2aa; font-family:monospace;"|#20b2aa
|darkcyan
|style="background:#008b8b; color:#ffffff; font-family:monospace;"|#008b8b
|-
|teal
|style="background:#008080; color:#ffffff; font-family:monospace;"|#008080
|lavender
|style="background:#e6e6fa; font-family:monospace;"|#e6e6fa
|-
|thistle
|style="background:#d8bfd8; font-family:monospace;"|#d8bfd8
|plum
|style="background:#dda0dd; font-family:monospace;"|#dda0dd
|-
|violet
|style="background:#ee82ee; font-family:monospace;"|#ee82ee
|fuchsia
|style="background:#ff00ff; font-family:monospace;"|#ff00ff
|-
|magenta
|style="background:#ff00ff; font-family:monospace;"|#ff00ff
|orchid
|style="background:#da70d6; font-family:monospace;"|#da70d6
|-
|mediumorchid
|style="background:#ba55d3; font-family:monospace;"|#ba55d3
|darkorchid
|style="background:#9932cc; color:#ffffff; font-family:monospace;"|#9932cc
|-
|blueviolet
|style="background:#8a2be2; color:#ffffff; font-family:monospace;"|#8a2be2
|darkviolet
|style="background:#9400d3; color:#ffffff; font-family:monospace;"|#9400d3
|-
|mediumpurple
|style="background:#9370db; color:#ffffff; font-family:monospace;"|#9370db
|slateblue
|style="background:#6a5acd; color:#ffffff; font-family:monospace;"|#6a5acd
|-
|purple
|style="background:#800080; color:#ffffff; font-family:monospace;"|#800080
|darkmagenta
|style="background:#8b008b; color:#ffffff; font-family:monospace;"|#8b008b
|-
|darkslateblue
|style="background:#483d8b; color:#ffffff; font-family:monospace;"|#483d8b
|indigo
|style="background:#4b0082; color:#ffffff; font-family:monospace;"|#4b0082
|-
|honeydew
|style="background:#f0fff0; font-family:monospace;"|#f0fff0
|mintcream
|style="background:#f5fffa; font-family:monospace;"|#f5fffa
|-
|azure
|style="background:#f0ffff; font-family:monospace;"|#f0ffff
|aliceblue
|style="background:#f0f8ff; font-family:monospace;"|#f0f8ff
|-
|ghostwhite
|style="background:#f8f8ff; font-family:monospace;"|#f8f8ff
|whitesmoke
|style="background:#f5f5f5; font-family:monospace;"|#f5f5f5
|-
|lavenderblush
|style="background:#fff0f5; font-family:monospace;"|#fff0f5
|mistyrose
|style="background:#ffe4e1; font-family:monospace;"|#ffe4e1
|-
|antiquewhite
|style="background:#faebd7; font-family:monospace;"|#faebd7
|seashell
|style="background:#fff5ee; font-family:monospace;"|#fff5ee
|-
|snow
|style="background:#fffafa; font-family:monospace;"|#fffafa
|white
|style="background:#ffffff; font-family:monospace;"|#ffffff
|-
|beige
|style="background:#f5f5dc; font-family:monospace;"|#f5f5dc
|linen
|style="background:#faf0e6; font-family:monospace;"|#faf0e6
|-
|oldlace
|style="background:#fdf5e6; font-family:monospace;"|#fdf5e6
|floralwhite
|style="background:#fffaf0; font-family:monospace;"|#fffaf0
|-
|ivory
|style="background:#fffff0; font-family:monospace;"|#fffff0
|gainsboro
|style="background:#dcdcdc; font-family:monospace;"|#dcdcdc
|-
|lightgrey
|style="background:#d3d3d3; font-family:monospace;"|#d3d3d3
|silver
|style="background:#c0c0c0; font-family:monospace;"|#c0c0c0
|-
|darkgray
|style="background:#a9a9a9; font-family:monospace;"|#a9a9a9
|gray
|style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
|-
|dimgray
|style="background:#696969; color:#ffffff; font-family:monospace;"|#696969
|darkslategray
|style="background:#2f4f4f; color:#ffffff; font-family:monospace;"|#2f4f4f
|-
|lightslategray
|style="background:#778899; color:#ffffff; font-family:monospace;"|#778899
|slategray
|style="background:#708090; color:#ffffff; font-family:monospace;"|#708090
|-
|cornsilk
|style="background:#fff8dc; font-family:monospace;"|#fff8dc
|blanchedalmond
|style="background:#ffebcd; font-family:monospace;"|#ffebcd
|-
|bisque
|style="background:#ffe4c4; font-family:monospace;"|#ffe4c4
|navajowhite
|style="background:#ffdead; font-family:monospace;"|#ffdead
|-
|wheat
|style="background:#f5deb3; font-family:monospace;"|#f5deb3
|sandybrown
|style="background:#f4a460; font-family:monospace;"|#f4a460
|-
|goldenrod
|style="background:#daa520; font-family:monospace;"|#daa520
|darkgoldenrod
|style="background:#b8860b; font-family:monospace;"|#b8860b
|-
|peru
|style="background:#cd853f; font-family:monospace;"|#cd853f
|chocolate
|style="background:#d2691e; font-family:monospace;"|#d2691e
|-
|maroon
|style="background:#800000; color:#ffffff; font-family:monospace;"|#800000
|saddlebrown
|style="background:#8b4513; color:#ffffff; font-family:monospace;"|#8b4513
|-
|brown
|style="background:#a52a2a; color:#ffffff; font-family:monospace;"|#a52a2a
|sienna
|style="background:#a0522d; color:#ffffff; font-family:monospace;"|#a0522d
|-
|darkred
|style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000
|burlywood
|style="background:#deb887; font-family:monospace;"|#deb887
|-
|tan
|style="background:#d2b48c; font-family:monospace;"|#d2b48c
|rosybrown
|style="background:#bc8f8f; font-family:monospace;"|#bc8f8f
|-
|black
|style="background:#000000; color:#ffffff; font-family:monospace;"|#000000
|
|
|}
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:
Standard color names
Proprietary color names
Web-safe colors
| 000 | 300 | 600 | 900 | C00 | F00 | 003 | 303 | 603 | 903 | C03 | F03 |
| 006 | 306 | 606 | 906 | C06 | F06 | 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C
| F0C | 00F | 30F | 60F | 90F | C0F | F0F |
| 030 | 330 | 630 | 930 | C30 | F30 | 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336
| 636 | 936 | C36 | F36 | 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C | 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 | 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 | 069 | 369 | 669 | 969
| C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C | 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 | 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 | 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C | 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 | 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 | 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC | 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| 0F0 | 3F0 | 6F0 | 9F0 | CF0 | FF0 | 0F3 | 3F3 | 6F3 | 9F3 | CF3 | FF3 |
| 0F6 | 3F6 | 6F6 | 9F6 | CF6 | FF6 | 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| 0FC | 3FC | 6FC | 9FC | CFC | FFC | 0FF | 3FF | 6FF | 9FF | CFF | FFF |
See also: RGB color space
Designers are often encouraged to stick to these 216 "web-safe" colors in their websites; however, 8-bit color displays are much less common in 2003 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 actually displayed without dithering 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.
The Cascading Style Sheets language defines the same number of named colors as the HTML 4 spec, namely the 16 listed above.
Additionally, 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].
Really web safe colors
CSS Colors
External links
