How to Use S3 Colors
There are 3 simple steps to use S3-Colors in your project.
- Download S3 Color from the link above and call s3-colors.css in the head tag <link rel="stylesheet" type="text/css" href="your/path/to/s3-colors.css"> CDN Version: <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/s3colors/1.0/s3-colors.css"> CDN Minified Version: <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/s3colors/1.0/s3-colors.min.css">
- Call color name in your element for text <span class="ColorName">your text</span>
- Call color name in your element for background class="bg-ColorName"
- Color Name are listed below with their details
S3 Colors
| Preview | CSS Color Names | RGB Color | HEX Color | Class for Text | Class for Background |
|---|---|---|---|---|---|
| Preview | AliceBlue | 240, 248, 255 | #f0f8ff | .AliceBlue |
.bg-AliceBlue |
| Preview | AntiqueWhite | 250, 235, 215 | #faebd7 | .AntiqueWhite |
.bg-AntiqueWhite |
| Preview | Aqua | 0, 255, 255 | #00ffff | .Aqua |
.bg-Aqua |
| Preview | Aquamarine | 127, 255, 212 | #7fffd4 | .Aquamarine |
.bg-Aquamarine |
| Preview | Beige | 245, 245, 220 | #f5f5dc | .Beige |
.bg-Beige |
| Preview | Black | 0, 0, 0 | #000000 | .Black |
.bg-Black |
| Preview | BlanchedAlmond | 255, 235, 205 | #ffebcd | .BlanchedAlmond |
.bg-BlanchedAlmond |
| Preview | Blue | 0, 0, 255 | #0000ff | .Blue |
.bg-Blue |
| Preview | BlueViolet | 138, 43, 226 | #8a2be2 | .BlueViolet |
.bg-BlueViolet |
| Preview | Brown | 165, 42, 42 | #a52a2a | .Brown |
.bg-Brown |
| Preview | BurlyWood | 222, 184, 135 | #deb887 | .BurlyWood |
.bg-BurlyWood |
| Preview | CadetBlue | 95, 158, 160 | #5f9ea0 | .CadetBlue |
.bg-CadetBlue |
| Preview | Chartreuse | 127, 255, 0 | #7fff00 | .Chartreuse |
.bg-Chartreuse |
| Preview | Chocolate | 210, 105, 20 | #d2691e | .Chocolate |
.bg-Chocolate |
| Preview | Coral | 255, 127, 80 | #ff7f50 | .Coral |
.bg-Coral |
| Preview | CornflowerBlue | 100, 149, 237 | #6495ed | .CornflowerBlue |
.bg-CornflowerBlue |
| Preview | Cornsilk | 255, 248, 220 | #fff8dc | .Cornsilk |
.bg-Cornsilk |
| Preview | Crimson | 220, 20, 60 | #dc143c | .Crimson |
.bg-Crimson |
| Preview | Cyan | 0, 0, 255 | #00ffff | .Cyan |
.bg-Cyan |
| Preview | DarkBlue | 0, 0, 139 | #00008b | .DarkBlue |
.bg-DarkBlue |
| Preview | DarkCyan | 0, 139, 139 | #008b8b | .DarkCyan |
.bg-DarkCyan |
| Preview | DarkGoldenRod | 184, 134, 11 | #b8860b | .DarkGoldenRod |
.bg-DarkGoldenRod |
| Preview | DarkGray or DarkGrey | 169, 169, 169 | #a9a9a9 | .DarkGray or .DarkGrey |
.bg-DarkGray or .bg-DarkGrey |
| Preview | DarkGreen | 0, 100, 0 | #006400 | .DarkGreen |
.bg-DarkGreen |
| Preview | DarkKhaki | 189, 183, 107 | #bdb76b | .DarkKhaki |
.bg-DarkKhaki |
| Preview | DarkMagenta | 139, 0, 139 | #8b008b | .DarkMagenta |
.bg-DarkMagenta |
| Preview | DarkOliveGreen | 85, 107, 47 | #556b2f | .DarkOliveGreen |
.bg-DarkOliveGreen |
| Preview | Darkorange | 255, 140, 0 | #ff8c00 | .Darkorange |
.bg-Darkorange |
| Preview | DarkOrchid | 255, 140, 0 | #ff8c00 | .DarkOrchid |
.bg-DarkOrchid |
| Preview | DarkRed | 139, 0, 0 | #8b0000 | .DarkRed |
.bg-DarkRed |
| Preview | DarkSalmon | 233, 150, 122 | #e9967a | .DarkSalmon |
.bg-DarkSalmon |
| Preview | DarkSeaGreen | 143, 188, 143 | #8fbc8f | .DarkSeaGreen |
.bg-DarkSeaGreen |
| Preview | DarkSlateBlue | 72, 61, 139 | #483d8b | .DarkSlateBlue |
.bg-DarkSlateBlue |
| Preview | DarkSlateGray | 47, 79, 79 | #2f4f4f | .DarkSlateGray |
.bg-DarkSlateGray |
| Preview | DarkTurquoise | 0, 206, 209 | #00ced1 | .DarkTurquoise |
.bg-DarkTurquoise |
| Preview | DarkViolet | 148, 0, 211 | #9400d3 | .DarkViolet |
.bg-DarkViolet |
| Preview | DeepPink | 255, 20, 147 | #ff1493 | .DeepPink |
.bg-DeepPink |
| Preview | DeepSkyBlue | 0, 191, 255 | #00bfff | .DeepSkyBlue |
.bg-DeepSkyBlue |
| Preview | DimGray | 105, 105, 105 | #696969 | .DimGray |
.bg-DimGray |
| Preview | DodgerBlue | 30, 144, 255 | #1e90ff | .DodgerBlue |
.bg-DodgerBlue |
| Preview | FireBrick | 178, 34, 34 | #b22222 | .FireBrick |
.bg-FireBrick |
| Preview | FloralWhite | 255, 250, 240 | #fffaf0 | .FloralWhite |
.bg-FloralWhite |
| Preview | ForestGreen | 34, 139, 34 | #228b22 | .ForestGreen |
.bg-ForestGreen |
| Preview | Fuchsia | 255, 0, 255 | #ff00ff | .Fuchsia |
.bg-Fuchsia |
| Preview | Gainsboro | 220, 220, 220 | #dcdcdc | .Gainsboro |
.bg-Gainsboro |
| Preview | GhostWhite | 248, 248, 255 | #f8f8ff | .GhostWhite |
.bg-GhostWhite |
| Preview | Gold | 255, 215, 0 | #ffd700 | .Gold |
.bg-Gold |
| Preview | GoldenRod | 218, 165, 32 | #daa520 | .GoldenRod |
.bg-GoldenRod |
| Preview | Gray or Grey | 128, 128, 128 | #808080 | .Gray or .Grey |
.bg-Gray or .bg-Grey |
| Preview | Green | 0, 128, 0 | #008000 | .Green |
.bg-Green |
| Preview | GreenYellow | 173, 255, 47 | #adff2f | .GreenYellow |
.bg-GreenYellow |
| Preview | HoneyDew | 240, 255, 240 | #f0fff0 | .HoneyDew |
.bg-HoneyDew |
| Preview | HotPink | 255, 105, 180 | #ff69b4 | .HotPink |
.bg-HotPink |
| Preview | IndianRed | 205, 92, 92 | #cd5c5c | .IndianRed |
.bg-IndianRed |
| Preview | Indigo | 72, 0, 130 | #4b0082 | .Indigo |
.bg-Indigo |
| Preview | Ivory | 255, 255, 240 | #fffff0 | .Ivory |
.bg-Ivory |
| Preview | Khaki | 240, 230, 140 | #f0e68c | .Khaki |
.bg-Khaki |
| Preview | Lavender | 230, 230, 250 | #e6e6fa | .Lavender |
.bg-Lavender |
| Preview | LavenderBlush | 255, 240, 245 | #fff0f5 | .LavenderBlush |
.bg-LavenderBlush |
| Preview | LawnGreen | 124, 252, 0 | #7cfc00 | .LawnGreen |
.bg-LawnGreen |
| Preview | LemonChiffon | 255, 250, 205 | #fffacd | .LemonChiffon |
.bg-LemonChiffon |
| Preview | LightBlue | 173, 216, 203 | #add8e6 | .LightBlue |
.bg-LightBlue |
| Preview | LightCoral | 240, 128, 128 | #f08080 | .LightCoral |
.bg-LightCoral |
| Preview | LightCyan | 240, 128, 128 | #f08080 | .LightCyan |
.bg-LightCyan |
| Preview | LightGoldenRodYellow | 250, 250, 210 | #fafad2 | .LightGoldenRodYellow |
.bg-LightGoldenRodYellow |
| Preview | LightGray or LightGrey | 211, 211, 211 | #d3d3d3 | .LightGray or .LightGray |
.bg-LightGray or .bg-LightGrey |
| Preview | LightGreen | 144, 238, 144 | #90ee90 | .LightGreen |
.bg-LightGreen |
| Preview | LightPink | 255, 182, 193 | #ffb6c1 | .LightPink |
.bg-LightPink |
| Preview | LightSalmon | 255, 160, 122 | #ffa07a | .LightSalmon |
.bg-LightSalmon |
| Preview | LightSeaGreen | 32, 178, 170 | #20b2aa | .LightSeaGreen |
.bg-LightSeaGreen |
| Preview | LightSkyBlue | 135, 206, 250 | #87cefa | .LightSkyBlue |
.bg-LightSkyBlue |
| Preview | LightSlateGray or LightSlateGrey | 119, 136, 153 | #778899 | .LightSlateGray or .LightSlateGrey |
.bg-LightSlateGray or .bg-LightSlateGrey |
| Preview | LightSteelBlue | 176, 196, 222 | #b0c4de | .LightSteelBlue |
.bg-LightSteelBlue |
| Preview | LightYellow | 255, 255, 224 | #ffffe0 | .LightYellow |
.bg-LightYellow |
| Preview | Lime | 0, 255, 0 | #00ff00 | .Lime |
.bg-Lime |
| Preview | LimeGreen | 50, 205, 50 | #32cd32 | .LimeGreen |
.bg-LimeGreen |
| Preview | Linen | 250, 240, 230 | #faf0e6 | .Linen |
.bg-Linen |
| Preview | Magenta | 255, 0, 255 | #ff00ff | .Magenta |
.bg-Magenta |
| Preview | Maroon | 128, 0, 0 | #800000 | .Maroon |
.bg-Maroon |
| Preview | MediumAquaMarine | 102, 205, 170 | #66cdaa | .MediumAquaMarine |
.bg-MediumAquaMarine |
| Preview | MediumBlue | 0, 0, 205 | #0000cd | .MediumBlue |
.bg-MediumBlue |
| Preview | MediumOrchid | 186, 85, 211 | #ba55d3 | .MediumOrchid |
.bg-MediumOrchid |
| Preview | MediumPurple | 147, 112, 219 | #9370db | .MediumPurple |
.bg-MediumPurple |
| Preview | MediumSeaGreen | 60, 179, 113 | #3cb371 | .MediumSeaGreen |
.bg-MediumSeaGreen |
| Preview | MediumSlateBlue | 123, 104, 238 | #7b68ee | .MediumSlateBlue |
.bg-MediumSlateBlue |
| Preview | MediumSpringGreen | 0, 250, 154 | #00fa9a | .MediumSpringGreen |
.bg-MediumSpringGreen |
| Preview | MediumTurquoise | 72, 209, 204 | #48d1cc | .MediumTurquoise |
.bg-MediumTurquoise |
| Preview | MediumVioletRed | 199, 21, 133 | #c71585 | .MediumVioletRed |
.bg-MediumVioletRed |
| Preview | MidnightBlue | 25, 25, 112 | #191970 | .MidnightBlue |
.bg-MidnightBlue |
| Preview | MintCream | 245, 255, 250 | #f5fffa | .MintCream |
.bg-MintCream |
| Preview | MistyRose | 255, 228, 225 | #ffe4e1 | .MistyRose |
.bg-MistyRose |
| Preview | Moccasin | 255, 228, 181 | #ffe4b5 | .Moccasin |
.bg-Moccasin |
| Preview | NavajoWhite | 255, 222, 173 | #ffdead | .NavajoWhite |
.bg-NavajoWhite |
| Preview | Navy | 0, 0, 128 | #000080 | .Navy |
.bg-Navy |
| Preview | OldLace | 253, 245, 230 | #fdf5e6 | .OldLace |
.bg-OldLace |
| Preview | Olive | 128, 128, 0 | #808000 | .Olive |
.bg-Olive |
| Preview | OliveDrab | 107, 142, 35 | #6b8e23 | .OliveDrab |
.bg-OliveDrab |
| Preview | Orange | 255, 165, 0 | #ffa500 | .Orange |
.bg-Orange |
| Preview | OrangeRed | 255, 69, 0 | #ff4500 | .OrangeRed |
.bg-OrangeRed |
| Preview | Orchid | 218, 112, 214 | #da70d6 | .Orchid |
.bg-Orchid |
| Preview | PaleGoldenRod | 238, 232, 170 | #eee8aa | .PaleGoldenRod |
.bg-PaleGoldenRod |
| Preview | PaleGreen | 152, 251, 152 | #98fb98 | .PaleGreen |
.bg-PaleGreen |
| Preview | PaleTurquoise | 175, 238, 238 | #afeeee | .PaleTurquoise |
.bg-PaleTurquoise |
| Preview | PaleVioletRed | 219, 112, 147 | #db7093 | .PaleVioletRed |
.bg-PaleVioletRed |
| Preview | PapayaWhip | 225, 239, 213 | #ffefd5 | .PapayaWhip |
.bg-PapayaWhip |
| Preview | PeachPuff | 225, 218, 185 | #ffdab9 | .PeachPuff |
.bg-PeachPuff |
| Preview | Peru | 205, 133, 63 | #cd853f | .Peru |
.bg-Peru |
| Preview | Pink | 255, 192, 203 | #ffc0cb | .Pink |
.bg-Pink |
| Preview | Plum | 221, 160, 221 | #dda0dd | .Plum |
.bg-Plum |
| Preview | PowderBlue | 176, 224, 230 | #b0e0e6 | .PowderBlue |
.bg-PowderBlue |
| Preview | Purple | 128, 0, 128 | #800080 | .Purple |
.bg-Purple |
| Preview | Red | 255, 0, 0 | #ff0000 | .Red |
.bg-Red |
| Preview | RosyBrown | 188, 143, 143 | #bc8f8f | .RosyBrown |
.bg-RosyBrown |
| Preview | RoyalBlue | 65, 105, 225 | #4169e1 | .RoyalBlue |
.bg-RoyalBlue |
| Preview | SaddleBrown | 139, 69, 19 | #8b4513 | .SaddleBrown |
.bg-SaddleBrown |
| Preview | Salmon | 250, 128, 114 | #fa8072 | .Salmon |
.bg-Salmon |
| Preview | SandyBrown | 244, 164, 96 | #f4a460 | .SandyBrown |
.bg-SandyBrown |
| Preview | SeaGreen | 46, 139, 87 | #2e8b57 | .SeaGreen |
.bg-SeaGreen |
| Preview | SeaShell | 255, 245, 238 | #fff5ee | .SeaShell |
.bg-SeaShell |
| Preview | Sienna | 160, 82, 45 | #a0522d | .Sienna |
.bg-Sienna |
| Preview | Silver | 192, 192, 192 | #c0c0c0 | .Silver |
.bg-Silver |
| Preview | SkyBlue | 135, 206, 235 | #87ceeb | .SkyBlue |
.bg-SkyBlue |
| Preview | SlateBlue | 106, 90, 205 | #6a5acd | .SlateBlue |
.bg-SlateBlue |
| Preview | SlateGray or SlateGrey | 112, 128, 144 | #708090 | .SlateGray or .SlateGrey |
.bg-SlateGray or .bg-SlateGrey |
| Preview | Snow | 255, 250, 250 | #fffafa | .Snow |
.bg-Snow |
| Preview | SpringGreen | 0, 255, 127 | #00ff7f | .SpringGreen |
.bg-SpringGreen |
| Preview | SteelBlue | 70, 130, 180 | #4682b4 | .SteelBlue |
.bg-SteelBlue |
| Preview | Tan | 210, 180, 140 | #d2b48c | .Tan |
.bg-Tan |
| Preview | Teal | 0, 128, 128 | #008080 | .Teal |
.bg-Teal |
| Preview | Thistle | 216, 191, 216 | #d8bfd8 | .Thistle |
.bg-Thistle |
| Preview | Tomato | 255, 99, 71 | #ff6347 | .Tomato |
.bg-Tomato |
| Preview | Turquoise | 64, 224, 208 | #40e0d0 | .Turquoise |
.bg-Turquoise |
| Preview | Violet | 238, 130, 238 | #ee82ee | .Violet |
.bg-Violet |
| Preview | Wheat | 245, 222, 179 | #f5deb3 | .Wheat |
.bg-Wheat |
| Preview | White | 255, 255, 255 | #ffffff | .White |
.bg-White |
| Preview | WhiteSmoke | 245, 245, 245 | #f5f5f5 | .WhiteSmoke |
.bg-WhiteSmoke |
| Preview | Yellow | 255, 0, 0 | #ffff00 | .Yellow |
.bg-Yellow |
| Preview | YellowGreen | 154, 205, 50 | #9acd32 | .YellowGreen |
.bg-YellowGreen |