Any time I edit a CSS file in Visual Studio Code, a list of colors shows up.
For example,
background-color: blue;
I appreciate the functionality and the ability to see and edit colors in the code editor.
The ability to type in the name of the colors is very useful. However, I realize it's not the easiest to find specific colors beyond the basic colors when I try filtering by name/IntelliSense.
There seems to be very long list of colors - is there pattern or complete list of colors that I can refer to? I'd like to see the full list so I can easily refer to the colors in the future.
What you're seeing is <named-color>
which is a CSS data type.
You can use this RapidTables page which groups then into color categories.
In case you don't want to click through, here is the list. I'll split it by spec, the first of which is from 1996 and the last from 2014 (source: MDN web docs).
color | hexcode |
---|---|
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 |
color | hexcode |
---|---|
orange | #ffa500 |
color | hexcode |
---|---|
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 |
transparent | (see below) |
turquoise | #40e0d0 |
violet | #ee82ee |
wheat | #f5deb3 |
whitesmoke | #f5f5f5 |
yellowgreen | #9acd32 |
Transparent is a shortcut for rgba(0,0,0,0)
. For those not familiar, that is 0 for red value, 0 for green value, 0 for blue value, and importantly 0 for the alpha value which is the transparency (lower is more transparent).
color | hexcode |
---|---|
rebeccapurple | #663399 |