Color keywords
Color keywords are case-insensitive identifiers representing a specific <color>
, such as red
, blue
, black
, or lightseagreen
. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the terms used.
All keywords specify a color in the sRGB color space.
There are a few caveats to consider when using color keywords:
- HTML only recognizes the 16 basic color keywords (
black
,silver
,gray
,white
,maroon
,red
,purple
,fuchsia
,green
,lime
,olive
,yellow
,navy
,blue
,teal
, andaqua
). - An algorithm converts all other values (a CSS color keyword or a random string) to a color (leading most of the time to completely different colors than the CSS color associated in the table below). Therefore, color keywords beside these 16 values should only be used in CSS and SVG, but not in HTML.
- Unlike HTML, CSS completely ignores unknown keywords.
- The color keywords all represent plain, solid colors without transparency.
- Several keywords are aliases for each other:
aqua
/cyan
fuchsia
/magenta
darkgray
/darkgrey
darkslategray
/darkslategrey
dimgray
/dimgrey
lightgray
/lightgrey
lightslategray
/lightslategrey
gray
/grey
slategray
/slategrey
- Though many keywords have been adapted from X11, their RGB values may differ from the corresponding color on X11 systems since manufacturers sometimes tailor X11 colors to their specific hardware.
- In addition to the color keywords, the
<color>
data type supports other keywords:transparent
to create a wholly transparent color,currentcolor
that represents the value of an element'scolor
property lets you use thecolor
value on properties that do not receive it by default, as well as system color keywords that represents colors that matches those of the OS.
List of all color keywords
Specification | Keyword | RGB hex value | Live keyword |
---|---|---|---|
CSS Level 1 | black |
#000000 |
|
silver |
#c0c0c0 |
||
gray |
#808080 |
||
white |
#ffffff |
||
maroon |
#800000 |
||
red |
#ff0000 |
||
purple |
#800080 |
||
fuchsia |
#ff00ff |
||
green |
#008000 |
||
lime |
#00ff00 |
||
olive |
#808000 |
||
yellow |
#ffff00 |
||
navy |
#000080 |
||
blue |
#0000ff |
||
teal |
#008080 |
||
aqua |
#00ffff |
||
CSS Level 2 (Revision 1) | orange |
#ffa500 |
|
CSS Color Level 3 | aliceblue |
#f0f8ff |
|
antiquewhite |
#faebd7 |
||
aquamarine |
#7fffd4 |
||
azure |
#f0ffff |
||
beige |
#f5f5dc |
||
bisque |
#ffe4c4 |
||
blanchedalmond |
#ffebcd |
||
blueviolet |
#8a2be2 |
||
brown |
#a52a2a |
||
burlywood |
#deb887 |
||
cadetblue |
#5f9ea0 |
||
chartreuse |
#7fff00 |
||
chocolate |
#d2691e |
||
coral |
#ff7f50 |
||
cornflowerblue |
#6495ed |
||
cornsilk |
#fff8dc |
||
crimson |
#dc143c |
||
cyan (synonym of aqua ) |
#00ffff |
||
darkblue |
#00008b |
||
darkcyan |
#008b8b |
||
darkgoldenrod |
#b8860b |
||
darkgray |
#a9a9a9 |
||
darkgreen |
#006400 |
||
darkgrey |
#a9a9a9 |
||
darkkhaki |
#bdb76b |
||
darkmagenta |
#8b008b |
||
darkolivegreen |
#556b2f |
||
darkorange |
#ff8c00 |
||
darkorchid |
#9932cc |
||
darkred |
#8b0000 |
||
darksalmon |
#e9967a |
||
darkseagreen |
#8fbc8f |
||
darkslateblue |
#483d8b |
||
darkslategray |
#2f4f4f |
||
darkslategrey |
#2f4f4f |
||
darkturquoise |
#00ced1 |
||
darkviolet |
#9400d3 |
||
deeppink |
#ff1493 |
||
deepskyblue |
#00bfff |
||
dimgray |
#696969 |
||
dimgrey |
#696969 |
||
dodgerblue |
#1e90ff |
||
firebrick |
#b22222 |
||
floralwhite |
#fffaf0 |
||
forestgreen |
#228b22 |
||
gainsboro |
#dcdcdc |
||
ghostwhite |
#f8f8ff |
||
gold |
#ffd700 |
||
goldenrod |
#daa520 |
||
greenyellow |
#adff2f |
||
grey |
#808080 |
||
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 |
||
lightgray |
#d3d3d3 |
||
lightgreen |
#90ee90 |
||
lightgrey |
#d3d3d3 |
||
lightpink |
#ffb6c1 |
||
lightsalmon |
#ffa07a |
||
lightseagreen |
#20b2aa |
||
lightskyblue |
#87cefa |
||
lightslategray |
#778899 |
||
lightslategrey |
#778899 |
||
lightsteelblue |
#b0c4de |
||
lightyellow |
#ffffe0 |
||
limegreen |
#32cd32 |
||
linen |
#faf0e6 |
||
magenta (synonym of fuchsia ) |
#ff00ff |
||
mediumaquamarine |
#66cdaa |
||
mediumblue |
#0000cd |
||
mediumorchid |
#ba55d3 |
||
mediumpurple |
#9370db |
||
mediumseagreen |
#3cb371 |
||
mediumslateblue |
#7b68ee |
||
mediumspringgreen |
#00fa9a |
||
mediumturquoise |
#48d1cc |
||
mediumvioletred |
#c71585 |
||
midnightblue |
#191970 |
||
mintcream |
#f5fffa |
||
mistyrose |
#ffe4e1 |
||
moccasin |
#ffe4b5 |
||
navajowhite |
#ffdead |
||
oldlace |
#fdf5e6 |
||
olivedrab |
#6b8e23 |
||
orangered |
#ff4500 |
||
orchid |
#da70d6 |
||
palegoldenrod |
#eee8aa |
||
palegreen |
#98fb98 |
||
paleturquoise |
#afeeee |
||
palevioletred |
#db7093 |
||
papayawhip |
#ffefd5 |
||
peachpuff |
#ffdab9 |
||
peru |
#cd853f |
||
pink |
#ffc0cb |
||
plum |
#dda0dd |
||
powderblue |
#b0e0e6 |
||
rosybrown |
#bc8f8f |
||
royalblue |
#4169e1 |
||
saddlebrown |
#8b4513 |
||
salmon |
#fa8072 |
||
sandybrown |
#f4a460 |
||
seagreen |
#2e8b57 |
||
seashell |
#fff5ee |
||
sienna |
#a0522d |
||
skyblue |
#87ceeb |
||
slateblue |
#6a5acd |
||
slategray |
#708090 |
||
slategrey |
#708090 |
||
snow |
#fffafa |
||
springgreen |
#00ff7f |
||
steelblue |
#4682b4 |
||
tan |
#d2b48c |
||
thistle |
#d8bfd8 |
||
tomato |
#ff6347 |
||
turquoise |
#40e0d0 |
||
violet |
#ee82ee |
||
wheat |
#f5deb3 |
||
whitesmoke |
#f5f5f5 |
||
yellowgreen |
#9acd32 |
||
CSS Color Level 4 | rebeccapurple |
#663399 |
Note: The list of accepted keywords has undergone many changes during the evolution of CSS:
- CSS Level 1 only included 16 basic colors, called the VGA colors as they were taken from the set of displayable colors on VGA graphics cards.
- CSS Level 2 added the
orange
keyword. - Although various colors not in the specification (mostly adapted from the X11 colors list) were supported by early browsers, it wasn't until SVG 1.0 and CSS Colors Level 3 that they were formally defined. They are called the extended color keywords, the X11 colors, or the SVG colors.
- CSS Colors Level 4 added the
rebeccapurple
keyword to honor web pioneer Eric Meyer.
See also
<color>
the data type these keywords belong to.