HTML Colors

This page shows example HTML colors, describes how colors are defined, and provides color charts for looking up named HTML colors.

A. How colors are defined:

As color names
- 16 names are defined in the W3C HTML Specification
- About 140 color names are recognized by most web browsers; see charts below. As with branded paint colors, it's not clear where all of the names come from. There are fabrics, fruits, footwear, a country, a baseball team, and a fish.
As numbers in RGB (red, green, blue) notation. There are 256 possible intensities of each base color, so there are 16,777,216 (i.e. 2²⁴) possible colors. (Not nearly all of them can be distinguished, of course). RGB notation can be expressed four ways:.
1. Most often, they are expressed as a 6-character hexidecimal (base-16) code, with 2 hex digits (256 possible values) for each color. [ #FF0000 is red, #00FF00 is green, #0000FF is blue, #FFFFFF is white, #000000 is black, and #888888 is medium gray]
2. 4096 colors can be represented by 3 hex digits, which are converted to 6 hex digits by replicating each digit (not by adding zeroes). [ #F00 is red (#FF0000), #00F is blue (#0000FF), etc.]
3. They can be expressed as triplets, with decimal values 0-255: [ rgb(255,0,0) is red, rgb(0,0,255) is blue, etc.]
4. Finally, they can be expressed as triplets, with percentages. [ rgb(100%,0,0) is red, rgb(0,0,100%) is blue, etc.]

Where colors are specified:

As text and background style attributes of <span> tags, and almost any block-level or table tag:
<div style="background-color:tan;color:linen;"> <span style="background-color:linen;color:tan;"> <td style="background-color:aqua;">
or, using a style sheet:
h3{color:darkgreen} /* Show all h3 elements in a dark green */ error{color:firebrick;font-weight:bold;} /* Define a named style for error messages */ th{color:linen;background-color:teal;} /* All table headers are highlighted */
As aspects of borders in span, block-level, and table tags:
<table style="border:thin blue dashed;"> .example{background-color:lightbrown;border:thin dotted black;}
Link attributes may be defined with style modifiers:
a:link {color:#9c3b7;} a:visited {color:#9c3b7;}
A page body tag can specify background, text, and link colors (though styles are now generally preferred)
<body bgcolor="white" text="black" link="#0000ff" vlink="#9c3b72">
Table tags can also specify background, text, and border colors

"Web Safe" Colors

In the early days of the web, when there were a lot of monitors that couldn't handle more than 256 colors, it was important to focus on so-called "web safe" colors. When a PC can't display all color combinations, it has to use "dithering" - mixing of different colors in adjacent pixels - to simulate many colors. Dithering could cause blotchy effects with some colors. However,by industry agreement, colors whose RGB components are multiples of hex 33 (decimial 51) are guaranteed to be displayed without dithering. Such "web-safe" colors (000000, 336633, 3399CC, etc.) are still in fairly common use for large solid background areas, but it is generally not important to stick with them for fonts and highlights. would be web safe colors. It is generally not important to stick with web-safe colors any more, since most PC monitors can handle thousands of colors.

W3C Notes on using Colors

Although colors can add significant amounts of information to documents and make them more readable, please consider the following guidelines when including color in your documents:

The use of HTML elements and attributes for specifying color is deprecated. Use styles nstead.
Don't use color combinations that cause problems for people with color blindness in its various forms.
If you use a background image or set the background color, then be sure to set the various text colors as well.
Colors specified with the BODY and FONT elements and bgcolor on tables look different on different platforms (e.g., workstations, Macs, Windows, and LCD panels vs. CRTs), so you shouldn't rely entirely on a specific effect. In the future, support for the [SRGB] color model together with ICC color profiles should mitigate this problem.
When practical, adopt conventions to minimize user confusion.

B. Named Colors

This table shows how some colors look on a white background:

black	blue	red	green	cyan	orange	purple	brown	grey	pink
darkpink	linen	cornsilk	lightblue	darkblue	dodgerblue	firebrick	papayawhip	forestgreen	honeydew

Clearly, some colors are not suitable for letters on a white background, but many do work as background colors, or as letters on a dark background. Here are some color combinations:

Maroon and Gray	Honeydew on Goldenrod	Salmon on Wheat	Mintcream on Chocolate	Turquoise on Moccasin	Gold and Silver
Seashell on Coral	Lawngreen on DodgerBlue	Tomato Bisque	bold Lime on Orange	Snow on Peru	Chocolate on Linen

Obviously, not all color combinations work, even if they do follow a theme based on the word meanings.

Alphabetic Color Chart

The following chart uses background colors to represent all of the named colors, in alphabetical order. The color codes are for information only. They aren't necessary since the colors can be specified by name. For the darker colors, the text is white; for lighter colors, the text is black.

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

DarkOrchid
9932CC

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

LightGreen
90EE90

LightGrey
D3D3D3

LightPink
FFB6C1

LightSalmon
FFA07A

LightSeaGreen
20B2AA

LightSkyBlue
87CEFA

LightSlateGray
778899

LightSteelBlue
B0C4DE

LightYellow
FFFFE0

Lime
00FF00

Limegreen
32CD32

Linen
FAF0E6

Magenta
FF00FF

Maroon
800000

MediumAuqamarine
66CDAA

MediumBlue
0000CD

MediumOrchid
BA55D3

MediumPurple
9370D8

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
688E23

Orange
FFA500

OrangeRed
FF4500

Orchid
DA70D6

PaleGoldenrod
EEE8AA

PaleGreen
98FB98

PaleTurquoise
AFEEEE

PaleVioletred
D87093

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

Other Color Names

Here's a chart of some other colors. Here the names are just descriptive; they have no meaning in HTML. You must use the color codes.

#5C3317 - Baker's Chocolate - (bold)	#B5A642 - Brass - (bold)	#D9D919 - Bright Gold - (bold)
#8C7853 - Bronze - (bold)	#D98719 - Cool Copper - (bold)	#B87333 - Copper - (bold)
#97694F - Dark Tan - (bold)	#855E42 - Dark Wood - (bold)	#856363 - Dusty Rose - (bold)
#D19275 - Feldspar - (bold)	#527F76 - Green Copper - (bold)	#215E21 - Hunter Green - (bold)
#E9C2A6 - Light Wood - (bold)	#E47833 - Mandarin Orange - (bold)	#6B8E23 - Medium Forest Green - (bold)
#A86064 - Medium Wood - (bold)	#4D4DFF - Neon Blue - (bold)	#FF6EC7 - Neon Pink - (bold)
#00009C - New Midnight Blue - (bold)	#EBC79E - New Tan - (bold)	#CFB53B - Old Gold - (bold)
#D9D9F3 - Quartz - (bold)	#5959AB - Rich Blue - (bold)	#8C1717 - Scarlet - (bold)
#6B4226 - Semi-Sweet Chocolate - (bold)	#FF1CAE - Spicy Pink - (bold)	#38B0DE - Summer Sky - (bold)
#5C4033 - Very Dark Brown - (bold)	#CDCDCD - Very Light Grey - (bold)

C. Numeric Color Chart

The following chart shows the named colors in numeric order.

Black; 000000 Navy; 000080 Darkblue; 00008B Mediumblue; 0000CD Blue; 0000FF Darkgreen; 006400 Green; 008000 Teal; 008080 Darkcyan; 008B8B Deepskyblue; 00BFFF Darkturquoise; 00CED1 Mediumspringgreen; 00FA9A Lime; 00FF00 Springgreen; 00FF7F Aqua; 00FFFF Cyan; 00FFFF Midnightblue; 191970 Dodgerblue; 1E90FF Lightseagreen; 20B2AA Forestgreen; 228B22 Seagreen; 2E8B57 Darkslategray; 2F4F4F Limegreen; 32CD32 Mediumseagreen; 3CB371 Turquoise; 40E0D0 Royalblue; 4169E1 Steelblue; 4682B4 Darkslateblue; 483D8B Mediumturquoise; 48D1CC Indigo; 4B0082 Darkolivegreen; 556B2F Cadetblue; 5F9EA0 Cornflowerblue; 6495ED Mediumauqamarine; 66CDAA Olivedrab; 688E23 Dimgray; 696969 Slateblue; 6A5ACD Slategray; 708090 Lightslategray; 778899 Mediumslateblue; 7B68EE Lawngreen; 7CFC00 Chartreuse; 7FFF00 Aquamarine; 7FFFD4 Maroon; 800000 Purple; 800080 Olive; 808000 Gray; 808080 Skyblue; 87CEEB Lightskyblue; 87CEFA Blueviolet; 8A2BE2 Darkred; 8B0000 Darkmagenta; 8B008B Saddlebrown; 8B4513 Darkseagreen; 8FBC8F Lightgreen; 90EE90 Mediumpurple; 9370D8 Darkviolet; 9400D3 Palegreen; 98FB98 Darkorchid; 9932CC YellowGreen; 9ACD32 Sienna; A0522D Brown; A52A2A Darkgray; A9A9A9 Lightblue; ADD8E6 Greenyellow; ADFF2F Paleturquoise; AFEEEE Lightsteelblue; B0C4DE Powderblue; B0E0E6 Firebrick; B22222 Darkgoldenrod; B8860B Mediumorchid; BA55D3 Rosybrown; BC8F8F Darkkhaki; BDB76B Silver; C0C0C0 Mediumvioletred; C71585 Indianred; CD5C5C Peru; CD853F Chocolate; D2691E Tan; D2B48C Lightgrey; D3D3D3 Palevioletred; D87093 Thistle; D8BFD8 Orchid; DA70D6 Goldenrod; DAA520 Crimson; DC143C Gainsboro; DCDCDC Plum; DDA0DD Burlywood; DEB887 Lightcyan; E0FFFF Lavender; E6E6FA Darksalmon; E9967A Violet; EE82EE Palegoldenrod; EEE8AA Lightcoral; F08080 Khaki; F0E68C Aliceblue; F0F8FF Honeydew; F0FFF0 Azure; F0FFFF Sandybrown; F4A460 Wheat; F5DEB3 Beige; F5F5DC Whitesmoke; F5F5F5 Mintcream; F5FFFA Ghostwhite; F8F8FF Salmon; FA8072 Antiquewhite; FAEBD7 Linen; FAF0E6 Lightgoldenrodyellow; FAFAD2 Oldlace; FDF5E6 Red; FF0000 Fuchsia; FF00FF Magenta; FF00FF deeppink; FF1493 Orangered; FF4500 Tomato; FF6347 Hotpink; FF69B4 Coral; FF7F50 Darkorange; FF8C00 Lightsalmon; FFA07A Orange; FFA500 Lightpink; FFB6C1 Pink; FFC0CB Gold; FFD700 Peachpuff; FFDAB9 Navajowhite; FFDEAD Moccasin; FFE4B5 Bisque; FFE4C4 Mistyrose; FFE4E1 BlanchedAlmond; FFEBCD Papayawhip; FFEFD5 Lavenderblush; FFF0F5 Seashell; FFF5EE Cornsilk; FFF8DC Lemonchiffon; FFFACD Floralwhite; FFFAF0 Snow; FFFAFA Yellow; FFFF00 Lightyellow; FFFFE0 Ivory; FFFFF0 White; FFFFFF