CSSカラーネームおよび、そのHSL・RGB値の一覧です。
彩度(S)・輝度(L)が近いものをまとめて、それぞれ表にしています。
カラーネーム・RGB値は以下を参考にしました。
W3C – CSS Color Module Level 3 [↗]
| maroon | hsl(0, 100%, 25%) | #800000 |
| darkred | hsl(0, 100%, 27%) | #8b0000 |
| brown | hsl(0, 59%, 41%) | #a52a2a |
| firebrick | hsl(0, 68%, 42%) | #b22222 |
| sienna | hsl(19, 56%, 40%) | #a0522d |
| saddlebrown | hsl(25, 76%, 31%) | #8b4513 |
| darkgoldenrod | hsl(43, 89%, 38%) | #b8860b |
| olive | hsl(60, 100%, 25%) | #808000 |
| olivedrab | hsl(80, 60%, 35%) | #6b8e23 |
| darkolivegreen | hsl(82, 39%, 30%) | #556b2f |
| darkgreen | hsl(120, 100%, 20%) | #006400 |
| green | hsl(120, 100%, 25%) | #008000 |
| forestgreen | hsl(120, 61%, 34%) | #228b22 |
| seagreen | hsl(146, 50%, 36%) | #2e8b57 |
| darkslategray | hsl(180, 25%, 25%) | #2f4f4f |
| darkslategrey | hsl(180, 25%, 25%) | #2f4f4f |
| teal | hsl(180, 100%, 25%) | #008080 |
| darkcyan | hsl(180, 100%, 27%) | #008b8b |
| navy | hsl(240, 100%, 25%) | #000080 |
| midnightblue | hsl(240, 64%, 27%) | #191970 |
| darkblue | hsl(240, 100%, 27%) | #00008b |
| mediumblue | hsl(240, 100%, 40%) | #0000cd |
| darkslateblue | hsl(248, 39%, 39%) | #483d8b |
| rebeccapurple | hsl(270, 50%, 40%) | #663399 |
| indigo | hsl(275, 100%, 25%) | #4b0082 |
| purple | hsl(300, 100%, 25%) | #800080 |
| darkmagenta | hsl(300, 100%, 27%) | #8b008b |
| crimson | hsl(348, 83%, 47%) | #dc143c |
| indianred | hsl(0, 53%, 58%) | #cd5c5c |
| rosybrown | hsl(0, 25%, 65%) | #bc8f8f |
| chocolate | hsl(25, 75%, 47%) | #d2691e |
| peru | hsl(30, 59%, 53%) | #cd853f |
| goldenrod | hsl(43, 74%, 49%) | #daa520 |
| darkkhaki | hsl(56, 38%, 58%) | #bdb76b |
| yellowgreen | hsl(80, 61%, 50%) | #9acd32 |
| limegreen | hsl(120, 61%, 50%) | #32cd32 |
| darkseagreen | hsl(120, 25%, 65%) | #8fbc8f |
| mediumseagreen | hsl(147, 50%, 47%) | #3cb371 |
| mediumaquamarine | hsl(160, 51%, 60%) | #66cdaa |
| turquoise | hsl(174, 72%, 56%) | #40e0d0 |
| lightseagreen | hsl(177, 70%, 41%) | #20b2aa |
| mediumturquoise | hsl(178, 60%, 55%) | #48d1cc |
| cadetblue | hsl(182, 25%, 50%) | #5f9ea0 |
| steelblue | hsl(207, 44%, 49%) | #4682b4 |
| slategray | hsl(210, 13%, 50%) | #708090 |
| slategrey | hsl(210, 13%, 50%) | #708090 |
| lightslategray | hsl(210, 14%, 53%) | #778899 |
| lightslategrey | hsl(210, 14%, 53%) | #778899 |
| royalblue | hsl(225, 73%, 57%) | #4169e1 |
| slateblue | hsl(248, 53%, 58%) | #6a5acd |
| blueviolet | hsl(271, 76%, 53%) | #8a2be2 |
| darkorchid | hsl(280, 61%, 50%) | #9932cc |
| mediumorchid | hsl(288, 59%, 58%) | #ba55d3 |
| orchid | hsl(302, 59%, 65%) | #da70d6 |
| mediumvioletred | hsl(322, 81%, 43%) | #c71585 |
| red | hsl(0, 100%, 50%) | #ff0000 |
| orangered | hsl(16, 100%, 50%) | #ff4500 |
| darkorange | hsl(33, 100%, 50%) | #ff8c00 |
| orange | hsl(39, 100%, 50%) | #ffa500 |
| gold | hsl(51, 100%, 50%) | #ffd700 |
| yellow | hsl(60, 100%, 50%) | #ffff00 |
| greenyellow | hsl(84, 100%, 59%) | #adff2f |
| chartreuse | hsl(90, 100%, 50%) | #7fff00 |
| lawngreen | hsl(90, 100%, 49%) | #7cfc00 |
| lime | hsl(120, 100%, 50%) | #00ff00 |
| springgreen | hsl(150, 100%, 50%) | #00ff7f |
| mediumspringgreen | hsl(157, 100%, 49%) | #00fa9a |
| cyan | hsl(180, 100%, 50%) | #00ffff |
| aqua | hsl(180, 100%, 50%) | #00ffff |
| darkturquoise | hsl(181, 100%, 41%) | #00ced1 |
| deepskyblue | hsl(195, 100%, 50%) | #00bfff |
| dodgerblue | hsl(210, 100%, 56%) | #1e90ff |
| blue | hsl(240, 100%, 50%) | #0000ff |
| darkviolet | hsl(282, 100%, 41%) | #9400d3 |
| magenta | hsl(300, 100%, 50%) | #ff00ff |
| fuchsia | hsl(300, 100%, 50%) | #ff00ff |
| deeppink | hsl(328, 100%, 54%) | #ff1493 |
| lightcoral | hsl(0, 79%, 72%) | #f08080 |
| salmon | hsl(6, 93%, 71%) | #fa8072 |
| tomato | hsl(9, 100%, 64%) | #ff6347 |
| darksalmon | hsl(15, 72%, 70%) | #e9967a |
| coral | hsl(16, 100%, 66%) | #ff7f50 |
| lightsalmon | hsl(17, 100%, 74%) | #ffa07a |
| sandybrown | hsl(28, 87%, 67%) | #f4a460 |
| burlywood | hsl(34, 57%, 70%) | #deb887 |
| tan | hsl(34, 44%, 69%) | #d2b48c |
| wheat | hsl(39, 77%, 83%) | #f5deb3 |
| khaki | hsl(54, 77%, 75%) | #f0e68c |
| palegoldenrod | hsl(55, 67%, 80%) | #eee8aa |
| lightgreen | hsl(120, 73%, 75%) | #90ee90 |
| palegreen | hsl(120, 93%, 79%) | #98fb98 |
| aquamarine | hsl(160, 100%, 75%) | #7fffd4 |
| paleturquoise | hsl(180, 65%, 81%) | #afeeee |
| powderblue | hsl(187, 52%, 80%) | #b0e0e6 |
| lightblue | hsl(195, 53%, 79%) | #add8e6 |
| skyblue | hsl(197, 71%, 73%) | #87ceeb |
| lightskyblue | hsl(203, 92%, 75%) | #87cefa |
| lightsteelblue | hsl(214, 41%, 78%) | #b0c4de |
| cornflowerblue | hsl(219, 79%, 66%) | #6495ed |
| mediumslateblue | hsl(249, 80%, 67%) | #7b68ee |
| mediumpurple | hsl(260, 60%, 65%) | #9370db |
| violet | hsl(300, 76%, 72%) | #ee82ee |
| plum | hsl(300, 47%, 75%) | #dda0dd |
| thistle | hsl(300, 24%, 80%) | #d8bfd8 |
| hotpink | hsl(330, 100%, 71%) | #ff69b4 |
| palevioletred | hsl(340, 60%, 65%) | #db7093 |
| pink | hsl(350, 100%, 88%) | #ffc0cb |
| lightpink | hsl(351, 100%, 86%) | #ffb6c1 |
| snow | hsl(0, 100%, 99%) | #fffafa |
| mistyrose | hsl(6, 100%, 94%) | #ffe4e1 |
| seashell | hsl(25, 100%, 97%) | #fff5ee |
| peachpuff | hsl(28, 100%, 86%) | #ffdab9 |
| linen | hsl(30, 67%, 94%) | #faf0e6 |
| bisque | hsl(33, 100%, 88%) | #ffe4c4 |
| antiquewhite | hsl(34, 78%, 91%) | #faebd7 |
| navajowhite | hsl(36, 100%, 84%) | #ffdead |
| blanchedalmond | hsl(36, 100%, 90%) | #ffebcd |
| papayawhip | hsl(37, 100%, 92%) | #ffefd5 |
| moccasin | hsl(38, 100%, 85%) | #ffe4b5 |
| oldlace | hsl(39, 85%, 95%) | #fdf5e6 |
| floralwhite | hsl(40, 100%, 97%) | #fffaf0 |
| cornsilk | hsl(48, 100%, 93%) | #fff8dc |
| lemonchiffon | hsl(54, 100%, 90%) | #fffacd |
| lightgoldenrodyellow | hsl(60, 80%, 90%) | #fafad2 |
| beige | hsl(60, 56%, 91%) | #f5f5dc |
| lightyellow | hsl(60, 100%, 94%) | #ffffe0 |
| ivory | hsl(60, 100%, 97%) | #fffff0 |
| honeydew | hsl(120, 100%, 97%) | #f0fff0 |
| mintcream | hsl(150, 100%, 98%) | #f5fffa |
| lightcyan | hsl(180, 100%, 94%) | #e0ffff |
| azure | hsl(180, 100%, 97%) | #f0ffff |
| aliceblue | hsl(208, 100%, 97%) | #f0f8ff |
| lavender | hsl(240, 67%, 94%) | #e6e6fa |
| ghostwhite | hsl(240, 100%, 99%) | #f8f8ff |
| lavenderblush | hsl(340, 100%, 97%) | #fff0f5 |
| black | hsl(0, 0%, 0%) | #000000 |
| dimgray | hsl(0, 0%, 41%) | #696969 |
| dimgrey | hsl(0, 0%, 41%) | #696969 |
| gray | hsl(0, 0%, 50%) | #808080 |
| grey | hsl(0, 0%, 50%) | #808080 |
| darkgray | hsl(0, 0%, 66%) | #a9a9a9 |
| darkgrey | hsl(0, 0%, 66%) | #a9a9a9 |
| silver | hsl(0, 0%, 75%) | #c0c0c0 |
| lightgray | hsl(0, 0%, 83%) | #d3d3d3 |
| lightgrey | hsl(0, 0%, 83%) | #d3d3d3 |
| gainsboro | hsl(0, 0%, 86%) | #dcdcdc |
| whitesmoke | hsl(0, 0%, 96%) | #f5f5f5 |
| white | hsl(0, 0%, 100%) | #ffffff |
* * * 備考 * * *
CSS3で定義されている147色のうち、次の2組の色は同じ色です。
・aqua, cyan (#00ffff)
・fuchsia, magenta (#ff00ff)
また、”-gray”と”-grey”で終わる7組も同色です。
・darkgray, darkgrey (#a9a9a9)
・darkslategray, darkslategrey (#2f4f4f)
・dimgray, dimgrey (#696969)
・gray, grey (#808080)
・lightgray, lightgrey (#d3d3d3)
・lightslategray, lightslategrey (#778899)
・slategray, slategrey (#708090)
CSS4では、新色”rebeccapurple”が提案されています。(参照→W3C – CSS Color Module Level 4 Editor’s Draft [↗])
・rebeccapurple (#663399)
なぜ1色だけ追加されるの？と気になる方は以下のサイトに興味深い記事が書かれていますので、どうぞ。
本の虫: rebeccapurpleがCSS 4 colorに提案された経緯 [↗]
👉 HSL・RGBカラーチャート (HTML, CSS用)もどうぞ