CSS 颜色名 颜色值
2016-07-14 15:15
671 查看
W3C定义了16个颜色关键字：aqua（浅绿色）、black（黑色）、blue（蓝色）、fuchsia（紫红色）、gray（灰色）、green（绿色）、lime（黄绿色）、maroon（褐红色）、navy（深蓝色）、olive（茶青色）、purple（紫色）、red（红色）、silver（银色）、teal（青色）、white（白色）和yellow（黄色）。
要了解这些颜色名及其对应的RGB颜色值，请参考：http://www.w3.org/TR/css3-color/#html4。
大多数现代浏览器支持更多种颜色名（即140 X11颜色名），但如果真要使用颜色名，最好只使用前面那16种。
要了解这114种颜色名及其对应的RGB颜色值，请参考：http://en.wikipedia.org/wiki/X11_color_names。
X11 color names
HSL（色相，饱和度%，亮度%）
HSL格式如下：
HSL(0,0%,0%)
HSL比我们见过的各种RGB方式更直观，因为使用它更容易写出和看懂颜色。
HSL颜色中的第一个值表示色相，也就是一个实际的颜色，比如红色和绿色。所有颜色围绕色相环（也叫色轮）一周，而色相值以圆周上的度数表示。如图所示，HSL中的色相值以色轮上的度数表示
色轮
红色是0或360，青色是与之相对的180。
以下是彩虹七色在色轮中大致的色相值。
•红：0 •橙：35 •黄：60 •绿：125 •蓝：230 •靛：280 •紫：305
至于饱和度和亮度，相对就容易理解多了。饱和度设定有多少颜色，灰色的饱和度低，而强烈的色彩饱和度高。
亮度设定颜色的明暗，0%就是黑色，100%就是白色，而中间的值是实际能看到的色相。
要了解这些颜色名及其对应的RGB颜色值，请参考：http://www.w3.org/TR/css3-color/#html4。
| Named | Numeric | Color name | Hex rgb | Decimal |
|---|---|---|---|---|
| black | #000000 | 0,0,0 | ||
| silver | #C0C0C0 | 192,192,192 | ||
| gray | #808080 | 128,128,128 | ||
| white | #FFFFFF | 255,255,255 | ||
| maroon | #800000 | 128,0,0 | ||
| red | #FF0000 | 255,0,0 | ||
| purple | #800080 | 128,0,128 | ||
| fuchsia | #FF00FF | 255,0,255 | ||
| green | #008000 | 0,128,0 | ||
| lime | #00FF00 | 0,255,0 | ||
| olive | #808000 | 128,128,0 | ||
| yellow | #FFFF00 | 255,255,0 | ||
| navy | #000080 | 0,0,128 | ||
| blue | #0000FF | 0,0,255 | ||
| teal | #008080 | 0,128,128 | ||
| aqua | #00FFFF | 0,255,255 |
要了解这114种颜色名及其对应的RGB颜色值，请参考：http://en.wikipedia.org/wiki/X11_color_names。
| Name | Hex (RGB) | Red (RGB) | Green (RGB) | Blue (RGB) | Hue (HSL/HSV) | Satur. (HSL) | Light (HSL) | Satur. (HSV) | Value (HSV) | Alternatives |
|---|---|---|---|---|---|---|---|---|---|---|
| Alice Blue | #F0F8FF | 94% | 97% | 100% | 208° | 100% | 97% | 6% | 100% | |
| Antique White | #FAEBD7 | 98% | 92% | 84% | 34° | 78% | 91% | 14% | 98% | |
| Aqua | #00FFFF | 0% | 100% | 100% | 180° | 100% | 50% | 100% | 100% | Cyan |
| Aquamarine | #7FFFD4 | 50% | 100% | 83% | 160° | 100% | 75% | 50% | 100% | |
| Azure | #F0FFFF | 94% | 100% | 100% | 180° | 100% | 97% | 6% | 100% | |
| Beige | #F5F5DC | 96% | 96% | 86% | 60° | 56% | 91% | 10% | 96% | |
| Bisque | #FFE4C4 | 100% | 89% | 77% | 33° | 100% | 88% | 23% | 100% | |
| Black | #000000 | 0% | 0% | 0% | 0° | 0% | 0% | 0% | 0% | |
| Blanched Almond | #FFEBCD | 100% | 92% | 80% | 36° | 100% | 90% | 20% | 100% | |
| Blue | #0000FF | 0% | 0% | 100% | 240° | 100% | 50% | 100% | 100% | |
| Blue Violet | #8A2BE2 | 54% | 17% | 89% | 271° | 76% | 53% | 81% | 89% | |
| Brown | #A52A2A | 65% | 16% | 16% | 0° | 59% | 41% | 75% | 65% | |
| Burlywood | #DEB887 | 87% | 72% | 53% | 34° | 57% | 70% | 39% | 87% | |
| Cadet Blue | #5F9EA0 | 37% | 62% | 63% | 182° | 26% | 50% | 41% | 63% | |
| Chartreuse | #7FFF00 | 50% | 100% | 0% | 90° | 100% | 50% | 100% | 100% | |
| Chocolate | #D2691E | 82% | 41% | 12% | 25° | 75% | 47% | 86% | 82% | |
| Coral | #FF7F50 | 100% | 50% | 31% | 16° | 100% | 66% | 69% | 100% | |
| Cornflower | #6495ED | 39% | 58% | 93% | 219° | 79% | 66% | 58% | 93% | |
| Cornsilk | #FFF8DC | 100% | 97% | 86% | 48° | 100% | 93% | 14% | 100% | |
| Crimson | #DC143C | 86% | 8% | 24% | 348° | 83% | 47% | 91% | 86% | |
| Cyan | #00FFFF | 0% | 100% | 100% | 180° | 100% | 50% | 100% | 100% | Aqua |
| Dark Blue | #00008B | 0% | 0% | 55% | 240° | 100% | 27% | 100% | 55% | |
| Dark Cyan | #008B8B | 0% | 55% | 55% | 180° | 100% | 27% | 100% | 55% | |
| Dark Goldenrod | #B8860B | 72% | 53% | 4% | 43° | 89% | 38% | 94% | 72% | |
| Dark Gray | #A9A9A9 | 66% | 66% | 66% | 0° | 0% | 66% | 0% | 66% | Dark Grey |
| Dark Green | #006400 | 0% | 39% | 0% | 120° | 100% | 20% | 100% | 39% | |
| Dark Khaki | #BDB76B | 74% | 72% | 42% | 56° | 38% | 58% | 43% | 74% | |
| Dark Magenta | #8B008B | 55% | 0% | 55% | 300° | 100% | 27% | 100% | 55% | |
| Dark Olive Green | #556B2F | 33% | 42% | 18% | 82° | 39% | 30% | 56% | 42% | |
| Dark Orange | #FF8C00 | 100% | 55% | 0% | 33° | 100% | 50% | 100% | 100% | |
| Dark Orchid | #9932CC | 60% | 20% | 80% | 280° | 61% | 50% | 75% | 80% | |
| Dark Red | #8B0000 | 55% | 0% | 0% | 0° | 100% | 27% | 100% | 55% | |
| Dark Salmon | #E9967A | 91% | 59% | 48% | 15° | 72% | 70% | 48% | 91% | |
| Dark Sea Green | #8FBC8F | 56% | 74% | 56% | 120° | 25% | 65% | 24% | 74% | |
| Dark Slate Blue | #483D8B | 28% | 24% | 55% | 248° | 39% | 39% | 56% | 55% | |
| Dark Slate Gray | #2F4F4F | 18% | 31% | 31% | 180° | 25% | 25% | 41% | 31% | Dark Slate Grey |
| Dark Turquoise | #00CED1 | 0% | 81% | 82% | 181° | 100% | 41% | 100% | 82% | |
| Dark Violet | #9400D3 | 58% | 0% | 83% | 282° | 100% | 41% | 100% | 83% | |
| Deep Pink | #FF1493 | 100% | 8% | 58% | 328° | 100% | 54% | 92% | 100% | |
| Deep Sky Blue | #00BFFF | 0% | 75% | 100% | 195° | 100% | 50% | 100% | 100% | |
| Dim Gray | #696969 | 41% | 41% | 41% | 0° | 0% | 41% | 0% | 41% | Dim Grey |
| Dodger Blue | #1E90FF | 12% | 56% | 100% | 210° | 100% | 56% | 88% | 100% | |
| Firebrick | #B22222 | 70% | 13% | 13% | 0° | 68% | 42% | 81% | 70% | |
| Floral White | #FFFAF0 | 100% | 98% | 94% | 40° | 100% | 97% | 6% | 100% | |
| Forest Green | #228B22 | 13% | 55% | 13% | 120° | 61% | 34% | 76% | 55% | |
| Fuchsia | #FF00FF | 100% | 0% | 100% | 300° | 100% | 50% | 100% | 100% | Magenta |
| Gainsboro | #DCDCDC | 86% | 86% | 86% | 0° | 0% | 86% | 0% | 86% | |
| Ghost White | #F8F8FF | 97% | 97% | 100% | 240° | 100% | 99% | 3% | 100% | |
| Gold | #FFD700 | 100% | 84% | 0% | 51° | 100% | 50% | 100% | 100% | |
| Goldenrod | #DAA520 | 85% | 65% | 13% | 43° | 74% | 49% | 85% | 85% | |
| Gray | #BEBEBE | 75% | 75% | 75% | 0° | 0% | 75% | 0% | 75% | Grey, X11 Gray, X11 Grey |
| Web Gray | #808080 | 50% | 50% | 50% | 0° | 0% | 50% | 0% | 50% | Web Grey |
| Green | #00FF00 | 0% | 100% | 0% | 120° | 100% | 50% | 100% | 100% | X11 Green, Lime |
| Web Green | #008000 | 0% | 50% | 0% | 120° | 100% | 25% | 100% | 50% | |
| Green Yellow | #ADFF2F | 68% | 100% | 18% | 84° | 100% | 59% | 82% | 100% | |
| Honeydew | #F0FFF0 | 94% | 100% | 94% | 120° | 100% | 97% | 6% | 100% | |
| Hot Pink | #FF69B4 | 100% | 41% | 71% | 330° | 100% | 71% | 59% | 100% | |
| Indian Red | #CD5C5C | 80% | 36% | 36% | 0° | 53% | 58% | 55% | 80% | |
| Indigo | #4B0082 | 29% | 0% | 51% | 275° | 100% | 26% | 100% | 51% | |
| Ivory | #FFFFF0 | 100% | 100% | 94% | 60° | 100% | 97% | 6% | 100% | |
| Khaki | #F0E68C | 94% | 90% | 55% | 54° | 77% | 75% | 42% | 94% | |
| Lavender | #E6E6FA | 90% | 90% | 98% | 240° | 67% | 94% | 8% | 98% | |
| Lavender Blush | #FFF0F5 | 100% | 94% | 96% | 340° | 100% | 97% | 6% | 100% | |
| Lawn Green | #7CFC00 | 49% | 99% | 0% | 90° | 100% | 49% | 100% | 99% | |
| Lemon Chiffon | #FFFACD | 100% | 98% | 80% | 54° | 100% | 90% | 20% | 100% | |
| Light Blue | #ADD8E6 | 68% | 85% | 90% | 195° | 53% | 79% | 25% | 90% | |
| Light Coral | #F08080 | 94% | 50% | 50% | 0° | 79% | 72% | 47% | 94% | |
| Light Cyan | #E0FFFF | 88% | 100% | 100% | 180° | 100% | 94% | 12% | 100% | |
| Light Goldenrod | #FAFAD2 | 98% | 98% | 82% | 60° | 80% | 90% | 16% | 98% | |
| Light Gray | #D3D3D3 | 83% | 83% | 83% | 0° | 0% | 83% | 0% | 83% | Light Grey |
| Light Green | #90EE90 | 56% | 93% | 56% | 120° | 73% | 75% | 39% | 93% | |
| Light Pink | #FFB6C1 | 100% | 71% | 76% | 351° | 100% | 86% | 29% | 100% | |
| Light Salmon | #FFA07A | 100% | 63% | 48% | 17° | 100% | 74% | 52% | 100% | |
| Light Sea Green | #20B2AA | 13% | 70% | 67% | 177° | 70% | 41% | 82% | 70% | |
| Light Sky Blue | #87CEFA | 53% | 81% | 98% | 203° | 92% | 76% | 46% | 98% | |
| Light Slate Gray | #778899 | 47% | 53% | 60% | 210° | 14% | 53% | 22% | 60% | Light Slate Grey |
| Light Steel Blue | #B0C4DE | 69% | 77% | 87% | 214° | 41% | 78% | 21% | 87% | |
| Light Yellow | #FFFFE0 | 100% | 100% | 88% | 60° | 100% | 94% | 12% | 100% | |
| Lime | #00FF00 | 0% | 100% | 0% | 120° | 100% | 50% | 100% | 100% | |
| Lime Green | #32CD32 | 20% | 80% | 20% | 120° | 61% | 50% | 76% | 80% | |
| Linen | #FAF0E6 | 98% | 94% | 90% | 30° | 67% | 94% | 8% | 98% | |
| Magenta | #FF00FF | 100% | 0% | 100% | 300° | 100% | 50% | 100% | 100% | Fuchsia |
| Maroon | #B03060 | 69% | 19% | 38% | 338° | 57% | 44% | 73% | 69% | X11 Maroon |
| Web Maroon | #7F0000 | 50% | 0% | 0% | 0° | 100% | 25% | 100% | 50% | |
| Medium Aquamarine | #66CDAA | 40% | 80% | 67% | 160° | 51% | 60% | 50% | 80% | |
| Medium Blue | #0000CD | 0% | 0% | 80% | 240° | 100% | 40% | 100% | 80% | |
| Medium Orchid | #BA55D3 | 73% | 33% | 83% | 288° | 59% | 58% | 60% | 83% | |
| Medium Purple | #9370DB | 58% | 44% | 86% | 260° | 60% | 65% | 49% | 86% | |
| Medium Sea Green | #3CB371 | 24% | 70% | 44% | 147° | 50% | 47% | 66% | 70% | |
| Medium Slate Blue | #7B68EE | 48% | 41% | 93% | 249° | 80% | 67% | 56% | 93% | |
| Medium Spring Green | #00FA9A | 0% | 98% | 60% | 157° | 100% | 49% | 100% | 98% | |
| Medium Turquoise | #48D1CC | 28% | 82% | 80% | 178° | 60% | 55% | 66% | 82% | |
| Medium Violet Red | #C71585 | 78% | 8% | 52% | 322° | 81% | 43% | 89% | 78% | |
| Midnight Blue | #191970 | 10% | 10% | 44% | 240° | 64% | 27% | 78% | 44% | |
| Mint Cream | #F5FFFA | 96% | 100% | 98% | 150° | 100% | 98% | 4% | 100% | |
| Misty Rose | #FFE4E1 | 100% | 89% | 88% | 6° | 100% | 94% | 12% | 100% | |
| Moccasin | #FFE4B5 | 100% | 89% | 71% | 38° | 100% | 86% | 29% | 100% | |
| Navajo White | #FFDEAD | 100% | 87% | 68% | 36° | 100% | 84% | 32% | 100% | |
| Navy Blue | #000080 | 0% | 0% | 50% | 240° | 100% | 25% | 100% | 50% | Navy |
| Old Lace | #FDF5E6 | 99% | 96% | 90% | 39° | 85% | 95% | 9% | 99% | |
| Olive | #808000 | 50% | 50% | 0% | 60° | 100% | 25% | 100% | 50% | |
| Olive Drab | #6B8E23 | 42% | 56% | 14% | 80° | 61% | 35% | 75% | 56% | |
| Orange | #FFA500 | 100% | 65% | 0% | 39° | 100% | 50% | 100% | 100% | |
| Orange Red | #FF4500 | 100% | 27% | 0% | 16° | 100% | 50% | 100% | 100% | |
| Orchid | #DA70D6 | 85% | 44% | 84% | 302° | 59% | 65% | 49% | 85% | |
| Pale Goldenrod | #EEE8AA | 93% | 91% | 67% | 55° | 67% | 80% | 29% | 93% | |
| Pale Green | #98FB98 | 60% | 98% | 60% | 120° | 93% | 79% | 39% | 98% | |
| Pale Turquoise | #AFEEEE | 69% | 93% | 93% | 180° | 65% | 81% | 26% | 93% | |
| Pale Violet Red | #DB7093 | 86% | 44% | 58% | 340° | 60% | 65% | 49% | 86% | |
| Papaya Whip | #FFEFD5 | 100% | 94% | 84% | 37° | 100% | 92% | 16% | 100% | |
| Peach Puff | #FFDAB9 | 100% | 85% | 73% | 28° | 100% | 86% | 27% | 100% | |
| Peru | #CD853F | 80% | 52% | 25% | 30° | 59% | 53% | 69% | 80% | |
| Pink | #FFC0CB | 100% | 75% | 80% | 350° | 100% | 88% | 25% | 100% | |
| Plum | #DDA0DD | 87% | 63% | 87% | 300° | 47% | 75% | 28% | 87% | |
| Powder Blue | #B0E0E6 | 69% | 88% | 90% | 187° | 52% | 80% | 23% | 90% | |
| Purple | #A020F0 | 63% | 13% | 94% | 277° | 87% | 53% | 87% | 94% | X11 Purple |
| Web Purple | #7F007F | 50% | 0% | 50% | 300° | 100% | 25% | 100% | 50% | |
| Rebecca Purple | #663399 | 40% | 20% | 60% | 270° | 50% | 40% | 67% | 60% | |
| Red | #FF0000 | 100% | 0% | 0% | 0° | 100% | 50% | 100% | 100% | |
| Rosy Brown | #BC8F8F | 74% | 56% | 56% | 0° | 25% | 65% | 24% | 74% | |
| Royal Blue | #4169E1 | 25% | 41% | 88% | 225° | 73% | 57% | 71% | 88% | |
| Saddle Brown | #8B4513 | 55% | 27% | 7% | 25° | 76% | 31% | 86% | 55% | |
| Salmon | #FA8072 | 98% | 50% | 45% | 6° | 93% | 71% | 54% | 98% | |
| Sandy Brown | #F4A460 | 96% | 64% | 38% | 28° | 87% | 67% | 61% | 96% | |
| Sea Green | #2E8B57 | 18% | 55% | 34% | 146° | 50% | 36% | 67% | 55% | |
| Seashell | #FFF5EE | 100% | 96% | 93% | 25° | 100% | 97% | 7% | 100% | |
| Sienna | #A0522D | 63% | 32% | 18% | 19° | 56% | 40% | 72% | 63% | |
| Silver | #C0C0C0 | 75% | 75% | 75% | 0° | 0% | 75% | 0% | 75% | |
| Sky Blue | #87CEEB | 53% | 81% | 92% | 197° | 71% | 73% | 43% | 92% | |
| Slate Blue | #6A5ACD | 42% | 35% | 80% | 248° | 54% | 58% | 56% | 80% | |
| Slate Gray | #708090 | 44% | 50% | 56% | 210° | 13% | 50% | 22% | 56% | Slate Grey |
| Snow | #FFFAFA | 100% | 98% | 98% | 0° | 100% | 99% | 2% | 100% | |
| Spring Green | #00FF7F | 0% | 100% | 50% | 150° | 100% | 50% | 100% | 100% | |
| Steel Blue | #4682B4 | 27% | 51% | 71% | 207° | 44% | 49% | 61% | 71% | |
| Tan | #D2B48C | 82% | 71% | 55% | 34° | 44% | 69% | 33% | 82% | |
| Teal | #008080 | 0% | 50% | 50% | 180° | 100% | 25% | 100% | 50% | |
| Thistle | #D8BFD8 | 85% | 75% | 85% | 300° | 24% | 80% | 12% | 85% | |
| Tomato | #FF6347 | 100% | 39% | 28% | 9° | 100% | 64% | 72% | 100% | |
| Turquoise | #40E0D0 | 25% | 88% | 82% | 174° | 72% | 57% | 71% | 88% | |
| Violet | #EE82EE | 93% | 51% | 93% | 300° | 76% | 72% | 45% | 93% | |
| Wheat | #F5DEB3 | 96% | 87% | 70% | 39° | 77% | 83% | 27% | 96% | |
| White | #FFFFFF | 100% | 100% | 100% | 0° | 0% | 100% | 0% | 100% | |
| White Smoke | #F5F5F5 | 96% | 96% | 96% | 0° | 0% | 96% | 0% | 96% | |
| Yellow | #FFFF00 | 100% | 100% | 0% | 60° | 100% | 50% | 100% | 100% | |
| Yellow Green | #9ACD32 | 60% | 80% | 20% | 80° | 61% | 50% | 76% | 80% |
HSL格式如下：
HSL(0,0%,0%)
HSL比我们见过的各种RGB方式更直观，因为使用它更容易写出和看懂颜色。
HSL颜色中的第一个值表示色相，也就是一个实际的颜色，比如红色和绿色。所有颜色围绕色相环（也叫色轮）一周，而色相值以圆周上的度数表示。如图所示，HSL中的色相值以色轮上的度数表示
色轮
红色是0或360，青色是与之相对的180。
以下是彩虹七色在色轮中大致的色相值。
•红：0 •橙：35 •黄：60 •绿：125 •蓝：230 •靛：280 •紫：305
至于饱和度和亮度，相对就容易理解多了。饱和度设定有多少颜色，灰色的饱和度低，而强烈的色彩饱和度高。
亮度设定颜色的明暗，0%就是黑色，100%就是白色，而中间的值是实际能看到的色相。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3的 transform属性，怎么才能让他同时执行多个不同动画（属性）效果
- CSS经验分享
- css3鼠标滑过图片文字动画特效
- css3-Transform与css3-Transition
- css随笔
- 好记性不如烂笔头之html和css笔记
- css限制显示字数，文字长度超出部分用省略号表示
- DIV半透明层 CSS来实现网页背景半透明
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- 彻底弄懂css中单位px和em,rem的区别
- CSS3的calc()使用
- 【内容】css3点击区域4种全屏放大显示内容动画特效
- css3
- HTML&CSS基础学习笔记1.11-导航栏
- CSS 和 JS 动画哪个会更快
- js 怎么获得写在css文件中的display属性
- css
- CSS之Position详解
- CSS3新增样式-borderRadius的使用
- css画三角形