CSS color names
Every color a browser knows by name, with its hex, RGB and HSL. There are 148 names but only 139 distinct colors, because 9 of them are exact duplicates of another name. Every value here is what a rendering engine resolves the name to rather than a figure copied from somewhere. 99 names open a full page.
A
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| aliceblue | #F0F8FF | 240, 248, 255 | 208, 100%, 97% | |
| antiquewhite | #FAEBD7 | 250, 235, 215 | 34, 78%, 91% | |
| aqua opens Cyan is the same color as cyan | #00FFFF | 0, 255, 255 | 180, 100%, 50% | |
| aquamarine | #7FFFD4 | 127, 255, 212 | 160, 100%, 75% | |
| azure | #F0FFFF | 240, 255, 255 | 180, 100%, 97% |
B
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| beige | #F5F5DC | 245, 245, 220 | 60, 56%, 91% | |
| bisque | #FFE4C4 | 255, 228, 196 | 33, 100%, 88% | |
| black opens Black screen | #000000 | 0, 0, 0 | 0, 0%, 0% | |
| blanchedalmond | #FFEBCD | 255, 235, 205 | 36, 100%, 90% | |
| blue | #0000FF | 0, 0, 255 | 240, 100%, 50% | |
| blueviolet | #8A2BE2 | 138, 43, 226 | 271, 76%, 53% | |
| brown | #A52A2A | 165, 42, 42 | 0, 59%, 41% | |
| burlywood | #DEB887 | 222, 184, 135 | 34, 57%, 70% |
C
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| cadetblue | #5F9EA0 | 95, 158, 160 | 182, 25%, 50% | |
| chartreuse | #7FFF00 | 127, 255, 0 | 90, 100%, 50% | |
| chocolate | #D2691E | 210, 105, 30 | 25, 75%, 47% | |
| coral | #FF7F50 | 255, 127, 80 | 16, 100%, 66% | |
| cornflowerblue | #6495ED | 100, 149, 237 | 219, 79%, 66% | |
| cornsilk | #FFF8DC | 255, 248, 220 | 48, 100%, 93% | |
| crimson | #DC143C | 220, 20, 60 | 348, 83%, 47% | |
| cyan is the same color as aqua | #00FFFF | 0, 255, 255 | 180, 100%, 50% |
D
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| darkblue | #00008B | 0, 0, 139 | 240, 100%, 27% | |
| darkcyan | #008B8B | 0, 139, 139 | 180, 100%, 27% | |
| darkgoldenrod | #B8860B | 184, 134, 11 | 43, 89%, 38% | |
| darkgray is the same color as darkgrey | #A9A9A9 | 169, 169, 169 | 0, 0%, 66% | |
| darkgreen | #006400 | 0, 100, 0 | 120, 100%, 20% | |
| darkgrey is the same color as darkgray | #A9A9A9 | 169, 169, 169 | 0, 0%, 66% | |
| darkkhaki | #BDB76B | 189, 183, 107 | 56, 38%, 58% | |
| darkmagenta | #8B008B | 139, 0, 139 | 300, 100%, 27% | |
| darkolivegreen | #556B2F | 85, 107, 47 | 82, 39%, 30% | |
| darkorange | #FF8C00 | 255, 140, 0 | 33, 100%, 50% | |
| darkorchid | #9932CC | 153, 50, 204 | 280, 61%, 50% | |
| darkred | #8B0000 | 139, 0, 0 | 0, 100%, 27% | |
| darksalmon | #E9967A | 233, 150, 122 | 15, 72%, 70% | |
| darkseagreen | #8FBC8F | 143, 188, 143 | 120, 25%, 65% | |
| darkslateblue | #483D8B | 72, 61, 139 | 248, 39%, 39% | |
| darkslategray is the same color as darkslategrey | #2F4F4F | 47, 79, 79 | 180, 25%, 25% | |
| darkslategrey is the same color as darkslategray | #2F4F4F | 47, 79, 79 | 180, 25%, 25% | |
| darkturquoise | #00CED1 | 0, 206, 209 | 181, 100%, 41% | |
| darkviolet | #9400D3 | 148, 0, 211 | 282, 100%, 41% | |
| deeppink | #FF1493 | 255, 20, 147 | 328, 100%, 54% | |
| deepskyblue | #00BFFF | 0, 191, 255 | 195, 100%, 50% | |
| dimgray is the same color as dimgrey | #696969 | 105, 105, 105 | 0, 0%, 41% | |
| dimgrey opens Dim gray is the same color as dimgray | #696969 | 105, 105, 105 | 0, 0%, 41% | |
| dodgerblue | #1E90FF | 30, 144, 255 | 210, 100%, 56% |
F
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| firebrick | #B22222 | 178, 34, 34 | 0, 68%, 42% | |
| floralwhite | #FFFAF0 | 255, 250, 240 | 40, 100%, 97% | |
| forestgreen | #228B22 | 34, 139, 34 | 120, 61%, 34% | |
| fuchsia opens Magenta is the same color as magenta | #FF00FF | 255, 0, 255 | 300, 100%, 50% |
G
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| gainsboro | #DCDCDC | 220, 220, 220 | 0, 0%, 86% | |
| ghostwhite | #F8F8FF | 248, 248, 255 | 240, 100%, 99% | |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% | |
| goldenrod | #DAA520 | 218, 165, 32 | 43, 74%, 49% | |
| gray opens Gray screen is the same color as grey | #808080 | 128, 128, 128 | 0, 0%, 50% | |
| green | #008000 | 0, 128, 0 | 120, 100%, 25% | |
| greenyellow | #ADFF2F | 173, 255, 47 | 84, 100%, 59% | |
| grey opens Gray screen is the same color as gray | #808080 | 128, 128, 128 | 0, 0%, 50% |
H
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| honeydew | #F0FFF0 | 240, 255, 240 | 120, 100%, 97% | |
| hotpink | #FF69B4 | 255, 105, 180 | 330, 100%, 71% |
I
K
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| khaki | #F0E68C | 240, 230, 140 | 54, 77%, 75% |
L
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| lavender | #E6E6FA | 230, 230, 250 | 240, 67%, 94% | |
| lavenderblush | #FFF0F5 | 255, 240, 245 | 340, 100%, 97% | |
| lawngreen | #7CFC00 | 124, 252, 0 | 90, 100%, 49% | |
| lemonchiffon | #FFFACD | 255, 250, 205 | 54, 100%, 90% | |
| lightblue | #ADD8E6 | 173, 216, 230 | 195, 53%, 79% | |
| lightcoral | #F08080 | 240, 128, 128 | 0, 79%, 72% | |
| lightcyan | #E0FFFF | 224, 255, 255 | 180, 100%, 94% | |
| lightgoldenrodyellow | #FAFAD2 | 250, 250, 210 | 60, 80%, 90% | |
| lightgray is the same color as lightgrey | #D3D3D3 | 211, 211, 211 | 0, 0%, 83% | |
| lightgreen | #90EE90 | 144, 238, 144 | 120, 73%, 75% | |
| lightgrey is the same color as lightgray | #D3D3D3 | 211, 211, 211 | 0, 0%, 83% | |
| lightpink | #FFB6C1 | 255, 182, 193 | 351, 100%, 86% | |
| lightsalmon | #FFA07A | 255, 160, 122 | 17, 100%, 74% | |
| lightseagreen | #20B2AA | 32, 178, 170 | 177, 70%, 41% | |
| lightskyblue | #87CEFA | 135, 206, 250 | 203, 92%, 75% | |
| lightslategray is the same color as lightslategrey | #778899 | 119, 136, 153 | 210, 14%, 53% | |
| lightslategrey is the same color as lightslategray | #778899 | 119, 136, 153 | 210, 14%, 53% | |
| lightsteelblue | #B0C4DE | 176, 196, 222 | 214, 41%, 78% | |
| lightyellow | #FFFFE0 | 255, 255, 224 | 60, 100%, 94% | |
| lime | #00FF00 | 0, 255, 0 | 120, 100%, 50% | |
| limegreen | #32CD32 | 50, 205, 50 | 120, 61%, 50% | |
| linen | #FAF0E6 | 250, 240, 230 | 30, 67%, 94% |
M
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| magenta is the same color as fuchsia | #FF00FF | 255, 0, 255 | 300, 100%, 50% | |
| maroon | #800000 | 128, 0, 0 | 0, 100%, 25% | |
| mediumaquamarine | #66CDAA | 102, 205, 170 | 160, 51%, 60% | |
| mediumblue | #0000CD | 0, 0, 205 | 240, 100%, 40% | |
| mediumorchid | #BA55D3 | 186, 85, 211 | 288, 59%, 58% | |
| mediumpurple | #9370DB | 147, 112, 219 | 260, 60%, 65% | |
| mediumseagreen | #3CB371 | 60, 179, 113 | 147, 50%, 47% | |
| mediumslateblue | #7B68EE | 123, 104, 238 | 249, 80%, 67% | |
| mediumspringgreen | #00FA9A | 0, 250, 154 | 157, 100%, 49% | |
| mediumturquoise | #48D1CC | 72, 209, 204 | 178, 60%, 55% | |
| mediumvioletred | #C71585 | 199, 21, 133 | 322, 81%, 43% | |
| midnightblue | #191970 | 25, 25, 112 | 240, 64%, 27% | |
| mintcream | #F5FFFA | 245, 255, 250 | 150, 100%, 98% | |
| mistyrose | #FFE4E1 | 255, 228, 225 | 6, 100%, 94% | |
| moccasin | #FFE4B5 | 255, 228, 181 | 38, 100%, 85% |
N
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| navajowhite | #FFDEAD | 255, 222, 173 | 36, 100%, 84% | |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
O
P
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| palegoldenrod | #EEE8AA | 238, 232, 170 | 55, 67%, 80% | |
| palegreen | #98FB98 | 152, 251, 152 | 120, 93%, 79% | |
| paleturquoise | #AFEEEE | 175, 238, 238 | 180, 65%, 81% | |
| palevioletred | #DB7093 | 219, 112, 147 | 340, 60%, 65% | |
| papayawhip | #FFEFD5 | 255, 239, 213 | 37, 100%, 92% | |
| peachpuff | #FFDAB9 | 255, 218, 185 | 28, 100%, 86% | |
| peru | #CD853F | 205, 133, 63 | 30, 59%, 53% | |
| pink | #FFC0CB | 255, 192, 203 | 350, 100%, 88% | |
| plum | #DDA0DD | 221, 160, 221 | 300, 47%, 75% | |
| powderblue | #B0E0E6 | 176, 224, 230 | 187, 52%, 80% | |
| purple | #800080 | 128, 0, 128 | 300, 100%, 25% |
R
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% | |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% | |
| rosybrown | #BC8F8F | 188, 143, 143 | 0, 25%, 65% | |
| royalblue | #4169E1 | 65, 105, 225 | 225, 73%, 57% |
S
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| saddlebrown | #8B4513 | 139, 69, 19 | 25, 76%, 31% | |
| salmon | #FA8072 | 250, 128, 114 | 6, 93%, 71% | |
| sandybrown | #F4A460 | 244, 164, 96 | 28, 87%, 67% | |
| seagreen | #2E8B57 | 46, 139, 87 | 146, 50%, 36% | |
| seashell | #FFF5EE | 255, 245, 238 | 25, 100%, 97% | |
| sienna | #A0522D | 160, 82, 45 | 19, 56%, 40% | |
| silver | #C0C0C0 | 192, 192, 192 | 0, 0%, 75% | |
| skyblue | #87CEEB | 135, 206, 235 | 197, 71%, 73% | |
| slateblue | #6A5ACD | 106, 90, 205 | 248, 53%, 58% | |
| slategray is the same color as slategrey | #708090 | 112, 128, 144 | 210, 13%, 50% | |
| slategrey opens Slate gray is the same color as slategray | #708090 | 112, 128, 144 | 210, 13%, 50% | |
| snow | #FFFAFA | 255, 250, 250 | 0, 100%, 99% | |
| springgreen | #00FF7F | 0, 255, 127 | 150, 100%, 50% | |
| steelblue | #4682B4 | 70, 130, 180 | 207, 44%, 49% |
T
V
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| violet | #EE82EE | 238, 130, 238 | 300, 76%, 72% |
W
Y
| Swatch | Color name | Hex | RGB | HSL |
|---|---|---|---|---|
| yellow | #FFFF00 | 255, 255, 0 | 60, 100%, 50% | |
| yellowgreen | #9ACD32 | 154, 205, 50 | 80, 61%, 50% |
Common questions
- How many CSS color names are there?
- There are 148 names, but only 139 distinct colors, because nine names are exact duplicates of another name. The figure of 140 gets repeated a lot and is not quite right. All 148 work in every modern browser.
- Why does CSS have both gray and grey?
- Because the original HTML palette and the SVG palette were merged and neither spelling was dropped. Seven gray names carry both spellings: gray, darkgray, dimgray, lightgray, slategray, darkslategray and lightslategray. Both spellings resolve to identical values, so the choice is purely stylistic.
- What is the difference between aqua and cyan?
- Nothing. Both are #00FFFF. Aqua came from the sixteen HTML 4 colors and cyan from SVG, and CSS kept both. Fuchsia and magenta are the same story, both #FF00FF.
- Why is darkgray lighter than gray?
- Because they came from different palettes that were never reconciled. CSS gray is #808080 and darkgray is #A9A9A9, which is genuinely lighter. If a gray is behaving unexpectedly in a stylesheet, this is usually the reason. The keyword that actually sits below gray is dimgray at #696969.
- Should I use color names or hex codes?
- Names are readable and impossible to mistype silently, since an unrecognized name is simply ignored rather than rendering the wrong color. But 139 colors is a narrow palette, and the names carry no system: there is no relationship between lightblue, mediumblue and darkblue beyond the words. For anything designed rather than sketched, hex or a token scale will serve better.
- What is rebeccapurple?
- It is #663399, added to the CSS color list in 2014 in memory of Rebecca Alison Meyer, daughter of the web standards writer Eric Meyer, who died of a brain tumor on her sixth birthday. It is the only keyword added since the original set was inherited from X11 and SVG.
Share