ID Color Name HEX RGB
Group: Red
7 LightSalmon #FFA07A 255,160,122
8 Salmon #FA8072 250,128,114
9 DarkSalmon #E9967A 233,150,122
10 LightCoral #F08080 240,128,128
11 IndianRed #CD5C5C 205,92,92
12 Crimson #DC143C 220,20,60
13 Firebrick #B22222 178,34,34
14 DarkRed #8B0000 139,0,0
15 Red #FF0000 255,0,0
Group: Pink
1 Pink #FFC0CB 255,192,203
2 LightPink #FFB6C1 255,182,193
3 HotPink #FF69B4 255,105,180
4 DeepPink #FF1493 255,20,147
5 PaleVioletRed #DB7093 219,112,147
6 MediumVioletRed #C71585 199,21,133
Group: Orange
16 OrangeRed #FF4500 255,69,0
17 Tomato #FF6347 255,99,71
18 Coral #FF7F50 255,127,80
19 DarkOrange #FF8C00 255,140,0
20 Orange #FFA500 255,165,0
Group: Yellow
21 Yellow #FFFF00 255,255,0
22 LightYellow #FFFFE0 255,255,224
23 LemonChiffon #FFFACD 255,250,205
24 LightGoldenrodYellow #FAFAD2 250,250,210
25 PapayaWhip #FFEFD5 255,239,213
26 Moccasin #FFE4B5 255,228,181
27 PeachPuff #FFDAB9 255,218,185
28 PaleGoldenrod #EEE8AA 238,232,170
29 Khaki #F0E68C 240,230,140
30 DarkKhaki #BDB76B 189,183,107
31 Gold #FFD700 255,215,0
Group: Brown
32 Cornsilk #FFF8DC 255,248,220
33 BlanchedAlmond #FFEBCD 255,235,205
34 Bisque #FFE4C4 255,228,196
35 NavajoWhite #FFDEAD 255,222,173
36 Wheat #F5DEB3 245,222,179
37 Burlywood #DEB887 222,184,135
38 Tan #D2B48C 210,180,140
39 RosyBrown #BC8F8F 188,143,143
40 SandyBrown #F4A460 244,164,96
41 Goldenrod #DAA520 218,165,32
42 DarkGoldenrod #B8860B 184,134,11
43 Peru #CD853F 205,133,63
44 Chocolate #D2691E 210,105,30
45 SaddleBrown #8B4513 139,69,19
46 Sienna #A0522D 160,82,45
47 Brown #A52A2A 165,42,42
48 Maroon #800000 128,0,0
Group: Green
49 DarkOliveGreen #556B2F 85,107,47
50 Olive #808000 128,128,0
51 OliveDrab #6B8E23 107,142,35
52 YellowGreen #9ACD32 154,205,50
53 LimeGreen #32CD32 50,205,50
54 Lime #00FF00 0,255,0
55 LawnGreen #7CFC00 124,252,0
56 Chartreuse #7FFF00 127,255,0
57 GreenYellow #ADFF2F 173,255,47
58 SpringGreen #00FF7F 0,255,127
59 MediumSpringGreen, #00FA9A 0,250,154
60 LightGreen #90EE90 144,238,144
61 PaleGreen #98FB98 152,251,152
62 DarkSeaGreen #8FBC8F 143,188,143
63 MediumAquamarine #66CDAA 102,205,170
64 MediumSeaGreen #3CB371 60,179,113
65 SeaGreen #2E8B57 46,139,87
66 ForestGreen #228B22 34,139,34
67 Green #008000 0,128,0
68 DarkGreen #006400 0,100,0
Group: Cyan
69 Aqua #00FFFF 0,255,255
70 Cyan #00FFFF 0,255,255
71 LightCyan #E0FFFF 224,255,255
72 PaleTurquoise #AFEEEE 175,238,238
73 Aquamarine #7FFFD4 127,255,212
74 Turquoise #40E0D0 64,224,208
75 MediumTurquoise #48D1CC 72,209,204
76 DarkTurquoise #00CED1 0,206,209
77 LightSeaGreen #20B2AA 32,178,170
78 CadetBlue #5F9EA0 95,158,160
79 DarkCyan #008B8B 0,139,139
80 Teal #008080 0,128,128
Group: Blue
81 LightSteelBlue #B0C4DE 176,196,222
82 PowderBlue #B0E0E6 176,224,230
83 LightBlue #ADD8E6 173,216,230
84 SkyBlue #87CEEB 135,206,235
85 LightSkyBlue #87CEFA 135,206,250
86 DeepSkyBlue #00BFFF 0,191,255
87 DodgerBlue #1E90FF 30,144,255
88 CornflowerBlue #6495ED 100,149,237
89 SteelBlue #4682B4 70,130,180
90 RoyalBlue #4169E1 65,105,225
91 Blue #0000FF 0,0,255
92 MediumBlue #0000CD 0,0,205
93 DarkBlue #00008B 0,0,139
94 Navy #000080 0,0,128
95 MidnightBlue #191970 25,25,112
Group: Purple
96 Lavender #E6E6FA 230,230,250
97 Thistle #D8BFD8 216,191,216
98 Plum #DDA0DD 221,160,221
99 Violet #EE82EE 238,130,238
100 Orchid #DA70D6 218,112,214
101 Fuchsia #FF00FF 255,0,255
102 Magenta #FF00FF 255,0,255
103 MediumOrchid #BA55D3 186,85,211
104 MediumPurple #9370DB 147,112,219
105 BlueViolet #8A2BE2 138,43,226
106 DarkViolet #9400D3 148,0,211
107 DarkOrchid #9932CC 153,50,204
108 DarkMagenta #8B008B 139,0,139
109 Purple #800080 128,0,128
110 Indigo #4B0082 75,0,130
111 DarkSlateBlue #483D8B 72,61,139
112 SlateBlue #6A5ACD 106,90,205
113 MediumSlateBlue #7B68EE 123,104,238
Group: White
114 White #FFFFFF 255,255,255
115 Snow #FFFAFA 255,250,250
116 Honeydew #F0FFF0 240,255,240
117 MintCream #F5FFFA 245,255,250
118 Azure #F0FFFF 240,255,255
119 AliceBlue #F0F8FF 240,248,255
120 GhostWhite #F8F8FF 248,248,255
121 WhiteSmoke #F5F5F5 245,245,245
122 Seashell #FFF5EE 255,245,238
123 Beige #F5F5DC 245,245,220
124 OldLace #FDF5E6 253,245,230
125 FloralWhite #FFFAF0 255,250,240
126 Ivory #FFFFF0 255,255,240
127 AntiqueWhite #FAEBD7 250,235,215
128 Linen #FAF0E6 250,240,230
129 LavenderBlush #FFF0F5 255,240,245
130 MistyRose #FFE4E1 255,228,225
Group: Gray
131 Gainsboro #DCDCDC 220,220,220
132 LightGray #D3D3D3 211,211,211
133 Silver #C0C0C0 192,192,192
134 DarkGray #A9A9A9 169,169,169
135 Gray #808080 128,128,128
136 DimGray #696969 105,105,105
137 LightSlateGray #778899 119,136,153
138 SlateGray #708090 112,128,144
139 DarkSlateGray #2F4F4F 47,79,79
140 Black #000000 0,0,0

CSS Hex

/* Red Group // LightSalmon // #FFA07A // 255,160,122 */
.bg-lightsalmon { background:#ffa07a;}
.text-lightsalmon { color:#ffa07a;}
/* Red Group // Salmon // #FA8072 // 250,128,114 */
.bg-salmon { background:#fa8072;}
.text-salmon { color:#fa8072;}
/* Red Group // DarkSalmon // #E9967A // 233,150,122 */
.bg-darksalmon { background:#e9967a;}
.text-darksalmon { color:#e9967a;}
/* Red Group // LightCoral // #F08080 // 240,128,128 */
.bg-lightcoral { background:#f08080;}
.text-lightcoral { color:#f08080;}
/* Red Group // IndianRed // #CD5C5C // 205,92,92 */
.bg-indianred { background:#cd5c5c;}
.text-indianred { color:#cd5c5c;}
/* Red Group // Crimson // #DC143C // 220,20,60 */
.bg-crimson { background:#dc143c;}
.text-crimson { color:#dc143c;}
/* Red Group // Firebrick // #B22222 // 178,34,34 */
.bg-firebrick { background:#b22222;}
.text-firebrick { color:#b22222;}
/* Red Group // DarkRed // #8B0000 // 139,0,0 */
.bg-darkred { background:#8b0000;}
.text-darkred { color:#8b0000;}
/* Red Group // Red // #FF0000 // 255,0,0 */
.bg-red { background:#ff0000;}
.text-red { color:#ff0000;}
/* Pink Group // Pink // #FFC0CB // 255,192,203 */
.bg-pink { background:#ffc0cb;}
.text-pink { color:#ffc0cb;}
/* Pink Group // LightPink // #FFB6C1 // 255,182,193 */
.bg-lightpink { background:#ffb6c1;}
.text-lightpink { color:#ffb6c1;}
/* Pink Group // HotPink // #FF69B4 // 255,105,180 */
.bg-hotpink { background:#ff69b4;}
.text-hotpink { color:#ff69b4;}
/* Pink Group // DeepPink // #FF1493 // 255,20,147 */
.bg-deeppink { background:#ff1493;}
.text-deeppink { color:#ff1493;}
/* Pink Group // PaleVioletRed // #DB7093 // 219,112,147 */
.bg-palevioletred { background:#db7093;}
.text-palevioletred { color:#db7093;}
/* Pink Group // MediumVioletRed // #C71585 // 199,21,133 */
.bg-mediumvioletred { background:#c71585;}
.text-mediumvioletred { color:#c71585;}
/* Orange Group // OrangeRed // #FF4500 // 255,69,0 */
.bg-orangered { background:#ff4500;}
.text-orangered { color:#ff4500;}
/* Orange Group // Tomato // #FF6347 // 255,99,71 */
.bg-tomato { background:#ff6347;}
.text-tomato { color:#ff6347;}
/* Orange Group // Coral // #FF7F50 // 255,127,80 */
.bg-coral { background:#ff7f50;}
.text-coral { color:#ff7f50;}
/* Orange Group // DarkOrange // #FF8C00 // 255,140,0 */
.bg-darkorange { background:#ff8c00;}
.text-darkorange { color:#ff8c00;}
/* Orange Group // Orange // #FFA500 // 255,165,0 */
.bg-orange { background:#ffa500;}
.text-orange { color:#ffa500;}
/* Yellow Group // Yellow // #FFFF00 // 255,255,0 */
.bg-yellow { background:#ffff00;}
.text-yellow { color:#ffff00;}
/* Yellow Group // LightYellow // #FFFFE0 // 255,255,224 */
.bg-lightyellow { background:#ffffe0;}
.text-lightyellow { color:#ffffe0;}
/* Yellow Group // LemonChiffon // #FFFACD // 255,250,205 */
.bg-lemonchiffon { background:#fffacd;}
.text-lemonchiffon { color:#fffacd;}
/* Yellow Group // LightGoldenrodYellow // #FAFAD2 // 250,250,210 */
.bg-lightgoldenrodyellow { background:#fafad2;}
.text-lightgoldenrodyellow { color:#fafad2;}
/* Yellow Group // PapayaWhip // #FFEFD5 // 255,239,213 */
.bg-papayawhip { background:#ffefd5;}
.text-papayawhip { color:#ffefd5;}
/* Yellow Group // Moccasin // #FFE4B5 // 255,228,181 */
.bg-moccasin { background:#ffe4b5;}
.text-moccasin { color:#ffe4b5;}
/* Yellow Group // PeachPuff // #FFDAB9 // 255,218,185 */
.bg-peachpuff { background:#ffdab9;}
.text-peachpuff { color:#ffdab9;}
/* Yellow Group // PaleGoldenrod // #EEE8AA // 238,232,170 */
.bg-palegoldenrod { background:#eee8aa;}
.text-palegoldenrod { color:#eee8aa;}
/* Yellow Group // Khaki // #F0E68C // 240,230,140 */
.bg-khaki { background:#f0e68c;}
.text-khaki { color:#f0e68c;}
/* Yellow Group // DarkKhaki // #BDB76B // 189,183,107 */
.bg-darkkhaki { background:#bdb76b;}
.text-darkkhaki { color:#bdb76b;}
/* Yellow Group // Gold // #FFD700 // 255,215,0 */
.bg-gold { background:#ffd700;}
.text-gold { color:#ffd700;}
/* Brown Group // Cornsilk // #FFF8DC // 255,248,220 */
.bg-cornsilk { background:#fff8dc;}
.text-cornsilk { color:#fff8dc;}
/* Brown Group // BlanchedAlmond // #FFEBCD // 255,235,205 */
.bg-blanchedalmond { background:#ffebcd;}
.text-blanchedalmond { color:#ffebcd;}
/* Brown Group // Bisque // #FFE4C4 // 255,228,196 */
.bg-bisque { background:#ffe4c4;}
.text-bisque { color:#ffe4c4;}
/* Brown Group // NavajoWhite // #FFDEAD // 255,222,173 */
.bg-navajowhite { background:#ffdead;}
.text-navajowhite { color:#ffdead;}
/* Brown Group // Wheat // #F5DEB3 // 245,222,179 */
.bg-wheat { background:#f5deb3;}
.text-wheat { color:#f5deb3;}
/* Brown Group // Burlywood // #DEB887 // 222,184,135 */
.bg-burlywood { background:#deb887;}
.text-burlywood { color:#deb887;}
/* Brown Group // Tan // #D2B48C // 210,180,140 */
.bg-tan { background:#d2b48c;}
.text-tan { color:#d2b48c;}
/* Brown Group // RosyBrown // #BC8F8F // 188,143,143 */
.bg-rosybrown { background:#bc8f8f;}
.text-rosybrown { color:#bc8f8f;}
/* Brown Group // SandyBrown // #F4A460 // 244,164,96 */
.bg-sandybrown { background:#f4a460;}
.text-sandybrown { color:#f4a460;}
/* Brown Group // Goldenrod // #DAA520 // 218,165,32 */
.bg-goldenrod { background:#daa520;}
.text-goldenrod { color:#daa520;}
/* Brown Group // DarkGoldenrod // #B8860B // 184,134,11 */
.bg-darkgoldenrod { background:#b8860b;}
.text-darkgoldenrod { color:#b8860b;}
/* Brown Group // Peru // #CD853F // 205,133,63 */
.bg-peru { background:#cd853f;}
.text-peru { color:#cd853f;}
/* Brown Group // Chocolate // #D2691E // 210,105,30 */
.bg-chocolate { background:#d2691e;}
.text-chocolate { color:#d2691e;}
/* Brown Group // SaddleBrown // #8B4513 // 139,69,19 */
.bg-saddlebrown { background:#8b4513;}
.text-saddlebrown { color:#8b4513;}
/* Brown Group // Sienna // #A0522D // 160,82,45 */
.bg-sienna { background:#a0522d;}
.text-sienna { color:#a0522d;}
/* Brown Group // Brown // #A52A2A // 165,42,42 */
.bg-brown { background:#a52a2a;}
.text-brown { color:#a52a2a;}
/* Brown Group // Maroon // #800000 // 128,0,0 */
.bg-maroon { background:#800000;}
.text-maroon { color:#800000;}
/* Green Group // DarkOliveGreen // #556B2F // 85,107,47 */
.bg-darkolivegreen { background:#556b2f;}
.text-darkolivegreen { color:#556b2f;}
/* Green Group // Olive // #808000 // 128,128,0 */
.bg-olive { background:#808000;}
.text-olive { color:#808000;}
/* Green Group // OliveDrab // #6B8E23 // 107,142,35 */
.bg-olivedrab { background:#6b8e23;}
.text-olivedrab { color:#6b8e23;}
/* Green Group // YellowGreen // #9ACD32 // 154,205,50 */
.bg-yellowgreen { background:#9acd32;}
.text-yellowgreen { color:#9acd32;}
/* Green Group // LimeGreen // #32CD32 // 50,205,50 */
.bg-limegreen { background:#32cd32;}
.text-limegreen { color:#32cd32;}
/* Green Group // Lime // #00FF00 // 0,255,0 */
.bg-lime { background:#00ff00;}
.text-lime { color:#00ff00;}
/* Green Group // LawnGreen // #7CFC00 // 124,252,0 */
.bg-lawngreen { background:#7cfc00;}
.text-lawngreen { color:#7cfc00;}
/* Green Group // Chartreuse // #7FFF00 // 127,255,0 */
.bg-chartreuse { background:#7fff00;}
.text-chartreuse { color:#7fff00;}
/* Green Group // GreenYellow // #ADFF2F // 173,255,47 */
.bg-greenyellow { background:#adff2f;}
.text-greenyellow { color:#adff2f;}
/* Green Group // SpringGreen // #00FF7F // 0,255,127 */
.bg-springgreen { background:#00ff7f;}
.text-springgreen { color:#00ff7f;}
/* Green Group // MediumSpringGreen, // #00FA9A // 0,250,154 */
.bg-mediumspringgreen, { background:#00fa9a;}
.text-mediumspringgreen, { color:#00fa9a;}
/* Green Group // LightGreen // #90EE90 // 144,238,144 */
.bg-lightgreen { background:#90ee90;}
.text-lightgreen { color:#90ee90;}
/* Green Group // PaleGreen // #98FB98 // 152,251,152 */
.bg-palegreen { background:#98fb98;}
.text-palegreen { color:#98fb98;}
/* Green Group // DarkSeaGreen // #8FBC8F // 143,188,143 */
.bg-darkseagreen { background:#8fbc8f;}
.text-darkseagreen { color:#8fbc8f;}
/* Green Group // MediumAquamarine // #66CDAA // 102,205,170 */
.bg-mediumaquamarine { background:#66cdaa;}
.text-mediumaquamarine { color:#66cdaa;}
/* Green Group // MediumSeaGreen // #3CB371 // 60,179,113 */
.bg-mediumseagreen { background:#3cb371;}
.text-mediumseagreen { color:#3cb371;}
/* Green Group // SeaGreen // #2E8B57 // 46,139,87 */
.bg-seagreen { background:#2e8b57;}
.text-seagreen { color:#2e8b57;}
/* Green Group // ForestGreen // #228B22 // 34,139,34 */
.bg-forestgreen { background:#228b22;}
.text-forestgreen { color:#228b22;}
/* Green Group // Green // #008000 // 0,128,0 */
.bg-green { background:#008000;}
.text-green { color:#008000;}
/* Green Group // DarkGreen // #006400 // 0,100,0 */
.bg-darkgreen { background:#006400;}
.text-darkgreen { color:#006400;}
/* Cyan Group // Aqua // #00FFFF // 0,255,255 */
.bg-aqua { background:#00ffff;}
.text-aqua { color:#00ffff;}
/* Cyan Group // Cyan // #00FFFF // 0,255,255 */
.bg-cyan { background:#00ffff;}
.text-cyan { color:#00ffff;}
/* Cyan Group // LightCyan // #E0FFFF // 224,255,255 */
.bg-lightcyan { background:#e0ffff;}
.text-lightcyan { color:#e0ffff;}
/* Cyan Group // PaleTurquoise // #AFEEEE // 175,238,238 */
.bg-paleturquoise { background:#afeeee;}
.text-paleturquoise { color:#afeeee;}
/* Cyan Group // Aquamarine // #7FFFD4 // 127,255,212 */
.bg-aquamarine { background:#7fffd4;}
.text-aquamarine { color:#7fffd4;}
/* Cyan Group // Turquoise // #40E0D0 // 64,224,208 */
.bg-turquoise { background:#40e0d0;}
.text-turquoise { color:#40e0d0;}
/* Cyan Group // MediumTurquoise // #48D1CC // 72,209,204 */
.bg-mediumturquoise { background:#48d1cc;}
.text-mediumturquoise { color:#48d1cc;}
/* Cyan Group // DarkTurquoise // #00CED1 // 0,206,209 */
.bg-darkturquoise { background:#00ced1;}
.text-darkturquoise { color:#00ced1;}
/* Cyan Group // LightSeaGreen // #20B2AA // 32,178,170 */
.bg-lightseagreen { background:#20b2aa;}
.text-lightseagreen { color:#20b2aa;}
/* Cyan Group // CadetBlue // #5F9EA0 // 95,158,160 */
.bg-cadetblue { background:#5f9ea0;}
.text-cadetblue { color:#5f9ea0;}
/* Cyan Group // DarkCyan // #008B8B // 0,139,139 */
.bg-darkcyan { background:#008b8b;}
.text-darkcyan { color:#008b8b;}
/* Cyan Group // Teal // #008080 // 0,128,128 */
.bg-teal { background:#008080;}
.text-teal { color:#008080;}
/* Blue Group // LightSteelBlue // #B0C4DE // 176,196,222 */
.bg-lightsteelblue { background:#b0c4de;}
.text-lightsteelblue { color:#b0c4de;}
/* Blue Group // PowderBlue // #B0E0E6 // 176,224,230 */
.bg-powderblue { background:#b0e0e6;}
.text-powderblue { color:#b0e0e6;}
/* Blue Group // LightBlue // #ADD8E6 // 173,216,230 */
.bg-lightblue { background:#add8e6;}
.text-lightblue { color:#add8e6;}
/* Blue Group // SkyBlue // #87CEEB // 135,206,235 */
.bg-skyblue { background:#87ceeb;}
.text-skyblue { color:#87ceeb;}
/* Blue Group // LightSkyBlue // #87CEFA // 135,206,250 */
.bg-lightskyblue { background:#87cefa;}
.text-lightskyblue { color:#87cefa;}
/* Blue Group // DeepSkyBlue // #00BFFF // 0,191,255 */
.bg-deepskyblue { background:#00bfff;}
.text-deepskyblue { color:#00bfff;}
/* Blue Group // DodgerBlue // #1E90FF // 30,144,255 */
.bg-dodgerblue { background:#1e90ff;}
.text-dodgerblue { color:#1e90ff;}
/* Blue Group // CornflowerBlue // #6495ED // 100,149,237 */
.bg-cornflowerblue { background:#6495ed;}
.text-cornflowerblue { color:#6495ed;}
/* Blue Group // SteelBlue // #4682B4 // 70,130,180 */
.bg-steelblue { background:#4682b4;}
.text-steelblue { color:#4682b4;}
/* Blue Group // RoyalBlue // #4169E1 // 65,105,225 */
.bg-royalblue { background:#4169e1;}
.text-royalblue { color:#4169e1;}
/* Blue Group // Blue // #0000FF // 0,0,255 */
.bg-blue { background:#0000ff;}
.text-blue { color:#0000ff;}
/* Blue Group // MediumBlue // #0000CD // 0,0,205 */
.bg-mediumblue { background:#0000cd;}
.text-mediumblue { color:#0000cd;}
/* Blue Group // DarkBlue // #00008B // 0,0,139 */
.bg-darkblue { background:#00008b;}
.text-darkblue { color:#00008b;}
/* Blue Group // Navy // #000080 // 0,0,128 */
.bg-navy { background:#000080;}
.text-navy { color:#000080;}
/* Blue Group // MidnightBlue // #191970 // 25,25,112 */
.bg-midnightblue { background:#191970;}
.text-midnightblue { color:#191970;}
/* Purple Group // Lavender // #E6E6FA // 230,230,250 */
.bg-lavender { background:#e6e6fa;}
.text-lavender { color:#e6e6fa;}
/* Purple Group // Thistle // #D8BFD8 // 216,191,216 */
.bg-thistle { background:#d8bfd8;}
.text-thistle { color:#d8bfd8;}
/* Purple Group // Plum // #DDA0DD // 221,160,221 */
.bg-plum { background:#dda0dd;}
.text-plum { color:#dda0dd;}
/* Purple Group // Violet // #EE82EE // 238,130,238 */
.bg-violet { background:#ee82ee;}
.text-violet { color:#ee82ee;}
/* Purple Group // Orchid // #DA70D6 // 218,112,214 */
.bg-orchid { background:#da70d6;}
.text-orchid { color:#da70d6;}
/* Purple Group // Fuchsia // #FF00FF // 255,0,255 */
.bg-fuchsia { background:#ff00ff;}
.text-fuchsia { color:#ff00ff;}
/* Purple Group // Magenta // #FF00FF // 255,0,255 */
.bg-magenta { background:#ff00ff;}
.text-magenta { color:#ff00ff;}
/* Purple Group // MediumOrchid // #BA55D3 // 186,85,211 */
.bg-mediumorchid { background:#ba55d3;}
.text-mediumorchid { color:#ba55d3;}
/* Purple Group // MediumPurple // #9370DB // 147,112,219 */
.bg-mediumpurple { background:#9370db;}
.text-mediumpurple { color:#9370db;}
/* Purple Group // BlueViolet // #8A2BE2 // 138,43,226 */
.bg-blueviolet { background:#8a2be2;}
.text-blueviolet { color:#8a2be2;}
/* Purple Group // DarkViolet // #9400D3 // 148,0,211 */
.bg-darkviolet { background:#9400d3;}
.text-darkviolet { color:#9400d3;}
/* Purple Group // DarkOrchid // #9932CC // 153,50,204 */
.bg-darkorchid { background:#9932cc;}
.text-darkorchid { color:#9932cc;}
/* Purple Group // DarkMagenta // #8B008B // 139,0,139 */
.bg-darkmagenta { background:#8b008b;}
.text-darkmagenta { color:#8b008b;}
/* Purple Group // Purple // #800080 // 128,0,128 */
.bg-purple { background:#800080;}
.text-purple { color:#800080;}
/* Purple Group // Indigo // #4B0082 // 75,0,130 */
.bg-indigo { background:#4b0082;}
.text-indigo { color:#4b0082;}
/* Purple Group // DarkSlateBlue // #483D8B // 72,61,139 */
.bg-darkslateblue { background:#483d8b;}
.text-darkslateblue { color:#483d8b;}
/* Purple Group // SlateBlue // #6A5ACD // 106,90,205 */
.bg-slateblue { background:#6a5acd;}
.text-slateblue { color:#6a5acd;}
/* Purple Group // MediumSlateBlue // #7B68EE // 123,104,238 */
.bg-mediumslateblue { background:#7b68ee;}
.text-mediumslateblue { color:#7b68ee;}
/* White Group // White // #FFFFFF // 255,255,255 */
.bg-white { background:#ffffff;}
.text-white { color:#ffffff;}
/* White Group // Snow // #FFFAFA // 255,250,250 */
.bg-snow { background:#fffafa;}
.text-snow { color:#fffafa;}
/* White Group // Honeydew // #F0FFF0 // 240,255,240 */
.bg-honeydew { background:#f0fff0;}
.text-honeydew { color:#f0fff0;}
/* White Group // MintCream // #F5FFFA // 245,255,250 */
.bg-mintcream { background:#f5fffa;}
.text-mintcream { color:#f5fffa;}
/* White Group // Azure // #F0FFFF // 240,255,255 */
.bg-azure { background:#f0ffff;}
.text-azure { color:#f0ffff;}
/* White Group // AliceBlue // #F0F8FF // 240,248,255 */
.bg-aliceblue { background:#f0f8ff;}
.text-aliceblue { color:#f0f8ff;}
/* White Group // GhostWhite // #F8F8FF // 248,248,255 */
.bg-ghostwhite { background:#f8f8ff;}
.text-ghostwhite { color:#f8f8ff;}
/* White Group // WhiteSmoke // #F5F5F5 // 245,245,245 */
.bg-whitesmoke { background:#f5f5f5;}
.text-whitesmoke { color:#f5f5f5;}
/* White Group // Seashell // #FFF5EE // 255,245,238 */
.bg-seashell { background:#fff5ee;}
.text-seashell { color:#fff5ee;}
/* White Group // Beige // #F5F5DC // 245,245,220 */
.bg-beige { background:#f5f5dc;}
.text-beige { color:#f5f5dc;}
/* White Group // OldLace // #FDF5E6 // 253,245,230 */
.bg-oldlace { background:#fdf5e6;}
.text-oldlace { color:#fdf5e6;}
/* White Group // FloralWhite // #FFFAF0 // 255,250,240 */
.bg-floralwhite { background:#fffaf0;}
.text-floralwhite { color:#fffaf0;}
/* White Group // Ivory // #FFFFF0 // 255,255,240 */
.bg-ivory { background:#fffff0;}
.text-ivory { color:#fffff0;}
/* White Group // AntiqueWhite // #FAEBD7 // 250,235,215 */
.bg-antiquewhite { background:#faebd7;}
.text-antiquewhite { color:#faebd7;}
/* White Group // Linen // #FAF0E6 // 250,240,230 */
.bg-linen { background:#faf0e6;}
.text-linen { color:#faf0e6;}
/* White Group // LavenderBlush // #FFF0F5 // 255,240,245 */
.bg-lavenderblush { background:#fff0f5;}
.text-lavenderblush { color:#fff0f5;}
/* White Group // MistyRose // #FFE4E1 // 255,228,225 */
.bg-mistyrose { background:#ffe4e1;}
.text-mistyrose { color:#ffe4e1;}
/* Gray Group // Gainsboro // #DCDCDC // 220,220,220 */
.bg-gainsboro { background:#dcdcdc;}
.text-gainsboro { color:#dcdcdc;}
/* Gray Group // LightGray // #D3D3D3 // 211,211,211 */
.bg-lightgray { background:#d3d3d3;}
.text-lightgray { color:#d3d3d3;}
/* Gray Group // Silver // #C0C0C0 // 192,192,192 */
.bg-silver { background:#c0c0c0;}
.text-silver { color:#c0c0c0;}
/* Gray Group // DarkGray // #A9A9A9 // 169,169,169 */
.bg-darkgray { background:#a9a9a9;}
.text-darkgray { color:#a9a9a9;}
/* Gray Group // Gray // #808080 // 128,128,128 */
.bg-gray { background:#808080;}
.text-gray { color:#808080;}
/* Gray Group // DimGray // #696969 // 105,105,105 */
.bg-dimgray { background:#696969;}
.text-dimgray { color:#696969;}
/* Gray Group // LightSlateGray // #778899 // 119,136,153 */
.bg-lightslategray { background:#778899;}
.text-lightslategray { color:#778899;}
/* Gray Group // SlateGray // #708090 // 112,128,144 */
.bg-slategray { background:#708090;}
.text-slategray { color:#708090;}
/* Gray Group // DarkSlateGray // #2F4F4F // 47,79,79 */
.bg-darkslategray { background:#2f4f4f;}
.text-darkslategray { color:#2f4f4f;}
/* Gray Group // Black // #000000 // 0,0,0 */
.bg-black { background:#000000;}
.text-black { color:#000000;}

CSS

/* Red Group // LightSalmon // #FFA07A // 255,160,122 */
.bg-lightsalmon { background-color: var(--lightsalmon);}
.text-lightsalmon { color: var(--lightsalmon);}
.btn-lightsalmon { color: var(--lightsalmon);}
.btn-lightsalmon:hover { color: var(--lightsalmon);}
.btn-lightsalmon:active { color: var(--lightsalmon);}
.btn-lightsalmon:visited { color: var(--lightsalmon);}
/* Red Group // Salmon // #FA8072 // 250,128,114 */
.bg-salmon { background-color: var(--salmon);}
.text-salmon { color: var(--salmon);}
.btn-salmon { color: var(--salmon);}
.btn-salmon:hover { color: var(--salmon);}
.btn-salmon:active { color: var(--salmon);}
.btn-salmon:visited { color: var(--salmon);}
/* Red Group // DarkSalmon // #E9967A // 233,150,122 */
.bg-darksalmon { background-color: var(--darksalmon);}
.text-darksalmon { color: var(--darksalmon);}
.btn-darksalmon { color: var(--darksalmon);}
.btn-darksalmon:hover { color: var(--darksalmon);}
.btn-darksalmon:active { color: var(--darksalmon);}
.btn-darksalmon:visited { color: var(--darksalmon);}
/* Red Group // LightCoral // #F08080 // 240,128,128 */
.bg-lightcoral { background-color: var(--lightcoral);}
.text-lightcoral { color: var(--lightcoral);}
.btn-lightcoral { color: var(--lightcoral);}
.btn-lightcoral:hover { color: var(--lightcoral);}
.btn-lightcoral:active { color: var(--lightcoral);}
.btn-lightcoral:visited { color: var(--lightcoral);}
/* Red Group // IndianRed // #CD5C5C // 205,92,92 */
.bg-indianred { background-color: var(--indianred);}
.text-indianred { color: var(--indianred);}
.btn-indianred { color: var(--indianred);}
.btn-indianred:hover { color: var(--indianred);}
.btn-indianred:active { color: var(--indianred);}
.btn-indianred:visited { color: var(--indianred);}
/* Red Group // Crimson // #DC143C // 220,20,60 */
.bg-crimson { background-color: var(--crimson);}
.text-crimson { color: var(--crimson);}
.btn-crimson { color: var(--crimson);}
.btn-crimson:hover { color: var(--crimson);}
.btn-crimson:active { color: var(--crimson);}
.btn-crimson:visited { color: var(--crimson);}
/* Red Group // Firebrick // #B22222 // 178,34,34 */
.bg-firebrick { background-color: var(--firebrick);}
.text-firebrick { color: var(--firebrick);}
.btn-firebrick { color: var(--firebrick);}
.btn-firebrick:hover { color: var(--firebrick);}
.btn-firebrick:active { color: var(--firebrick);}
.btn-firebrick:visited { color: var(--firebrick);}
/* Red Group // DarkRed // #8B0000 // 139,0,0 */
.bg-darkred { background-color: var(--darkred);}
.text-darkred { color: var(--darkred);}
.btn-darkred { color: var(--darkred);}
.btn-darkred:hover { color: var(--darkred);}
.btn-darkred:active { color: var(--darkred);}
.btn-darkred:visited { color: var(--darkred);}
/* Red Group // Red // #FF0000 // 255,0,0 */
.bg-red { background-color: var(--red);}
.text-red { color: var(--red);}
.btn-red { color: var(--red);}
.btn-red:hover { color: var(--red);}
.btn-red:active { color: var(--red);}
.btn-red:visited { color: var(--red);}
/* Pink Group // Pink // #FFC0CB // 255,192,203 */
.bg-pink { background-color: var(--pink);}
.text-pink { color: var(--pink);}
.btn-pink { color: var(--pink);}
.btn-pink:hover { color: var(--pink);}
.btn-pink:active { color: var(--pink);}
.btn-pink:visited { color: var(--pink);}
/* Pink Group // LightPink // #FFB6C1 // 255,182,193 */
.bg-lightpink { background-color: var(--lightpink);}
.text-lightpink { color: var(--lightpink);}
.btn-lightpink { color: var(--lightpink);}
.btn-lightpink:hover { color: var(--lightpink);}
.btn-lightpink:active { color: var(--lightpink);}
.btn-lightpink:visited { color: var(--lightpink);}
/* Pink Group // HotPink // #FF69B4 // 255,105,180 */
.bg-hotpink { background-color: var(--hotpink);}
.text-hotpink { color: var(--hotpink);}
.btn-hotpink { color: var(--hotpink);}
.btn-hotpink:hover { color: var(--hotpink);}
.btn-hotpink:active { color: var(--hotpink);}
.btn-hotpink:visited { color: var(--hotpink);}
/* Pink Group // DeepPink // #FF1493 // 255,20,147 */
.bg-deeppink { background-color: var(--deeppink);}
.text-deeppink { color: var(--deeppink);}
.btn-deeppink { color: var(--deeppink);}
.btn-deeppink:hover { color: var(--deeppink);}
.btn-deeppink:active { color: var(--deeppink);}
.btn-deeppink:visited { color: var(--deeppink);}
/* Pink Group // PaleVioletRed // #DB7093 // 219,112,147 */
.bg-palevioletred { background-color: var(--palevioletred);}
.text-palevioletred { color: var(--palevioletred);}
.btn-palevioletred { color: var(--palevioletred);}
.btn-palevioletred:hover { color: var(--palevioletred);}
.btn-palevioletred:active { color: var(--palevioletred);}
.btn-palevioletred:visited { color: var(--palevioletred);}
/* Pink Group // MediumVioletRed // #C71585 // 199,21,133 */
.bg-mediumvioletred { background-color: var(--mediumvioletred);}
.text-mediumvioletred { color: var(--mediumvioletred);}
.btn-mediumvioletred { color: var(--mediumvioletred);}
.btn-mediumvioletred:hover { color: var(--mediumvioletred);}
.btn-mediumvioletred:active { color: var(--mediumvioletred);}
.btn-mediumvioletred:visited { color: var(--mediumvioletred);}
/* Orange Group // OrangeRed // #FF4500 // 255,69,0 */
.bg-orangered { background-color: var(--orangered);}
.text-orangered { color: var(--orangered);}
.btn-orangered { color: var(--orangered);}
.btn-orangered:hover { color: var(--orangered);}
.btn-orangered:active { color: var(--orangered);}
.btn-orangered:visited { color: var(--orangered);}
/* Orange Group // Tomato // #FF6347 // 255,99,71 */
.bg-tomato { background-color: var(--tomato);}
.text-tomato { color: var(--tomato);}
.btn-tomato { color: var(--tomato);}
.btn-tomato:hover { color: var(--tomato);}
.btn-tomato:active { color: var(--tomato);}
.btn-tomato:visited { color: var(--tomato);}
/* Orange Group // Coral // #FF7F50 // 255,127,80 */
.bg-coral { background-color: var(--coral);}
.text-coral { color: var(--coral);}
.btn-coral { color: var(--coral);}
.btn-coral:hover { color: var(--coral);}
.btn-coral:active { color: var(--coral);}
.btn-coral:visited { color: var(--coral);}
/* Orange Group // DarkOrange // #FF8C00 // 255,140,0 */
.bg-darkorange { background-color: var(--darkorange);}
.text-darkorange { color: var(--darkorange);}
.btn-darkorange { color: var(--darkorange);}
.btn-darkorange:hover { color: var(--darkorange);}
.btn-darkorange:active { color: var(--darkorange);}
.btn-darkorange:visited { color: var(--darkorange);}
/* Orange Group // Orange // #FFA500 // 255,165,0 */
.bg-orange { background-color: var(--orange);}
.text-orange { color: var(--orange);}
.btn-orange { color: var(--orange);}
.btn-orange:hover { color: var(--orange);}
.btn-orange:active { color: var(--orange);}
.btn-orange:visited { color: var(--orange);}
/* Yellow Group // Yellow // #FFFF00 // 255,255,0 */
.bg-yellow { background-color: var(--yellow);}
.text-yellow { color: var(--yellow);}
.btn-yellow { color: var(--yellow);}
.btn-yellow:hover { color: var(--yellow);}
.btn-yellow:active { color: var(--yellow);}
.btn-yellow:visited { color: var(--yellow);}
/* Yellow Group // LightYellow // #FFFFE0 // 255,255,224 */
.bg-lightyellow { background-color: var(--lightyellow);}
.text-lightyellow { color: var(--lightyellow);}
.btn-lightyellow { color: var(--lightyellow);}
.btn-lightyellow:hover { color: var(--lightyellow);}
.btn-lightyellow:active { color: var(--lightyellow);}
.btn-lightyellow:visited { color: var(--lightyellow);}
/* Yellow Group // LemonChiffon // #FFFACD // 255,250,205 */
.bg-lemonchiffon { background-color: var(--lemonchiffon);}
.text-lemonchiffon { color: var(--lemonchiffon);}
.btn-lemonchiffon { color: var(--lemonchiffon);}
.btn-lemonchiffon:hover { color: var(--lemonchiffon);}
.btn-lemonchiffon:active { color: var(--lemonchiffon);}
.btn-lemonchiffon:visited { color: var(--lemonchiffon);}
/* Yellow Group // LightGoldenrodYellow // #FAFAD2 // 250,250,210 */
.bg-lightgoldenrodyellow { background-color: var(--lightgoldenrodyellow);}
.text-lightgoldenrodyellow { color: var(--lightgoldenrodyellow);}
.btn-lightgoldenrodyellow { color: var(--lightgoldenrodyellow);}
.btn-lightgoldenrodyellow:hover { color: var(--lightgoldenrodyellow);}
.btn-lightgoldenrodyellow:active { color: var(--lightgoldenrodyellow);}
.btn-lightgoldenrodyellow:visited { color: var(--lightgoldenrodyellow);}
/* Yellow Group // PapayaWhip // #FFEFD5 // 255,239,213 */
.bg-papayawhip { background-color: var(--papayawhip);}
.text-papayawhip { color: var(--papayawhip);}
.btn-papayawhip { color: var(--papayawhip);}
.btn-papayawhip:hover { color: var(--papayawhip);}
.btn-papayawhip:active { color: var(--papayawhip);}
.btn-papayawhip:visited { color: var(--papayawhip);}
/* Yellow Group // Moccasin // #FFE4B5 // 255,228,181 */
.bg-moccasin { background-color: var(--moccasin);}
.text-moccasin { color: var(--moccasin);}
.btn-moccasin { color: var(--moccasin);}
.btn-moccasin:hover { color: var(--moccasin);}
.btn-moccasin:active { color: var(--moccasin);}
.btn-moccasin:visited { color: var(--moccasin);}
/* Yellow Group // PeachPuff // #FFDAB9 // 255,218,185 */
.bg-peachpuff { background-color: var(--peachpuff);}
.text-peachpuff { color: var(--peachpuff);}
.btn-peachpuff { color: var(--peachpuff);}
.btn-peachpuff:hover { color: var(--peachpuff);}
.btn-peachpuff:active { color: var(--peachpuff);}
.btn-peachpuff:visited { color: var(--peachpuff);}
/* Yellow Group // PaleGoldenrod // #EEE8AA // 238,232,170 */
.bg-palegoldenrod { background-color: var(--palegoldenrod);}
.text-palegoldenrod { color: var(--palegoldenrod);}
.btn-palegoldenrod { color: var(--palegoldenrod);}
.btn-palegoldenrod:hover { color: var(--palegoldenrod);}
.btn-palegoldenrod:active { color: var(--palegoldenrod);}
.btn-palegoldenrod:visited { color: var(--palegoldenrod);}
/* Yellow Group // Khaki // #F0E68C // 240,230,140 */
.bg-khaki { background-color: var(--khaki);}
.text-khaki { color: var(--khaki);}
.btn-khaki { color: var(--khaki);}
.btn-khaki:hover { color: var(--khaki);}
.btn-khaki:active { color: var(--khaki);}
.btn-khaki:visited { color: var(--khaki);}
/* Yellow Group // DarkKhaki // #BDB76B // 189,183,107 */
.bg-darkkhaki { background-color: var(--darkkhaki);}
.text-darkkhaki { color: var(--darkkhaki);}
.btn-darkkhaki { color: var(--darkkhaki);}
.btn-darkkhaki:hover { color: var(--darkkhaki);}
.btn-darkkhaki:active { color: var(--darkkhaki);}
.btn-darkkhaki:visited { color: var(--darkkhaki);}
/* Yellow Group // Gold // #FFD700 // 255,215,0 */
.bg-gold { background-color: var(--gold);}
.text-gold { color: var(--gold);}
.btn-gold { color: var(--gold);}
.btn-gold:hover { color: var(--gold);}
.btn-gold:active { color: var(--gold);}
.btn-gold:visited { color: var(--gold);}
/* Brown Group // Cornsilk // #FFF8DC // 255,248,220 */
.bg-cornsilk { background-color: var(--cornsilk);}
.text-cornsilk { color: var(--cornsilk);}
.btn-cornsilk { color: var(--cornsilk);}
.btn-cornsilk:hover { color: var(--cornsilk);}
.btn-cornsilk:active { color: var(--cornsilk);}
.btn-cornsilk:visited { color: var(--cornsilk);}
/* Brown Group // BlanchedAlmond // #FFEBCD // 255,235,205 */
.bg-blanchedalmond { background-color: var(--blanchedalmond);}
.text-blanchedalmond { color: var(--blanchedalmond);}
.btn-blanchedalmond { color: var(--blanchedalmond);}
.btn-blanchedalmond:hover { color: var(--blanchedalmond);}
.btn-blanchedalmond:active { color: var(--blanchedalmond);}
.btn-blanchedalmond:visited { color: var(--blanchedalmond);}
/* Brown Group // Bisque // #FFE4C4 // 255,228,196 */
.bg-bisque { background-color: var(--bisque);}
.text-bisque { color: var(--bisque);}
.btn-bisque { color: var(--bisque);}
.btn-bisque:hover { color: var(--bisque);}
.btn-bisque:active { color: var(--bisque);}
.btn-bisque:visited { color: var(--bisque);}
/* Brown Group // NavajoWhite // #FFDEAD // 255,222,173 */
.bg-navajowhite { background-color: var(--navajowhite);}
.text-navajowhite { color: var(--navajowhite);}
.btn-navajowhite { color: var(--navajowhite);}
.btn-navajowhite:hover { color: var(--navajowhite);}
.btn-navajowhite:active { color: var(--navajowhite);}
.btn-navajowhite:visited { color: var(--navajowhite);}
/* Brown Group // Wheat // #F5DEB3 // 245,222,179 */
.bg-wheat { background-color: var(--wheat);}
.text-wheat { color: var(--wheat);}
.btn-wheat { color: var(--wheat);}
.btn-wheat:hover { color: var(--wheat);}
.btn-wheat:active { color: var(--wheat);}
.btn-wheat:visited { color: var(--wheat);}
/* Brown Group // Burlywood // #DEB887 // 222,184,135 */
.bg-burlywood { background-color: var(--burlywood);}
.text-burlywood { color: var(--burlywood);}
.btn-burlywood { color: var(--burlywood);}
.btn-burlywood:hover { color: var(--burlywood);}
.btn-burlywood:active { color: var(--burlywood);}
.btn-burlywood:visited { color: var(--burlywood);}
/* Brown Group // Tan // #D2B48C // 210,180,140 */
.bg-tan { background-color: var(--tan);}
.text-tan { color: var(--tan);}
.btn-tan { color: var(--tan);}
.btn-tan:hover { color: var(--tan);}
.btn-tan:active { color: var(--tan);}
.btn-tan:visited { color: var(--tan);}
/* Brown Group // RosyBrown // #BC8F8F // 188,143,143 */
.bg-rosybrown { background-color: var(--rosybrown);}
.text-rosybrown { color: var(--rosybrown);}
.btn-rosybrown { color: var(--rosybrown);}
.btn-rosybrown:hover { color: var(--rosybrown);}
.btn-rosybrown:active { color: var(--rosybrown);}
.btn-rosybrown:visited { color: var(--rosybrown);}
/* Brown Group // SandyBrown // #F4A460 // 244,164,96 */
.bg-sandybrown { background-color: var(--sandybrown);}
.text-sandybrown { color: var(--sandybrown);}
.btn-sandybrown { color: var(--sandybrown);}
.btn-sandybrown:hover { color: var(--sandybrown);}
.btn-sandybrown:active { color: var(--sandybrown);}
.btn-sandybrown:visited { color: var(--sandybrown);}
/* Brown Group // Goldenrod // #DAA520 // 218,165,32 */
.bg-goldenrod { background-color: var(--goldenrod);}
.text-goldenrod { color: var(--goldenrod);}
.btn-goldenrod { color: var(--goldenrod);}
.btn-goldenrod:hover { color: var(--goldenrod);}
.btn-goldenrod:active { color: var(--goldenrod);}
.btn-goldenrod:visited { color: var(--goldenrod);}
/* Brown Group // DarkGoldenrod // #B8860B // 184,134,11 */
.bg-darkgoldenrod { background-color: var(--darkgoldenrod);}
.text-darkgoldenrod { color: var(--darkgoldenrod);}
.btn-darkgoldenrod { color: var(--darkgoldenrod);}
.btn-darkgoldenrod:hover { color: var(--darkgoldenrod);}
.btn-darkgoldenrod:active { color: var(--darkgoldenrod);}
.btn-darkgoldenrod:visited { color: var(--darkgoldenrod);}
/* Brown Group // Peru // #CD853F // 205,133,63 */
.bg-peru { background-color: var(--peru);}
.text-peru { color: var(--peru);}
.btn-peru { color: var(--peru);}
.btn-peru:hover { color: var(--peru);}
.btn-peru:active { color: var(--peru);}
.btn-peru:visited { color: var(--peru);}
/* Brown Group // Chocolate // #D2691E // 210,105,30 */
.bg-chocolate { background-color: var(--chocolate);}
.text-chocolate { color: var(--chocolate);}
.btn-chocolate { color: var(--chocolate);}
.btn-chocolate:hover { color: var(--chocolate);}
.btn-chocolate:active { color: var(--chocolate);}
.btn-chocolate:visited { color: var(--chocolate);}
/* Brown Group // SaddleBrown // #8B4513 // 139,69,19 */
.bg-saddlebrown { background-color: var(--saddlebrown);}
.text-saddlebrown { color: var(--saddlebrown);}
.btn-saddlebrown { color: var(--saddlebrown);}
.btn-saddlebrown:hover { color: var(--saddlebrown);}
.btn-saddlebrown:active { color: var(--saddlebrown);}
.btn-saddlebrown:visited { color: var(--saddlebrown);}
/* Brown Group // Sienna // #A0522D // 160,82,45 */
.bg-sienna { background-color: var(--sienna);}
.text-sienna { color: var(--sienna);}
.btn-sienna { color: var(--sienna);}
.btn-sienna:hover { color: var(--sienna);}
.btn-sienna:active { color: var(--sienna);}
.btn-sienna:visited { color: var(--sienna);}
/* Brown Group // Brown // #A52A2A // 165,42,42 */
.bg-brown { background-color: var(--brown);}
.text-brown { color: var(--brown);}
.btn-brown { color: var(--brown);}
.btn-brown:hover { color: var(--brown);}
.btn-brown:active { color: var(--brown);}
.btn-brown:visited { color: var(--brown);}
/* Brown Group // Maroon // #800000 // 128,0,0 */
.bg-maroon { background-color: var(--maroon);}
.text-maroon { color: var(--maroon);}
.btn-maroon { color: var(--maroon);}
.btn-maroon:hover { color: var(--maroon);}
.btn-maroon:active { color: var(--maroon);}
.btn-maroon:visited { color: var(--maroon);}
/* Green Group // DarkOliveGreen // #556B2F // 85,107,47 */
.bg-darkolivegreen { background-color: var(--darkolivegreen);}
.text-darkolivegreen { color: var(--darkolivegreen);}
.btn-darkolivegreen { color: var(--darkolivegreen);}
.btn-darkolivegreen:hover { color: var(--darkolivegreen);}
.btn-darkolivegreen:active { color: var(--darkolivegreen);}
.btn-darkolivegreen:visited { color: var(--darkolivegreen);}
/* Green Group // Olive // #808000 // 128,128,0 */
.bg-olive { background-color: var(--olive);}
.text-olive { color: var(--olive);}
.btn-olive { color: var(--olive);}
.btn-olive:hover { color: var(--olive);}
.btn-olive:active { color: var(--olive);}
.btn-olive:visited { color: var(--olive);}
/* Green Group // OliveDrab // #6B8E23 // 107,142,35 */
.bg-olivedrab { background-color: var(--olivedrab);}
.text-olivedrab { color: var(--olivedrab);}
.btn-olivedrab { color: var(--olivedrab);}
.btn-olivedrab:hover { color: var(--olivedrab);}
.btn-olivedrab:active { color: var(--olivedrab);}
.btn-olivedrab:visited { color: var(--olivedrab);}
/* Green Group // YellowGreen // #9ACD32 // 154,205,50 */
.bg-yellowgreen { background-color: var(--yellowgreen);}
.text-yellowgreen { color: var(--yellowgreen);}
.btn-yellowgreen { color: var(--yellowgreen);}
.btn-yellowgreen:hover { color: var(--yellowgreen);}
.btn-yellowgreen:active { color: var(--yellowgreen);}
.btn-yellowgreen:visited { color: var(--yellowgreen);}
/* Green Group // LimeGreen // #32CD32 // 50,205,50 */
.bg-limegreen { background-color: var(--limegreen);}
.text-limegreen { color: var(--limegreen);}
.btn-limegreen { color: var(--limegreen);}
.btn-limegreen:hover { color: var(--limegreen);}
.btn-limegreen:active { color: var(--limegreen);}
.btn-limegreen:visited { color: var(--limegreen);}
/* Green Group // Lime // #00FF00 // 0,255,0 */
.bg-lime { background-color: var(--lime);}
.text-lime { color: var(--lime);}
.btn-lime { color: var(--lime);}
.btn-lime:hover { color: var(--lime);}
.btn-lime:active { color: var(--lime);}
.btn-lime:visited { color: var(--lime);}
/* Green Group // LawnGreen // #7CFC00 // 124,252,0 */
.bg-lawngreen { background-color: var(--lawngreen);}
.text-lawngreen { color: var(--lawngreen);}
.btn-lawngreen { color: var(--lawngreen);}
.btn-lawngreen:hover { color: var(--lawngreen);}
.btn-lawngreen:active { color: var(--lawngreen);}
.btn-lawngreen:visited { color: var(--lawngreen);}
/* Green Group // Chartreuse // #7FFF00 // 127,255,0 */
.bg-chartreuse { background-color: var(--chartreuse);}
.text-chartreuse { color: var(--chartreuse);}
.btn-chartreuse { color: var(--chartreuse);}
.btn-chartreuse:hover { color: var(--chartreuse);}
.btn-chartreuse:active { color: var(--chartreuse);}
.btn-chartreuse:visited { color: var(--chartreuse);}
/* Green Group // GreenYellow // #ADFF2F // 173,255,47 */
.bg-greenyellow { background-color: var(--greenyellow);}
.text-greenyellow { color: var(--greenyellow);}
.btn-greenyellow { color: var(--greenyellow);}
.btn-greenyellow:hover { color: var(--greenyellow);}
.btn-greenyellow:active { color: var(--greenyellow);}
.btn-greenyellow:visited { color: var(--greenyellow);}
/* Green Group // SpringGreen // #00FF7F // 0,255,127 */
.bg-springgreen { background-color: var(--springgreen);}
.text-springgreen { color: var(--springgreen);}
.btn-springgreen { color: var(--springgreen);}
.btn-springgreen:hover { color: var(--springgreen);}
.btn-springgreen:active { color: var(--springgreen);}
.btn-springgreen:visited { color: var(--springgreen);}
/* Green Group // MediumSpringGreen, // #00FA9A // 0,250,154 */
.bg-mediumspringgreen, { background-color: var(--mediumspringgreen,);}
.text-mediumspringgreen, { color: var(--mediumspringgreen,);}
.btn-mediumspringgreen, { color: var(--mediumspringgreen,);}
.btn-mediumspringgreen,:hover { color: var(--mediumspringgreen,);}
.btn-mediumspringgreen,:active { color: var(--mediumspringgreen,);}
.btn-mediumspringgreen,:visited { color: var(--mediumspringgreen,);}
/* Green Group // LightGreen // #90EE90 // 144,238,144 */
.bg-lightgreen { background-color: var(--lightgreen);}
.text-lightgreen { color: var(--lightgreen);}
.btn-lightgreen { color: var(--lightgreen);}
.btn-lightgreen:hover { color: var(--lightgreen);}
.btn-lightgreen:active { color: var(--lightgreen);}
.btn-lightgreen:visited { color: var(--lightgreen);}
/* Green Group // PaleGreen // #98FB98 // 152,251,152 */
.bg-palegreen { background-color: var(--palegreen);}
.text-palegreen { color: var(--palegreen);}
.btn-palegreen { color: var(--palegreen);}
.btn-palegreen:hover { color: var(--palegreen);}
.btn-palegreen:active { color: var(--palegreen);}
.btn-palegreen:visited { color: var(--palegreen);}
/* Green Group // DarkSeaGreen // #8FBC8F // 143,188,143 */
.bg-darkseagreen { background-color: var(--darkseagreen);}
.text-darkseagreen { color: var(--darkseagreen);}
.btn-darkseagreen { color: var(--darkseagreen);}
.btn-darkseagreen:hover { color: var(--darkseagreen);}
.btn-darkseagreen:active { color: var(--darkseagreen);}
.btn-darkseagreen:visited { color: var(--darkseagreen);}
/* Green Group // MediumAquamarine // #66CDAA // 102,205,170 */
.bg-mediumaquamarine { background-color: var(--mediumaquamarine);}
.text-mediumaquamarine { color: var(--mediumaquamarine);}
.btn-mediumaquamarine { color: var(--mediumaquamarine);}
.btn-mediumaquamarine:hover { color: var(--mediumaquamarine);}
.btn-mediumaquamarine:active { color: var(--mediumaquamarine);}
.btn-mediumaquamarine:visited { color: var(--mediumaquamarine);}
/* Green Group // MediumSeaGreen // #3CB371 // 60,179,113 */
.bg-mediumseagreen { background-color: var(--mediumseagreen);}
.text-mediumseagreen { color: var(--mediumseagreen);}
.btn-mediumseagreen { color: var(--mediumseagreen);}
.btn-mediumseagreen:hover { color: var(--mediumseagreen);}
.btn-mediumseagreen:active { color: var(--mediumseagreen);}
.btn-mediumseagreen:visited { color: var(--mediumseagreen);}
/* Green Group // SeaGreen // #2E8B57 // 46,139,87 */
.bg-seagreen { background-color: var(--seagreen);}
.text-seagreen { color: var(--seagreen);}
.btn-seagreen { color: var(--seagreen);}
.btn-seagreen:hover { color: var(--seagreen);}
.btn-seagreen:active { color: var(--seagreen);}
.btn-seagreen:visited { color: var(--seagreen);}
/* Green Group // ForestGreen // #228B22 // 34,139,34 */
.bg-forestgreen { background-color: var(--forestgreen);}
.text-forestgreen { color: var(--forestgreen);}
.btn-forestgreen { color: var(--forestgreen);}
.btn-forestgreen:hover { color: var(--forestgreen);}
.btn-forestgreen:active { color: var(--forestgreen);}
.btn-forestgreen:visited { color: var(--forestgreen);}
/* Green Group // Green // #008000 // 0,128,0 */
.bg-green { background-color: var(--green);}
.text-green { color: var(--green);}
.btn-green { color: var(--green);}
.btn-green:hover { color: var(--green);}
.btn-green:active { color: var(--green);}
.btn-green:visited { color: var(--green);}
/* Green Group // DarkGreen // #006400 // 0,100,0 */
.bg-darkgreen { background-color: var(--darkgreen);}
.text-darkgreen { color: var(--darkgreen);}
.btn-darkgreen { color: var(--darkgreen);}
.btn-darkgreen:hover { color: var(--darkgreen);}
.btn-darkgreen:active { color: var(--darkgreen);}
.btn-darkgreen:visited { color: var(--darkgreen);}
/* Cyan Group // Aqua // #00FFFF // 0,255,255 */
.bg-aqua { background-color: var(--aqua);}
.text-aqua { color: var(--aqua);}
.btn-aqua { color: var(--aqua);}
.btn-aqua:hover { color: var(--aqua);}
.btn-aqua:active { color: var(--aqua);}
.btn-aqua:visited { color: var(--aqua);}
/* Cyan Group // Cyan // #00FFFF // 0,255,255 */
.bg-cyan { background-color: var(--cyan);}
.text-cyan { color: var(--cyan);}
.btn-cyan { color: var(--cyan);}
.btn-cyan:hover { color: var(--cyan);}
.btn-cyan:active { color: var(--cyan);}
.btn-cyan:visited { color: var(--cyan);}
/* Cyan Group // LightCyan // #E0FFFF // 224,255,255 */
.bg-lightcyan { background-color: var(--lightcyan);}
.text-lightcyan { color: var(--lightcyan);}
.btn-lightcyan { color: var(--lightcyan);}
.btn-lightcyan:hover { color: var(--lightcyan);}
.btn-lightcyan:active { color: var(--lightcyan);}
.btn-lightcyan:visited { color: var(--lightcyan);}
/* Cyan Group // PaleTurquoise // #AFEEEE // 175,238,238 */
.bg-paleturquoise { background-color: var(--paleturquoise);}
.text-paleturquoise { color: var(--paleturquoise);}
.btn-paleturquoise { color: var(--paleturquoise);}
.btn-paleturquoise:hover { color: var(--paleturquoise);}
.btn-paleturquoise:active { color: var(--paleturquoise);}
.btn-paleturquoise:visited { color: var(--paleturquoise);}
/* Cyan Group // Aquamarine // #7FFFD4 // 127,255,212 */
.bg-aquamarine { background-color: var(--aquamarine);}
.text-aquamarine { color: var(--aquamarine);}
.btn-aquamarine { color: var(--aquamarine);}
.btn-aquamarine:hover { color: var(--aquamarine);}
.btn-aquamarine:active { color: var(--aquamarine);}
.btn-aquamarine:visited { color: var(--aquamarine);}
/* Cyan Group // Turquoise // #40E0D0 // 64,224,208 */
.bg-turquoise { background-color: var(--turquoise);}
.text-turquoise { color: var(--turquoise);}
.btn-turquoise { color: var(--turquoise);}
.btn-turquoise:hover { color: var(--turquoise);}
.btn-turquoise:active { color: var(--turquoise);}
.btn-turquoise:visited { color: var(--turquoise);}
/* Cyan Group // MediumTurquoise // #48D1CC // 72,209,204 */
.bg-mediumturquoise { background-color: var(--mediumturquoise);}
.text-mediumturquoise { color: var(--mediumturquoise);}
.btn-mediumturquoise { color: var(--mediumturquoise);}
.btn-mediumturquoise:hover { color: var(--mediumturquoise);}
.btn-mediumturquoise:active { color: var(--mediumturquoise);}
.btn-mediumturquoise:visited { color: var(--mediumturquoise);}
/* Cyan Group // DarkTurquoise // #00CED1 // 0,206,209 */
.bg-darkturquoise { background-color: var(--darkturquoise);}
.text-darkturquoise { color: var(--darkturquoise);}
.btn-darkturquoise { color: var(--darkturquoise);}
.btn-darkturquoise:hover { color: var(--darkturquoise);}
.btn-darkturquoise:active { color: var(--darkturquoise);}
.btn-darkturquoise:visited { color: var(--darkturquoise);}
/* Cyan Group // LightSeaGreen // #20B2AA // 32,178,170 */
.bg-lightseagreen { background-color: var(--lightseagreen);}
.text-lightseagreen { color: var(--lightseagreen);}
.btn-lightseagreen { color: var(--lightseagreen);}
.btn-lightseagreen:hover { color: var(--lightseagreen);}
.btn-lightseagreen:active { color: var(--lightseagreen);}
.btn-lightseagreen:visited { color: var(--lightseagreen);}
/* Cyan Group // CadetBlue // #5F9EA0 // 95,158,160 */
.bg-cadetblue { background-color: var(--cadetblue);}
.text-cadetblue { color: var(--cadetblue);}
.btn-cadetblue { color: var(--cadetblue);}
.btn-cadetblue:hover { color: var(--cadetblue);}
.btn-cadetblue:active { color: var(--cadetblue);}
.btn-cadetblue:visited { color: var(--cadetblue);}
/* Cyan Group // DarkCyan // #008B8B // 0,139,139 */
.bg-darkcyan { background-color: var(--darkcyan);}
.text-darkcyan { color: var(--darkcyan);}
.btn-darkcyan { color: var(--darkcyan);}
.btn-darkcyan:hover { color: var(--darkcyan);}
.btn-darkcyan:active { color: var(--darkcyan);}
.btn-darkcyan:visited { color: var(--darkcyan);}
/* Cyan Group // Teal // #008080 // 0,128,128 */
.bg-teal { background-color: var(--teal);}
.text-teal { color: var(--teal);}
.btn-teal { color: var(--teal);}
.btn-teal:hover { color: var(--teal);}
.btn-teal:active { color: var(--teal);}
.btn-teal:visited { color: var(--teal);}
/* Blue Group // LightSteelBlue // #B0C4DE // 176,196,222 */
.bg-lightsteelblue { background-color: var(--lightsteelblue);}
.text-lightsteelblue { color: var(--lightsteelblue);}
.btn-lightsteelblue { color: var(--lightsteelblue);}
.btn-lightsteelblue:hover { color: var(--lightsteelblue);}
.btn-lightsteelblue:active { color: var(--lightsteelblue);}
.btn-lightsteelblue:visited { color: var(--lightsteelblue);}
/* Blue Group // PowderBlue // #B0E0E6 // 176,224,230 */
.bg-powderblue { background-color: var(--powderblue);}
.text-powderblue { color: var(--powderblue);}
.btn-powderblue { color: var(--powderblue);}
.btn-powderblue:hover { color: var(--powderblue);}
.btn-powderblue:active { color: var(--powderblue);}
.btn-powderblue:visited { color: var(--powderblue);}
/* Blue Group // LightBlue // #ADD8E6 // 173,216,230 */
.bg-lightblue { background-color: var(--lightblue);}
.text-lightblue { color: var(--lightblue);}
.btn-lightblue { color: var(--lightblue);}
.btn-lightblue:hover { color: var(--lightblue);}
.btn-lightblue:active { color: var(--lightblue);}
.btn-lightblue:visited { color: var(--lightblue);}
/* Blue Group // SkyBlue // #87CEEB // 135,206,235 */
.bg-skyblue { background-color: var(--skyblue);}
.text-skyblue { color: var(--skyblue);}
.btn-skyblue { color: var(--skyblue);}
.btn-skyblue:hover { color: var(--skyblue);}
.btn-skyblue:active { color: var(--skyblue);}
.btn-skyblue:visited { color: var(--skyblue);}
/* Blue Group // LightSkyBlue // #87CEFA // 135,206,250 */
.bg-lightskyblue { background-color: var(--lightskyblue);}
.text-lightskyblue { color: var(--lightskyblue);}
.btn-lightskyblue { color: var(--lightskyblue);}
.btn-lightskyblue:hover { color: var(--lightskyblue);}
.btn-lightskyblue:active { color: var(--lightskyblue);}
.btn-lightskyblue:visited { color: var(--lightskyblue);}
/* Blue Group // DeepSkyBlue // #00BFFF // 0,191,255 */
.bg-deepskyblue { background-color: var(--deepskyblue);}
.text-deepskyblue { color: var(--deepskyblue);}
.btn-deepskyblue { color: var(--deepskyblue);}
.btn-deepskyblue:hover { color: var(--deepskyblue);}
.btn-deepskyblue:active { color: var(--deepskyblue);}
.btn-deepskyblue:visited { color: var(--deepskyblue);}
/* Blue Group // DodgerBlue // #1E90FF // 30,144,255 */
.bg-dodgerblue { background-color: var(--dodgerblue);}
.text-dodgerblue { color: var(--dodgerblue);}
.btn-dodgerblue { color: var(--dodgerblue);}
.btn-dodgerblue:hover { color: var(--dodgerblue);}
.btn-dodgerblue:active { color: var(--dodgerblue);}
.btn-dodgerblue:visited { color: var(--dodgerblue);}
/* Blue Group // CornflowerBlue // #6495ED // 100,149,237 */
.bg-cornflowerblue { background-color: var(--cornflowerblue);}
.text-cornflowerblue { color: var(--cornflowerblue);}
.btn-cornflowerblue { color: var(--cornflowerblue);}
.btn-cornflowerblue:hover { color: var(--cornflowerblue);}
.btn-cornflowerblue:active { color: var(--cornflowerblue);}
.btn-cornflowerblue:visited { color: var(--cornflowerblue);}
/* Blue Group // SteelBlue // #4682B4 // 70,130,180 */
.bg-steelblue { background-color: var(--steelblue);}
.text-steelblue { color: var(--steelblue);}
.btn-steelblue { color: var(--steelblue);}
.btn-steelblue:hover { color: var(--steelblue);}
.btn-steelblue:active { color: var(--steelblue);}
.btn-steelblue:visited { color: var(--steelblue);}
/* Blue Group // RoyalBlue // #4169E1 // 65,105,225 */
.bg-royalblue { background-color: var(--royalblue);}
.text-royalblue { color: var(--royalblue);}
.btn-royalblue { color: var(--royalblue);}
.btn-royalblue:hover { color: var(--royalblue);}
.btn-royalblue:active { color: var(--royalblue);}
.btn-royalblue:visited { color: var(--royalblue);}
/* Blue Group // Blue // #0000FF // 0,0,255 */
.bg-blue { background-color: var(--blue);}
.text-blue { color: var(--blue);}
.btn-blue { color: var(--blue);}
.btn-blue:hover { color: var(--blue);}
.btn-blue:active { color: var(--blue);}
.btn-blue:visited { color: var(--blue);}
/* Blue Group // MediumBlue // #0000CD // 0,0,205 */
.bg-mediumblue { background-color: var(--mediumblue);}
.text-mediumblue { color: var(--mediumblue);}
.btn-mediumblue { color: var(--mediumblue);}
.btn-mediumblue:hover { color: var(--mediumblue);}
.btn-mediumblue:active { color: var(--mediumblue);}
.btn-mediumblue:visited { color: var(--mediumblue);}
/* Blue Group // DarkBlue // #00008B // 0,0,139 */
.bg-darkblue { background-color: var(--darkblue);}
.text-darkblue { color: var(--darkblue);}
.btn-darkblue { color: var(--darkblue);}
.btn-darkblue:hover { color: var(--darkblue);}
.btn-darkblue:active { color: var(--darkblue);}
.btn-darkblue:visited { color: var(--darkblue);}
/* Blue Group // Navy // #000080 // 0,0,128 */
.bg-navy { background-color: var(--navy);}
.text-navy { color: var(--navy);}
.btn-navy { color: var(--navy);}
.btn-navy:hover { color: var(--navy);}
.btn-navy:active { color: var(--navy);}
.btn-navy:visited { color: var(--navy);}
/* Blue Group // MidnightBlue // #191970 // 25,25,112 */
.bg-midnightblue { background-color: var(--midnightblue);}
.text-midnightblue { color: var(--midnightblue);}
.btn-midnightblue { color: var(--midnightblue);}
.btn-midnightblue:hover { color: var(--midnightblue);}
.btn-midnightblue:active { color: var(--midnightblue);}
.btn-midnightblue:visited { color: var(--midnightblue);}
/* Purple Group // Lavender // #E6E6FA // 230,230,250 */
.bg-lavender { background-color: var(--lavender);}
.text-lavender { color: var(--lavender);}
.btn-lavender { color: var(--lavender);}
.btn-lavender:hover { color: var(--lavender);}
.btn-lavender:active { color: var(--lavender);}
.btn-lavender:visited { color: var(--lavender);}
/* Purple Group // Thistle // #D8BFD8 // 216,191,216 */
.bg-thistle { background-color: var(--thistle);}
.text-thistle { color: var(--thistle);}
.btn-thistle { color: var(--thistle);}
.btn-thistle:hover { color: var(--thistle);}
.btn-thistle:active { color: var(--thistle);}
.btn-thistle:visited { color: var(--thistle);}
/* Purple Group // Plum // #DDA0DD // 221,160,221 */
.bg-plum { background-color: var(--plum);}
.text-plum { color: var(--plum);}
.btn-plum { color: var(--plum);}
.btn-plum:hover { color: var(--plum);}
.btn-plum:active { color: var(--plum);}
.btn-plum:visited { color: var(--plum);}
/* Purple Group // Violet // #EE82EE // 238,130,238 */
.bg-violet { background-color: var(--violet);}
.text-violet { color: var(--violet);}
.btn-violet { color: var(--violet);}
.btn-violet:hover { color: var(--violet);}
.btn-violet:active { color: var(--violet);}
.btn-violet:visited { color: var(--violet);}
/* Purple Group // Orchid // #DA70D6 // 218,112,214 */
.bg-orchid { background-color: var(--orchid);}
.text-orchid { color: var(--orchid);}
.btn-orchid { color: var(--orchid);}
.btn-orchid:hover { color: var(--orchid);}
.btn-orchid:active { color: var(--orchid);}
.btn-orchid:visited { color: var(--orchid);}
/* Purple Group // Fuchsia // #FF00FF // 255,0,255 */
.bg-fuchsia { background-color: var(--fuchsia);}
.text-fuchsia { color: var(--fuchsia);}
.btn-fuchsia { color: var(--fuchsia);}
.btn-fuchsia:hover { color: var(--fuchsia);}
.btn-fuchsia:active { color: var(--fuchsia);}
.btn-fuchsia:visited { color: var(--fuchsia);}
/* Purple Group // Magenta // #FF00FF // 255,0,255 */
.bg-magenta { background-color: var(--magenta);}
.text-magenta { color: var(--magenta);}
.btn-magenta { color: var(--magenta);}
.btn-magenta:hover { color: var(--magenta);}
.btn-magenta:active { color: var(--magenta);}
.btn-magenta:visited { color: var(--magenta);}
/* Purple Group // MediumOrchid // #BA55D3 // 186,85,211 */
.bg-mediumorchid { background-color: var(--mediumorchid);}
.text-mediumorchid { color: var(--mediumorchid);}
.btn-mediumorchid { color: var(--mediumorchid);}
.btn-mediumorchid:hover { color: var(--mediumorchid);}
.btn-mediumorchid:active { color: var(--mediumorchid);}
.btn-mediumorchid:visited { color: var(--mediumorchid);}
/* Purple Group // MediumPurple // #9370DB // 147,112,219 */
.bg-mediumpurple { background-color: var(--mediumpurple);}
.text-mediumpurple { color: var(--mediumpurple);}
.btn-mediumpurple { color: var(--mediumpurple);}
.btn-mediumpurple:hover { color: var(--mediumpurple);}
.btn-mediumpurple:active { color: var(--mediumpurple);}
.btn-mediumpurple:visited { color: var(--mediumpurple);}
/* Purple Group // BlueViolet // #8A2BE2 // 138,43,226 */
.bg-blueviolet { background-color: var(--blueviolet);}
.text-blueviolet { color: var(--blueviolet);}
.btn-blueviolet { color: var(--blueviolet);}
.btn-blueviolet:hover { color: var(--blueviolet);}
.btn-blueviolet:active { color: var(--blueviolet);}
.btn-blueviolet:visited { color: var(--blueviolet);}
/* Purple Group // DarkViolet // #9400D3 // 148,0,211 */
.bg-darkviolet { background-color: var(--darkviolet);}
.text-darkviolet { color: var(--darkviolet);}
.btn-darkviolet { color: var(--darkviolet);}
.btn-darkviolet:hover { color: var(--darkviolet);}
.btn-darkviolet:active { color: var(--darkviolet);}
.btn-darkviolet:visited { color: var(--darkviolet);}
/* Purple Group // DarkOrchid // #9932CC // 153,50,204 */
.bg-darkorchid { background-color: var(--darkorchid);}
.text-darkorchid { color: var(--darkorchid);}
.btn-darkorchid { color: var(--darkorchid);}
.btn-darkorchid:hover { color: var(--darkorchid);}
.btn-darkorchid:active { color: var(--darkorchid);}
.btn-darkorchid:visited { color: var(--darkorchid);}
/* Purple Group // DarkMagenta // #8B008B // 139,0,139 */
.bg-darkmagenta { background-color: var(--darkmagenta);}
.text-darkmagenta { color: var(--darkmagenta);}
.btn-darkmagenta { color: var(--darkmagenta);}
.btn-darkmagenta:hover { color: var(--darkmagenta);}
.btn-darkmagenta:active { color: var(--darkmagenta);}
.btn-darkmagenta:visited { color: var(--darkmagenta);}
/* Purple Group // Purple // #800080 // 128,0,128 */
.bg-purple { background-color: var(--purple);}
.text-purple { color: var(--purple);}
.btn-purple { color: var(--purple);}
.btn-purple:hover { color: var(--purple);}
.btn-purple:active { color: var(--purple);}
.btn-purple:visited { color: var(--purple);}
/* Purple Group // Indigo // #4B0082 // 75,0,130 */
.bg-indigo { background-color: var(--indigo);}
.text-indigo { color: var(--indigo);}
.btn-indigo { color: var(--indigo);}
.btn-indigo:hover { color: var(--indigo);}
.btn-indigo:active { color: var(--indigo);}
.btn-indigo:visited { color: var(--indigo);}
/* Purple Group // DarkSlateBlue // #483D8B // 72,61,139 */
.bg-darkslateblue { background-color: var(--darkslateblue);}
.text-darkslateblue { color: var(--darkslateblue);}
.btn-darkslateblue { color: var(--darkslateblue);}
.btn-darkslateblue:hover { color: var(--darkslateblue);}
.btn-darkslateblue:active { color: var(--darkslateblue);}
.btn-darkslateblue:visited { color: var(--darkslateblue);}
/* Purple Group // SlateBlue // #6A5ACD // 106,90,205 */
.bg-slateblue { background-color: var(--slateblue);}
.text-slateblue { color: var(--slateblue);}
.btn-slateblue { color: var(--slateblue);}
.btn-slateblue:hover { color: var(--slateblue);}
.btn-slateblue:active { color: var(--slateblue);}
.btn-slateblue:visited { color: var(--slateblue);}
/* Purple Group // MediumSlateBlue // #7B68EE // 123,104,238 */
.bg-mediumslateblue { background-color: var(--mediumslateblue);}
.text-mediumslateblue { color: var(--mediumslateblue);}
.btn-mediumslateblue { color: var(--mediumslateblue);}
.btn-mediumslateblue:hover { color: var(--mediumslateblue);}
.btn-mediumslateblue:active { color: var(--mediumslateblue);}
.btn-mediumslateblue:visited { color: var(--mediumslateblue);}
/* White Group // White // #FFFFFF // 255,255,255 */
.bg-white { background-color: var(--white);}
.text-white { color: var(--white);}
.btn-white { color: var(--white);}
.btn-white:hover { color: var(--white);}
.btn-white:active { color: var(--white);}
.btn-white:visited { color: var(--white);}
/* White Group // Snow // #FFFAFA // 255,250,250 */
.bg-snow { background-color: var(--snow);}
.text-snow { color: var(--snow);}
.btn-snow { color: var(--snow);}
.btn-snow:hover { color: var(--snow);}
.btn-snow:active { color: var(--snow);}
.btn-snow:visited { color: var(--snow);}
/* White Group // Honeydew // #F0FFF0 // 240,255,240 */
.bg-honeydew { background-color: var(--honeydew);}
.text-honeydew { color: var(--honeydew);}
.btn-honeydew { color: var(--honeydew);}
.btn-honeydew:hover { color: var(--honeydew);}
.btn-honeydew:active { color: var(--honeydew);}
.btn-honeydew:visited { color: var(--honeydew);}
/* White Group // MintCream // #F5FFFA // 245,255,250 */
.bg-mintcream { background-color: var(--mintcream);}
.text-mintcream { color: var(--mintcream);}
.btn-mintcream { color: var(--mintcream);}
.btn-mintcream:hover { color: var(--mintcream);}
.btn-mintcream:active { color: var(--mintcream);}
.btn-mintcream:visited { color: var(--mintcream);}
/* White Group // Azure // #F0FFFF // 240,255,255 */
.bg-azure { background-color: var(--azure);}
.text-azure { color: var(--azure);}
.btn-azure { color: var(--azure);}
.btn-azure:hover { color: var(--azure);}
.btn-azure:active { color: var(--azure);}
.btn-azure:visited { color: var(--azure);}
/* White Group // AliceBlue // #F0F8FF // 240,248,255 */
.bg-aliceblue { background-color: var(--aliceblue);}
.text-aliceblue { color: var(--aliceblue);}
.btn-aliceblue { color: var(--aliceblue);}
.btn-aliceblue:hover { color: var(--aliceblue);}
.btn-aliceblue:active { color: var(--aliceblue);}
.btn-aliceblue:visited { color: var(--aliceblue);}
/* White Group // GhostWhite // #F8F8FF // 248,248,255 */
.bg-ghostwhite { background-color: var(--ghostwhite);}
.text-ghostwhite { color: var(--ghostwhite);}
.btn-ghostwhite { color: var(--ghostwhite);}
.btn-ghostwhite:hover { color: var(--ghostwhite);}
.btn-ghostwhite:active { color: var(--ghostwhite);}
.btn-ghostwhite:visited { color: var(--ghostwhite);}
/* White Group // WhiteSmoke // #F5F5F5 // 245,245,245 */
.bg-whitesmoke { background-color: var(--whitesmoke);}
.text-whitesmoke { color: var(--whitesmoke);}
.btn-whitesmoke { color: var(--whitesmoke);}
.btn-whitesmoke:hover { color: var(--whitesmoke);}
.btn-whitesmoke:active { color: var(--whitesmoke);}
.btn-whitesmoke:visited { color: var(--whitesmoke);}
/* White Group // Seashell // #FFF5EE // 255,245,238 */
.bg-seashell { background-color: var(--seashell);}
.text-seashell { color: var(--seashell);}
.btn-seashell { color: var(--seashell);}
.btn-seashell:hover { color: var(--seashell);}
.btn-seashell:active { color: var(--seashell);}
.btn-seashell:visited { color: var(--seashell);}
/* White Group // Beige // #F5F5DC // 245,245,220 */
.bg-beige { background-color: var(--beige);}
.text-beige { color: var(--beige);}
.btn-beige { color: var(--beige);}
.btn-beige:hover { color: var(--beige);}
.btn-beige:active { color: var(--beige);}
.btn-beige:visited { color: var(--beige);}
/* White Group // OldLace // #FDF5E6 // 253,245,230 */
.bg-oldlace { background-color: var(--oldlace);}
.text-oldlace { color: var(--oldlace);}
.btn-oldlace { color: var(--oldlace);}
.btn-oldlace:hover { color: var(--oldlace);}
.btn-oldlace:active { color: var(--oldlace);}
.btn-oldlace:visited { color: var(--oldlace);}
/* White Group // FloralWhite // #FFFAF0 // 255,250,240 */
.bg-floralwhite { background-color: var(--floralwhite);}
.text-floralwhite { color: var(--floralwhite);}
.btn-floralwhite { color: var(--floralwhite);}
.btn-floralwhite:hover { color: var(--floralwhite);}
.btn-floralwhite:active { color: var(--floralwhite);}
.btn-floralwhite:visited { color: var(--floralwhite);}
/* White Group // Ivory // #FFFFF0 // 255,255,240 */
.bg-ivory { background-color: var(--ivory);}
.text-ivory { color: var(--ivory);}
.btn-ivory { color: var(--ivory);}
.btn-ivory:hover { color: var(--ivory);}
.btn-ivory:active { color: var(--ivory);}
.btn-ivory:visited { color: var(--ivory);}
/* White Group // AntiqueWhite // #FAEBD7 // 250,235,215 */
.bg-antiquewhite { background-color: var(--antiquewhite);}
.text-antiquewhite { color: var(--antiquewhite);}
.btn-antiquewhite { color: var(--antiquewhite);}
.btn-antiquewhite:hover { color: var(--antiquewhite);}
.btn-antiquewhite:active { color: var(--antiquewhite);}
.btn-antiquewhite:visited { color: var(--antiquewhite);}
/* White Group // Linen // #FAF0E6 // 250,240,230 */
.bg-linen { background-color: var(--linen);}
.text-linen { color: var(--linen);}
.btn-linen { color: var(--linen);}
.btn-linen:hover { color: var(--linen);}
.btn-linen:active { color: var(--linen);}
.btn-linen:visited { color: var(--linen);}
/* White Group // LavenderBlush // #FFF0F5 // 255,240,245 */
.bg-lavenderblush { background-color: var(--lavenderblush);}
.text-lavenderblush { color: var(--lavenderblush);}
.btn-lavenderblush { color: var(--lavenderblush);}
.btn-lavenderblush:hover { color: var(--lavenderblush);}
.btn-lavenderblush:active { color: var(--lavenderblush);}
.btn-lavenderblush:visited { color: var(--lavenderblush);}
/* White Group // MistyRose // #FFE4E1 // 255,228,225 */
.bg-mistyrose { background-color: var(--mistyrose);}
.text-mistyrose { color: var(--mistyrose);}
.btn-mistyrose { color: var(--mistyrose);}
.btn-mistyrose:hover { color: var(--mistyrose);}
.btn-mistyrose:active { color: var(--mistyrose);}
.btn-mistyrose:visited { color: var(--mistyrose);}
/* Gray Group // Gainsboro // #DCDCDC // 220,220,220 */
.bg-gainsboro { background-color: var(--gainsboro);}
.text-gainsboro { color: var(--gainsboro);}
.btn-gainsboro { color: var(--gainsboro);}
.btn-gainsboro:hover { color: var(--gainsboro);}
.btn-gainsboro:active { color: var(--gainsboro);}
.btn-gainsboro:visited { color: var(--gainsboro);}
/* Gray Group // LightGray // #D3D3D3 // 211,211,211 */
.bg-lightgray { background-color: var(--lightgray);}
.text-lightgray { color: var(--lightgray);}
.btn-lightgray { color: var(--lightgray);}
.btn-lightgray:hover { color: var(--lightgray);}
.btn-lightgray:active { color: var(--lightgray);}
.btn-lightgray:visited { color: var(--lightgray);}
/* Gray Group // Silver // #C0C0C0 // 192,192,192 */
.bg-silver { background-color: var(--silver);}
.text-silver { color: var(--silver);}
.btn-silver { color: var(--silver);}
.btn-silver:hover { color: var(--silver);}
.btn-silver:active { color: var(--silver);}
.btn-silver:visited { color: var(--silver);}
/* Gray Group // DarkGray // #A9A9A9 // 169,169,169 */
.bg-darkgray { background-color: var(--darkgray);}
.text-darkgray { color: var(--darkgray);}
.btn-darkgray { color: var(--darkgray);}
.btn-darkgray:hover { color: var(--darkgray);}
.btn-darkgray:active { color: var(--darkgray);}
.btn-darkgray:visited { color: var(--darkgray);}
/* Gray Group // Gray // #808080 // 128,128,128 */
.bg-gray { background-color: var(--gray);}
.text-gray { color: var(--gray);}
.btn-gray { color: var(--gray);}
.btn-gray:hover { color: var(--gray);}
.btn-gray:active { color: var(--gray);}
.btn-gray:visited { color: var(--gray);}
/* Gray Group // DimGray // #696969 // 105,105,105 */
.bg-dimgray { background-color: var(--dimgray);}
.text-dimgray { color: var(--dimgray);}
.btn-dimgray { color: var(--dimgray);}
.btn-dimgray:hover { color: var(--dimgray);}
.btn-dimgray:active { color: var(--dimgray);}
.btn-dimgray:visited { color: var(--dimgray);}
/* Gray Group // LightSlateGray // #778899 // 119,136,153 */
.bg-lightslategray { background-color: var(--lightslategray);}
.text-lightslategray { color: var(--lightslategray);}
.btn-lightslategray { color: var(--lightslategray);}
.btn-lightslategray:hover { color: var(--lightslategray);}
.btn-lightslategray:active { color: var(--lightslategray);}
.btn-lightslategray:visited { color: var(--lightslategray);}
/* Gray Group // SlateGray // #708090 // 112,128,144 */
.bg-slategray { background-color: var(--slategray);}
.text-slategray { color: var(--slategray);}
.btn-slategray { color: var(--slategray);}
.btn-slategray:hover { color: var(--slategray);}
.btn-slategray:active { color: var(--slategray);}
.btn-slategray:visited { color: var(--slategray);}
/* Gray Group // DarkSlateGray // #2F4F4F // 47,79,79 */
.bg-darkslategray { background-color: var(--darkslategray);}
.text-darkslategray { color: var(--darkslategray);}
.btn-darkslategray { color: var(--darkslategray);}
.btn-darkslategray:hover { color: var(--darkslategray);}
.btn-darkslategray:active { color: var(--darkslategray);}
.btn-darkslategray:visited { color: var(--darkslategray);}
/* Gray Group // Black // #000000 // 0,0,0 */
.bg-black { background-color: var(--black);}
.text-black { color: var(--black);}
.btn-black { color: var(--black);}
.btn-black:hover { color: var(--black);}
.btn-black:active { color: var(--black);}
.btn-black:visited { color: var(--black);}