How to Use S3 Colors


There are 3 simple steps to use S3-Colors in your project.

Download S3-Color.css
  1. 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">
  2. Call color name in your element for text <span class="ColorName">your text</span>
  3. Call color name in your element for background class="bg-ColorName"
  4. 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 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