In CSS there are multiple ways to specify colors, you can do it with hex definition #f00, functional definition like rgb(255, 0, 0) or hsl(0, 100%, 50%). Or in simpler cases, you can use keyword definitions like red.
History
16 of CSS’s named colors came from HTML originally:white, aqua, fuchsia, red, lime,yellow, silver, gray, black,maroon, blue, navy, olive,purple, green, teal. Most of the rest came from one version of the X11 color system.
Latest addition
In 2014 Eric A. Meyer's daughter Rebecca died on her 6th birthday, less than a year after her diagnosis of a brain tumor. The hex color #663399 was named rebeccapurple and added to the CSS color list in her memory.
Duplicate colors
There are four duplicates between the named colors, and all of them are related to gray (English) – grey (UK) spelling differences.
The duplicates are: lightgray – lightgrey, darkgray – darkgrey, gray – grey, dimgray – dimgrey.
Inconsistencies
- darkgray
#a9a9a9 is lighter than gray #808080. - light/dark variants of colors are not available with all basic colors:
| Basic color | Dark variant | Light variant |
|---|
| blue | darkblue | lightblue |
| green | darkgreen | lightgreen |
| red | darkred | ✖ |
| orange | darkorange | ✖ |
| yellow | ✖ | lightyellow |
| pink | ✖ | lightpink |
| brown | ✖ | ✖ |
| purple | ✖ | ✖ |
| cyan | darkcyan | lightcyan |
| gray | darkgray | lightgray |
Are named colors useful?
There are several cases where named colors might be useful:
white/black is more readable than #fff/#000.- CSS minifiers optimize for filesize and in some cases named color is the shortest possible value. For example
red is shorter than #f00 or rgb(255,0,0). - In example apps where the exact shade of color is not important.
Named colors list
Here is a list of all CSS named color grouped by basic color and then sorted by their lightness with the HSP Color Model. Currently, there are 147 named colors.
Pink colors
| MistyRose | #FFE4E1 | rgb(255, 228, 225) |
| Pink | #FFC0CB | rgb(255, 192, 203) |
| LightPink | #FFB6C1 | rgb(255, 182, 193) |
| HotPink | #FF69B4 | rgb(255, 105, 180) |
| PaleVioletRed | #DB7093 | rgb(219, 112, 147) |
| DeepPink | #FF1493 | rgb(255, 20, 147) |
| MediumVioletRed | #C71585 | rgb(199, 21, 133) |
Red colors
| LightSalmon | #FFA07A | rgb(255, 160, 122) |
| DarkSalmon | #E9967A | rgb(233, 150, 122) |
| Salmon | #FA8072 | rgb(250, 128, 114) |
| LightCoral | #F08080 | rgb(240, 128, 128) |
| Red | #FF0000 | rgb(255, 0, 0) |
| IndianRed | #CD5C5C | rgb(205, 92, 92) |
| Crimson | #DC143C | rgb(220, 20, 60) |
| FireBrick | #B22222 | rgb(178, 34, 34) |
| DarkRed | #8B0000 | rgb(139, 0, 0) |
Orange colors
| FloralWhite | #FFFAF0 | rgb(255, 250, 240) |
| Seashell | #FFF5EE | rgb(255, 245, 238) |
| OldLace | #FDF5E6 | rgb(253, 245, 230) |
| Linen | #FAF0E6 | rgb(250, 240, 230) |
| AntiqueWhite | #FAEBD7 | rgb(250, 235, 215) |
| Orange | #FFA500 | rgb(255, 165, 0) |
| DarkOrange | #FF8C00 | rgb(255, 140, 0) |
| Coral | #FF7F50 | rgb(255, 127, 80) |
| Tomato | #FF6347 | rgb(255, 99, 71) |
| OrangeRed | #FF4500 | rgb(255, 69, 0) |
Yellow colors
| Ivory | #FFFFF0 | rgb(255, 255, 240) |
| LightYellow | #FFFFE0 | rgb(255, 255, 224) |
| LemonChiffon | #FFFACD | rgb(255, 250, 205) |
| LightGoldenrodYellow | #FAFAD2 | rgb(250, 250, 210) |
| Beige | #F5F5DC | rgb(245, 245, 220) |
| PapayaWhip | #FFEFD5 | rgb(255, 239, 213) |
| Yellow | #FFFF00 | rgb(255, 255, 0) |
| Moccasin | #FFE4B5 | rgb(255, 228, 181) |
| PaleGoldenrod | #EEE8AA | rgb(238, 232, 170) |
| PeachPuff | #FFDAB9 | rgb(255, 218, 185) |
| Khaki | #F0E68C | rgb(240, 230, 140) |
| Gold | #FFD700 | rgb(255, 215, 0) |
| DarkKhaki | #BDB76B | rgb(189, 183, 107) |
Brown colors
| Cornsilk | #FFF8DC | rgb(255, 248, 220) |
| BlanchedAlmond | #FFEBCD | rgb(255, 235, 205) |
| Bisque | #FFE4C4 | rgb(255, 228, 196) |
| NavajoWhite | #FFDEAD | rgb(255, 222, 173) |
| Wheat | #F5DEB3 | rgb(245, 222, 179) |
| BurlyWood | #DEB887 | rgb(222, 184, 135) |
| SandyBrown | #F4A460 | rgb(244, 164, 96) |
| Tan | #D2B48C | rgb(210, 180, 140) |
| Goldenrod | #DAA520 | rgb(218, 165, 32) |
| RosyBrown | #BC8F8F | rgb(188, 143, 143) |
| Peru | #CD853F | rgb(205, 133, 63) |
| DarkGoldenrod | #B8860B | rgb(184, 134, 11) |
| Chocolate | #D2691E | rgb(210, 105, 30) |
| Sienna | #A0522D | rgb(160, 82, 45) |
| Brown | #A52A2A | rgb(165, 42, 42) |
| SaddleBrown | #8B4513 | rgb(139, 69, 19) |
| Maroon | #800000 | rgb(128, 0, 0) |
Green colors
| MintCream | #F5FFFA | rgb(245, 255, 250) |
| Honeydew | #F0FFF0 | rgb(240, 255, 240) |
| GreenYellow | #ADFF2F | rgb(173, 255, 47) |
| PaleGreen | #98FB98 | rgb(152, 251, 152) |
| Chartreuse | #7FFF00 | rgb(127, 255, 0) |
| LawnGreen | #7CFC00 | rgb(124, 252, 0) |
| LightGreen | #90EE90 | rgb(144, 238, 144) |
| SpringGreen | #00FF7F | rgb(0, 255, 127) |
| MediumSpringGreen | #00FA9A | rgb(0, 250, 154) |
| Lime | #00FF00 | rgb(0, 255, 0) |
| YellowGreen | #9ACD32 | rgb(154, 205, 50) |
| MediumAquamarine | #66CDAA | rgb(102, 205, 170) |
| DarkSeaGreen | #8FBC8F | rgb(143, 188, 143) |
| LimeGreen | #32CD32 | rgb(50, 205, 50) |
| MediumSeaGreen | #3CB371 | rgb(60, 179, 113) |
| OliveDrab | #6B8E23 | rgb(107, 142, 35) |
| Olive | #808000 | rgb(128, 128, 0) |
| SeaGreen | #2E8B57 | rgb(46, 139, 87) |
| ForestGreen | #228B22 | rgb(34, 139, 34) |
| Green | #008000 | rgb(0, 128, 0) |
| DarkOliveGreen | #556B2F | rgb(85, 107, 47) |
| DarkGreen | #006400 | rgb(0, 100, 0) |
| DarkSlateGray | #2F4F4F | rgb(47, 79, 79) |
| DarkSlateGrey | #2F4F4F | rgb(47, 79, 79) |
Cyan colors
| LightCyan | #E0FFFF | rgb(224, 255, 255) |
| PaleTurquoise | #AFEEEE | rgb(175, 238, 238) |
| Aquamarine | #7FFFD4 | rgb(127, 255, 212) |
| Aqua | #00FFFF | rgb(0, 255, 255) |
| Cyan | #00FFFF | rgb(0, 255, 255) |
| Turquoise | #40E0D0 | rgb(64, 224, 208) |
| MediumTurquoise | #48D1CC | rgb(72, 209, 204) |
| DarkTurquoise | #00CED1 | rgb(0, 206, 209) |
| LightSeaGreen | #20B2AA | rgb(32, 178, 170) |
| CadetBlue | #5F9EA0 | rgb(95, 158, 160) |
| DarkCyan | #008B8B | rgb(0, 139, 139) |
| Teal | #008080 | rgb(0, 128, 128) |
Blue colors
| Azure | #F0FFFF | rgb(240, 255, 255) |
| AliceBlue | #F0F8FF | rgb(240, 248, 255) |
| PowderBlue | #B0E0E6 | rgb(176, 224, 230) |
| LightBlue | #ADD8E6 | rgb(173, 216, 230) |
| LightSkyBlue | #87CEFA | rgb(135, 206, 250) |
| LightSteelBlue | #B0C4DE | rgb(176, 196, 222) |
| SkyBlue | #87CEEB | rgb(135, 206, 235) |
| DeepSkyBlue | #00BFFF | rgb(0, 191, 255) |
| CornflowerBlue | #6495ED | rgb(100, 149, 237) |
| DodgerBlue | #1E90FF | rgb(30, 144, 255) |
| LightSlateGray | #778899 | rgb(119, 136, 153) |
| LightSlateGrey | #778899 | rgb(119, 136, 153) |
| SlateGray | #708090 | rgb(112, 128, 144) |
| SlateGrey | #708090 | rgb(112, 128, 144) |
| SteelBlue | #4682B4 | rgb(70, 130, 180) |
| RoyalBlue | #4169E1 | rgb(65, 105, 225) |
| Blue | #0000FF | rgb(0, 0, 255) |
| MediumBlue | #0000CD | rgb(0, 0, 205) |
| DarkBlue | #00008B | rgb(0, 0, 139) |
| MidnightBlue | #191970 | rgb(25, 25, 112) |
| Navy | #000080 | rgb(0, 0, 128) |
Purple, violet, and magenta colors
| GhostWhite | #F8F8FF | rgb(248, 248, 255) |
| LavenderBlush | #FFF0F5 | rgb(255, 240, 245) |
| Lavender | #E6E6FA | rgb(230, 230, 250) |
| Thistle | #D8BFD8 | rgb(216, 191, 216) |
| Plum | #DDA0DD | rgb(221, 160, 221) |
| Violet | #EE82EE | rgb(238, 130, 238) |
| Fuchsia | #FF00FF | rgb(255, 0, 255) |
| Magenta | #FF00FF | rgb(255, 0, 255) |
| Orchid | #DA70D6 | rgb(218, 112, 214) |
| MediumOrchid | #BA55D3 | rgb(186, 85, 211) |
| MediumPurple | #9370DB | rgb(147, 112, 219) |
| MediumSlateBlue | #7B68EE | rgb(123, 104, 238) |
| DarkOrchid | #9932CC | rgb(153, 50, 204) |
| SlateBlue | #6A5ACD | rgb(106, 90, 205) |
| BlueViolet | #8A2BE2 | rgb(138, 43, 226) |
| DarkViolet | #9400D3 | rgb(148, 0, 211) |
| DarkMagenta | #8B008B | rgb(139, 0, 139) |
| Purple | #800080 | rgb(128, 0, 128) |
| DarkSlateBlue | #483D8B | rgb(72, 61, 139) |
| Indigo | #4B0082 | rgb(75, 0, 130) |
White, Gray, and black colors
| White | #FFFFFF | rgb(255, 255, 255) |
| Snow | #FFFAFA | rgb(255, 250, 250) |
| WhiteSmoke | #F5F5F5 | rgb(245, 245, 245) |
| Gainsboro | #DCDCDC | rgb(220, 220, 220) |
| LightGray | #D3D3D3 | rgb(211, 211, 211) |
| LightGrey | #D3D3D3 | rgb(211, 211, 211) |
| Silver | #C0C0C0 | rgb(192, 192, 192) |
| DarkGray | #A9A9A9 | rgb(169, 169, 169) |
| DarkGrey | #A9A9A9 | rgb(169, 169, 169) |
| Gray | #808080 | rgb(128, 128, 128) |
| Grey | #808080 | rgb(128, 128, 128) |
| DimGray | #696969 | rgb(105, 105, 105) |
| DimGrey | #696969 | rgb(105, 105, 105) |
| Black | #000000 | rgb(0, 0, 0) |
Links
