Web Colors

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. http://lists.w3.org/Archives/Public/www-style/2002May/0138.html

Hex triplet

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML and CSS, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:
Byte 1: red value
Byte 2: green value
Byte 3: blue value
For example, consider the color red=36, green=104, blue=160 (a greyish-blue color). The numbers 36, 104 and 160 are 24, 68 and A0 respectively in hexadecimal notation. To obtain the hex triplet, we simply write the three hex bytes together without spaces, thus: 2468A0. If a byte is less than 10 (hex) or 16 (decimal) it must be represented with a leading zero to keep the number of digits in the triplet equal to six. For example, the decimal triplet 0,1,2 would be represented by the hex triplet 000102.

Standard color names

The HTML 4.01 specification defines sixteen named colors, as follows:
exadecimal Color Hexadecimal
lack style="background:#000000; color:#ffffff; font-family:monospace;"|#000000 silver style="background:#c0c0c0; color:#000000; font-family:monospace;"|#c0c0c0
ray style="background:#808080; color:#ffffff; font-family:monospace;"|#808080 white style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff
aroon style="background:#800000; color:#ffffff; font-family:monospace;"|#800000 red style="background:#ff0000; color:#000000; font-family:monospace;"|#ff0000
urple style="background:#800080; color:#ffffff; font-family:monospace;"|#800080 fuchsia style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff
reen style="background:#008000; color:#ffffff; font-family:monospace;"|#008000 lime style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00
live style="background:#808000; color:#ffffff; font-family:monospace;"|#808000 yellow style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00
avy style="background:#000080; color:#ffffff; font-family:monospace;"|#000080 blue style="background:#0000ff; color:#000000; font-family:monospace;"|#0000ff
eal style="background:#008080; color:#ffffff; font-family:monospace;"|#008080 aqua style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff

Proprietary color names

In addition, a number of colors are defined by browsers such as Netscape or Internet Explorer. A particular browser may not recognize all of these colors. Many of these colors are from the list of X11 color names distributed with the X Window System. Some of them, along with their hexadecimal equivalents, are listed below.
olor hexadecimal color hexadecimal
ndianred style="background:#cd5c5c; color:#ffffff; font-family:monospace;"|#cd5c5c darksalmon style="background:#e9967a; color:#ffffff; font-family:monospace;"|#e9967a
ightcoral style="background:#f08080; color:#ffffff; font-family:monospace;"|#f08080 salmon style="background:#fa8072; color:#ffffff; font-family:monospace;"|#fa8072
rangered style="background:#ff4500; color:#ffffff; font-family:monospace;"|#ff4500 red style="background:#ff0000; color:#ffffff; font-family:monospace;"|#ff0000
rimson style="background:#dc143c; color:#ffffff; font-family:monospace;"|#dc143c firebrick style="background:#b22222; color:#ffffff; font-family:monospace;"|#b22222
arkred style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000 mediumvioletred style="background:#c71585; color:#ffffff; font-family:monospace;"|#c71585
ink style="background:#ffc0cb; font-family:monospace;"|#ffc0cb lightpink style="background:#ffb6c1; font-family:monospace;"|#ffb6c1
otpink style="background:#ff69b4; font-family:monospace;"|#ff69b4 deeppink style="background:#ff1493; font-family:monospace;"|#ff1493
alevioletred style="background:#db7093; font-family:monospace;"|#db7093 darkkhaki style="background:#bdb76b; font-family:monospace;"|#bdb76b
haki style="background:#f0e68c; font-family:monospace;"|#f0e68c palegoldenrod style="background:#eee8aa; font-family:monospace;"|#eee8aa
ightgoldenrodyellow style="background:#fafad2; font-family:monospace;"|#fafad2 lightyellow style="background:#ffffe0; font-family:monospace;"|#ffffe0
emonchiffon style="background:#fffacd; font-family:monospace;"|#fffacd yellow style="background:#ffff00; font-family:monospace;"|#ffff00
old style="background:#ffd700; font-family:monospace;"|#ffd700 papayawhip style="background:#ffefd5; font-family:monospace;"|#ffefd5
occasin style="background:#ffe4b5; font-family:monospace;"|#ffe4b5 peachpuff style="background:#ffdab9; font-family:monospace;"|#ffdab9
yan style="background:#00ffff; font-family:monospace;"|#00ffff aqua style="background:#00ffff; font-family:monospace;"|#00ffff
quamarine style="background:#7fffd4; font-family:monospace;"|#7fffd4 turquoise style="background:#40e0d0; font-family:monospace;"|#40e0d0
ediumturquoise style="background:#48d1cc; font-family:monospace;"|#48d1cc darkturquoise style="background:#00ced1; font-family:monospace;"|#00ced1
adetblue style="background:#5f9ea0; color:#ffffff; font-family:monospace;"|#5f9ea0 slategray style="background:#708090; color:#ffffff; font-family:monospace;"|#708090
ightcyan style="background:#e0ffff; font-family:monospace;"|#e0ffff paleturquoise style="background:#afeeee; font-family:monospace;"|#afeeee
owderblue style="background:#b0e0e6; font-family:monospace;"|#b0e0e6 lightsteelblue style="background:#b0c4de; font-family:monospace;"|#b0c4de
teelblue style="background:#4682b4; color:#ffffff; font-family:monospace;"|#4682b4 lightblue style="background:#add8e6; font-family:monospace;"|#add8e6
kyblue style="background:#87ceeb; font-family:monospace;"|#87ceeb lightskyblue style="background:#87cefa; font-family:monospace;"|#87cefa
eepskyblue style="background:#00bfff; font-family:monospace;"|#00bfff cornflowerblue style="background:#6495ed; font-family:monospace;"|#6495ed
oyalblue style="background:#4169e1; font-family:monospace;"|#4169e1 mediumslateblue style="background:#7b68ee; font-family:monospace;"|#7b68ee
odgerblue style="background:#1e90ff; font-family:monospace;"|#1e90ff blue style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff
ediumblue style="background:#0000cd; color:#ffffff; font-family:monospace;"|#0000cd darkblue style="background:#00008b; color:#ffffff; font-family:monospace;"|#00008b
avy style="background:#000080; color:#ffffff; font-family:monospace;"|#000080 midnightblue style="background:#191970; color:#ffffff; font-family:monospace;"|#191970
ightsalmon style="background:#ffa07a; font-family:monospace;"|#ffa07a orange style="background:#ffa500; font-family:monospace;"|#ffa500
arkorange style="background:#ff8c00; font-family:monospace;"|#ff8c00 coral style="background:#ff7f50; font-family:monospace;"|#ff7f50
omato style="background:#ff6347; font-family:monospace;"|#ff6347 orangered style="background:#ff4500; font-family:monospace;"|#ff4500
quamarine style="background:#7fffd4; font-family:monospace;"|#7fffd4 mediumspringgreen style="background:#00fa9a; font-family:monospace;"|#00fa9a
pringgreen style="background:#00ff7f; font-family:monospace;"|#00ff7f palegreen style="background:#98fb98; font-family:monospace;"|#98fb98
reenyellow style="background:#adff2f; font-family:monospace;"|#adff2f chartreuse style="background:#7fff00; font-family:monospace;"|#7fff00
awngreen style="background:#7cfc00; font-family:monospace;"|#7cfc00 lime style="background:#00ff00; font-family:monospace;"|#00ff00
ightgreen style="background:#90ee90; font-family:monospace;"|#90ee90 yellowgreen style="background:#9acd32; font-family:monospace;"|#9acd32
imegreen style="background:#32cd32; font-family:monospace;"|#32cd32 mediumseagreen style="background:#3cb371; font-family:monospace;"|#3cb371
arkseagreen style="background:#8fbc8f; font-family:monospace;"|#8fbc8f forestgreen style="background:#228b22; color:#ffffff; font-family:monospace;"|#228b22
eagreen style="background:#2e8b57; color:#ffffff; font-family:monospace;"|#2e8b57 green style="background:#008000; color:#ffffff; font-family:monospace;"|#008000
livedrab style="background:#6b8e23; color:#ffffff; font-family:monospace;"|#6b8e23 olive style="background:#808000; color:#ffffff; font-family:monospace;"|#808000
arkolivegreen style="background:#556b2f; color:#ffffff; font-family:monospace;"|#556b2f darkgreen style="background:#006400; color:#ffffff; font-family:monospace;"|#006400
ediumaquamarine style="background:#66cdaa; font-family:monospace;"|#66cdaa turquoise style="background:#40e0d0; font-family:monospace;"|#40e0d0
ightseagreen style="background:#20b2aa; font-family:monospace;"|#20b2aa darkcyan style="background:#008b8b; color:#ffffff; font-family:monospace;"|#008b8b
a href="/encyclopedia/teal" title="teal">teal style="background:#008080; color:#ffffff; font-family:monospace;"|#008080 lavender style="background:#e6e6fa; font-family:monospace;"|#e6e6fa
histle style="background:#d8bfd8; font-family:monospace;"|#d8bfd8 plum style="background:#dda0dd; font-family:monospace;"|#dda0dd
iolet style="background:#ee82ee; font-family:monospace;"|#ee82ee fuchsia style="background:#ff00ff; font-family:monospace;"|#ff00ff
a href="/encyclopedia/magenta" title="magenta">magenta style="background:#ff00ff; font-family:monospace;"|#ff00ff orchid style="background:#da70d6; font-family:monospace;"|#da70d6
ediumorchid style="background:#ba55d3; font-family:monospace;"|#ba55d3 darkorchid style="background:#9932cc; color:#ffffff; font-family:monospace;"|#9932cc
lueviolet style="background:#8a2be2; color:#ffffff; font-family:monospace;"|#8a2be2 darkviolet style="background:#9400d3; color:#ffffff; font-family:monospace;"|#9400d3
ediumpurple style="background:#9370db; color:#ffffff; font-family:monospace;"|#9370db slateblue style="background:#6a5acd; color:#ffffff; font-family:monospace;"|#6a5acd
a href="/encyclopedia/purple" title="purple">purple style="background:#800080; color:#ffffff; font-family:monospace;"|#800080 darkmagenta style="background:#8b008b; color:#ffffff; font-family:monospace;"|#8b008b
arkslateblue style="background:#483d8b; color:#ffffff; font-family:monospace;"|#483d8b indigo style="background:#4b0082; color:#ffffff; font-family:monospace;"|#4b0082
oneydew style="background:#f0fff0; font-family:monospace;"|#f0fff0 mintcream style="background:#f5fffa; font-family:monospace;"|#f5fffa
zure style="background:#f0ffff; font-family:monospace;"|#f0ffff aliceblue style="background:#f0f8ff; font-family:monospace;"|#f0f8ff
hostwhite style="background:#f8f8ff; font-family:monospace;"|#f8f8ff whitesmoke style="background:#f5f5f5; font-family:monospace;"|#f5f5f5
avenderblush style="background:#fff0f5; font-family:monospace;"|#fff0f5 mistyrose style="background:#ffe4e1; font-family:monospace;"|#ffe4e1
ntiquewhite style="background:#faebd7; font-family:monospace;"|#faebd7 seashell style="background:#fff5ee; font-family:monospace;"|#fff5ee
now style="background:#fffafa; font-family:monospace;"|#fffafa white style="background:#ffffff; font-family:monospace;"|#ffffff
eige style="background:#f5f5dc; font-family:monospace;"|#f5f5dc linen style="background:#faf0e6; font-family:monospace;"|#faf0e6
ldlace style="background:#fdf5e6; font-family:monospace;"|#fdf5e6 floralwhite style="background:#fffaf0; font-family:monospace;"|#fffaf0
vory style="background:#fffff0; font-family:monospace;"|#fffff0 gainsboro style="background:#dcdcdc; font-family:monospace;"|#dcdcdc
ightgrey style="background:#d3d3d3; font-family:monospace;"|#d3d3d3 silver style="background:#c0c0c0; font-family:monospace;"|#c0c0c0
arkgray style="background:#a9a9a9; font-family:monospace;"|#a9a9a9 gray style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
imgray style="background:#696969; color:#ffffff; font-family:monospace;"|#696969 darkslategray style="background:#2f4f4f; color:#ffffff; font-family:monospace;"|#2f4f4f
ightslategray style="background:#778899; color:#ffffff; font-family:monospace;"|#778899 slategray style="background:#708090; color:#ffffff; font-family:monospace;"|#708090
ornsilk style="background:#fff8dc; font-family:monospace;"|#fff8dc blanchedalmond style="background:#ffebcd; font-family:monospace;"|#ffebcd
isque style="background:#ffe4c4; font-family:monospace;"|#ffe4c4 navajowhite style="background:#ffdead; font-family:monospace;"|#ffdead
heat style="background:#f5deb3; font-family:monospace;"|#f5deb3 sandybrown style="background:#f4a460; font-family:monospace;"|#f4a460
oldenrod style="background:#daa520; font-family:monospace;"|#daa520 darkgoldenrod style="background:#b8860b; font-family:monospace;"|#b8860b
eru style="background:#cd853f; font-family:monospace;"|#cd853f chocolate style="background:#d2691e; font-family:monospace;"|#d2691e
aroon style="background:#800000; color:#ffffff; font-family:monospace;"|#800000 saddlebrown style="background:#8b4513; color:#ffffff; font-family:monospace;"|#8b4513
rown style="background:#a52a2a; color:#ffffff; font-family:monospace;"|#a52a2a sienna style="background:#a0522d; color:#ffffff; font-family:monospace;"|#a0522d
arkred style="background:#8b0000; color:#ffffff; font-family:monospace;"|#8b0000 burlywood style="background:#deb887; font-family:monospace;"|#deb887
an style="background:#d2b48c; font-family:monospace;"|#d2b48c rosybrown style="background:#bc8f8f; font-family:monospace;"|#bc8f8f
lack style="background:#000000; color:#ffffff; font-family:monospace;"|#000000    

Web-safe colors

Another set of 216 color values are commonly considered to be the "web-safe" color palette; developed at a time when 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:
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

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, as can be seen in the table above, where the "really safe" colors are underlined.

CSS Colors

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 http://www.w3.org/TR/CSS21/ui.html#system-colors. As of early 2004, it appears that the CSS3 color module will once again drop these values, marking them deprecated, but this may change: http://www.w3.org/TR/css3-color/#css2-system.

See also

External links

 

<< PreviousWord BrowserNext >>
thomas abbt
life critical system
abdallah ibn al aftas
abdallah ibn mohammed
haslev
bastion
hoover institution
bladed weapon
charnia
carnegie institute of technology
h. john heinz iii school of public policy and management
german spelling reform of 1996
camp muriel flagg
carnegie mellon school of computer science
david a. tepper school of business
graft
james carnegie, 3rd duke of fife
benzone
maurice garin
friends general conference
monsieur zenith
jim corbett national park
1985 governor general's awards
james franklin jeffrey
books in canada first novel award
brian hutton, baron hutton
supporters' trust
deweyism
pasteurellosis
east village, manhattan
library of congress classification:class p, subclass pa greek language and literature
education in albania
lafontaine
grandview
louisa county
dublin (disambiguation)
corbett
lel
energy balance
baibars
graceland (album)
cetane
clearfield
flash point