| Swatch | Name | HEX Code | RGB | Category | Copy |
|---|---|---|---|---|---|
| Red | |||||
| Red | #ff0000 | 255, 0, 0 | Red | ||
| Maroon | #800000 | 128, 0, 0 | Red | ||
| Crimson | #dc143c | 220, 20, 60 | Red | ||
| Tomato | #ff6347 | 255, 99, 71 | Red | ||
| DarkRed | #8b0000 | 139, 0, 0 | Red | ||
| Firebrick | #b22222 | 178, 34, 34 | Red | ||
| IndianRed | #cd5c5c | 205, 92, 92 | Red | ||
| LightCoral | #f08080 | 240, 128, 128 | Red | ||
| Pink | |||||
| Pink | #ffc0cb | 255, 192, 203 | Pink | ||
| DeepPink | #ff1493 | 255, 20, 147 | Pink | ||
| Fuchsia | #ff00ff | 255, 0, 255 | Pink | ||
| HotPink | #ff69b4 | 255, 105, 180 | Pink | ||
| LightPink | #ffb6c1 | 255, 182, 193 | Pink | ||
| Magenta | #ff00ff | 255, 0, 255 | Pink | ||
| MediumVioletRed | #c71585 | 199, 21, 133 | Pink | ||
| MistyRose | #ffe4e1 | 255, 228, 225 | Pink | ||
| PaleVioletRed | #db7093 | 219, 112, 147 | Pink | ||
| Purple | |||||
| Purple | #800080 | 128, 0, 128 | Purple | ||
| Lavender | #e6e6fa | 230, 230, 250 | Purple | ||
| Indigo | #4b0082 | 75, 0, 130 | Purple | ||
| Violet | #ee82ee | 238, 130, 238 | Purple | ||
| RebeccaPurple | #663399 | 102, 51, 153 | Purple | ||
| BlueViolet | #8a2be2 | 138, 43, 226 | Purple | ||
| DarkMagenta | #8b008b | 139, 0, 139 | Purple | ||
| DarkOrchid | #9932cc | 153, 50, 204 | Purple | ||
| DarkViolet | #9400d3 | 148, 0, 211 | Purple | ||
| MediumOrchid | #ba55d3 | 186, 85, 211 | Purple | ||
| MediumPurple | #9370db | 147, 112, 219 | Purple | ||
| Orchid | #da70d6 | 218, 112, 214 | Purple | ||
| Plum | #dda0dd | 221, 160, 221 | Purple | ||
| Thistle | #d8bfd8 | 216, 191, 216 | Purple | ||
| Blue | |||||
| Blue | #0000ff | 0, 0, 255 | Blue | ||
| Navy | #000080 | 0, 0, 128 | Blue | ||
| SlateBlue | #6a5acd | 106, 90, 205 | Blue | ||
| CadetBlue | #5f9ea0 | 95, 158, 160 | Blue | ||
| CornflowerBlue | #6495ed | 100, 149, 237 | Blue | ||
| DarkSlateBlue | #483d8b | 72, 61, 139 | Blue | ||
| DeepSkyBlue | #00bfff | 0, 191, 255 | Blue | ||
| DodgerBlue | #1e90ff | 30, 144, 255 | Blue | ||
| LightBlue | #add8e6 | 173, 216, 230 | Blue | ||
| LightSkyBlue | #87cefa | 135, 206, 250 | Blue | ||
| LightSteelBlue | #b0c4de | 176, 196, 222 | Blue | ||
| MediumBlue | #0000cd | 0, 0, 205 | Blue | ||
| MediumSlateBlue | #7b68ee | 123, 104, 238 | Blue | ||
| MidnightBlue | #191970 | 25, 25, 112 | Blue | ||
| PowderBlue | #b0e0e6 | 176, 224, 230 | Blue | ||
| RoyalBlue | #4169e1 | 65, 105, 225 | Blue | ||
| SkyBlue | #87ceeb | 135, 206, 235 | Blue | ||
| SteelBlue | #4682b4 | 70, 130, 180 | Blue | ||
| Cyan | |||||
| Cyan | #00ffff | 0, 255, 255 | Cyan | ||
| Aqua | #00ffff | 0, 255, 255 | Cyan | ||
| LightCyan | #e0ffff | 224, 255, 255 | Cyan | ||
| Teal | |||||
| Teal | #008080 | 0, 128, 128 | Teal | ||
| Turquoise | #40e0d0 | 64, 224, 208 | Teal | ||
| Aquamarine | #7fffd4 | 127, 255, 212 | Teal | ||
| DarkCyan | #008b8b | 0, 139, 139 | Teal | ||
| DarkTurquoise | #00ced1 | 0, 206, 209 | Teal | ||
| LightSeaGreen | #20b2aa | 32, 178, 170 | Teal | ||
| MediumAquamarine | #66cdaa | 102, 205, 170 | Teal | ||
| MediumTurquoise | #48d1cc | 72, 209, 204 | Teal | ||
| PaleTurquoise | #afeeee | 175, 238, 238 | Teal | ||
| Green | |||||
| Green | #00ff00 | 0, 255, 0 | Green | ||
| Mint | #98fb98 | 152, 251, 152 | Green | ||
| Olive | #808000 | 128, 128, 0 | Green | ||
| Lime | #00ff00 | 0, 255, 0 | Green | ||
| Chartreuse | #7fff00 | 127, 255, 0 | Green | ||
| DarkGreen | #006400 | 0, 100, 0 | Green | ||
| DarkSeaGreen | #8fbc8f | 143, 188, 143 | Green | ||
| ForestGreen | #228b22 | 34, 139, 34 | Green | ||
| GreenYellow | #adff2f | 173, 255, 47 | Green | ||
| LightGreen | #90ee90 | 144, 238, 144 | Green | ||
| MediumSeaGreen | #3cb371 | 60, 179, 113 | Green | ||
| MediumSpringGreen | #00fa9a | 0, 250, 154 | Green | ||
| OliveDrab | #6b8e23 | 107, 142, 35 | Green | ||
| PaleGreen | #98fb98 | 152, 251, 152 | Green | ||
| SeaGreen | #2e8b57 | 46, 139, 87 | Green | ||
| SpringGreen | #00ff7f | 0, 255, 127 | Green | ||
| YellowGreen | #9acd32 | 154, 205, 50 | Green | ||
| Lime | |||||
| Yellow | |||||
| Yellow | #ffff00 | 255, 255, 0 | Yellow | ||
| Gold | #ffd700 | 255, 215, 0 | Yellow | ||
| DarkGoldenrod | #b8860b | 184, 134, 11 | Yellow | ||
| DarkKhaki | #bdb76b | 189, 183, 107 | Yellow | ||
| Goldenrod | #daa520 | 218, 165, 32 | Yellow | ||
| Khaki | #f0e68c | 240, 230, 140 | Yellow | ||
| LightGoldenrodYellow | #fafad2 | 250, 250, 210 | Yellow | ||
| LightYellow | #ffffe0 | 255, 255, 224 | Yellow | ||
| Orange | |||||
| Orange | #ffa500 | 255, 165, 0 | Orange | ||
| Coral | #ff7f50 | 255, 127, 80 | Orange | ||
| Salmon | #fa8072 | 250, 128, 114 | Orange | ||
| Bisque | #ffe4c4 | 255, 228, 196 | Orange | ||
| BlanchedAlmond | #ffebcd | 255, 235, 205 | Orange | ||
| DarkOrange | #ff8c00 | 255, 140, 0 | Orange | ||
| DarkSalmon | #e9967a | 233, 150, 122 | Orange | ||
| LightSalmon | #ffa07a | 255, 160, 122 | Orange | ||
| Moccasin | #ffe4b5 | 255, 228, 181 | Orange | ||
| NavajoWhite | #ffdead | 255, 222, 173 | Orange | ||
| PeachPuff | #ffdab9 | 255, 218, 185 | Orange | ||
| SandyBrown | #f4a460 | 244, 164, 96 | Orange | ||
| Brown | |||||
| Brown | #a52a2a | 165, 42, 42 | Brown | ||
| Beige | #f5f5dc | 245, 245, 220 | Brown | ||
| Burlywood | #deb887 | 222, 184, 135 | Brown | ||
| Chocolate | #d2691e | 210, 105, 30 | Brown | ||
| Peru | #cd853f | 205, 133, 63 | Brown | ||
| RosyBrown | #bc8f8f | 188, 143, 143 | Brown | ||
| SaddleBrown | #8b4513 | 139, 69, 19 | Brown | ||
| Sienna | #a0522d | 160, 82, 45 | Brown | ||
| Tan | #d2b48c | 210, 180, 140 | Brown | ||
| Wheat | #f5deb3 | 245, 222, 179 | Brown | ||
| White | |||||
| White | #ffffff | 255, 255, 255 | White | ||
| AliceBlue | #f0f8ff | 240, 248, 255 | White | ||
| AntiqueWhite | #faebd7 | 250, 235, 215 | White | ||
| Azure | #f0ffff | 240, 255, 255 | White | ||
| GhostWhite | #f8f8ff | 248, 248, 255 | White | ||
| Ivory | #fffff0 | 255, 255, 240 | White | ||
| OldLace | #fdf5e6 | 253, 245, 230 | White | ||
| Snow | #fffafa | 255, 250, 250 | White | ||
| WhiteSmoke | #f5f5f5 | 245, 245, 245 | White | ||
| Gray | |||||
| Gray | #808080 | 128, 128, 128 | Gray | ||
| Silver | #c0c0c0 | 192, 192, 192 | Gray | ||
| DarkGray | #a9a9a9 | 169, 169, 169 | Gray | ||
| DarkSlateGray | #2f4f4f | 47, 79, 79 | Gray | ||
| DimGray | #696969 | 105, 105, 105 | Gray | ||
| Gainsboro | #dcdcdc | 220, 220, 220 | Gray | ||
| LightGray | #d3d3d3 | 211, 211, 211 | Gray | ||
| LightSlateGray | #778899 | 119, 136, 153 | Gray | ||
| Black | |||||
| Black | #000000 | 0, 0, 0 | Black | ||
Complete Guide to CSS Named Colors
CSS named colors are predefined color keywords that can be used in stylesheets without needing hex codes or RGB values. There are 148 named colors in the CSS Color Module Level 4 specification, ranging from common colors like "red" and "blue" to more obscure names like "blanchedalmond" and "rebeccapurple". These named colors provide a convenient way to reference colors in your CSS code with readable, semantic names.
The most widely used CSS named colors include the 17 original HTML colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, and of course orange (added later). Modern CSS supports all 148 named colors, making it easy to write readable stylesheets without memorizing hex codes for common colors.
Each named color has a corresponding hex code, RGB value, and category grouping. The colors are organized into categories like Red, Pink, Purple, Blue, Cyan, Teal, Green, Lime, Yellow, Orange, Brown, White, Gray, and Black. This categorization helps you quickly find colors with similar hues when building your color palette.
While named colors are convenient, they have limitations. The selection is fixed — you cannot create custom named colors — and some names like "lightgray" and "lightgrey" are synonyms that resolve to the same hex value. For precise color control, most professional designers use hex codes, but named colors remain an excellent starting point for prototyping and learning CSS.
Frequently Asked Questions
What are CSS color names?
CSS color names are predefined color keywords that you can use in your stylesheets instead of hex codes or RGB values. Examples include "red", "blue", "green", "coral", "rebeccapurple", and many more. They make CSS code more readable and are supported in all modern browsers.
How many named colors are there?
There are 148 named colors in the CSS Color Module Level 4 specification. This includes the original 16 HTML colors plus many additional colors added over time. The last addition was "rebeccapurple" in 2014, named in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer.
Can I use named colors in production?
Yes, CSS named colors are fully supported in all modern browsers and are safe to use in production. However, for brand colors and precise design requirements, most teams use hex codes (like #FF5733) because named colors offer a limited palette. Named colors are excellent for prototyping, documentation, and educational purposes.
Are CSS color names case-sensitive?
No, CSS color names are case-insensitive. "Red", "RED", and "red" all resolve to the same color. However, the conventional style is to use lowercase for CSS property values, so "color: red;" is the most common format.
What is the difference between "gray" and "grey"?
Both spellings — "gray" (American) and "grey" (British) — are valid CSS color names and refer to the exact same color with hex code #808080. CSS also supports both spellings for "darkgray"/"darkgrey", "lightgray"/"lightgrey", and "slategray"/"slategrey". They are exact synonyms in the CSS specification.