ウェブサイト制作時の色の指定について。
よく使う16進数表記と共に、現在モダンブラウザで使用できるカラーネームをすべてリストアップして紹介します。

「CSS Level 3」では147のカラーネームが策定されています。しかし、中には同じ色を表すカラーネームがいくつか存在します。
以下の9点は名前が違いますが同じ色です。

  • aqua / cyan
  • fuchsia / magenta
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey

つまり異名同色の9点を除いた「色数」でいうと138色になります。

カラーネーム一覧

赤系(9色)

カラーネーム HEX RGB
indianred #cd5c5c rgb(205, 92, 92)
lightcoral #f08080 rgb(240, 128, 128)
lightsalmon #ffa07a rgb(255, 160, 122)
salmon #fa8072 rgb(250, 128, 114)
darksalmon #e9967a rgb(233, 150, 122)
crimson #dc143c rgb(220, 20, 60)
red #ff0000 rgb(255, 0, 0)
firebrick #b22222 rgb(178, 34, 34)
darkred #8b0000 rgb(139, 0, 0)

ピンク系(6色)

カラーネーム HEX RGB
pink #ffc0cb rgb(255, 192, 203)
lightpink #ffb6c1 rgb(255, 182, 193)
hotpink #ff69b4 rgb(255, 105, 180)
deeppink #ff1493 rgb(255, 20, 147)
mediumvioletred #c71585 rgb(199, 21, 133)
palevioletred #db7093 rgb(219, 112, 147)

オレンジ系(6色)

カラーネーム HEX RGB
coral #ff7f50 rgb(255, 127, 80)
tomato #ff6347 rgb(255, 99, 71)
orangered #ff4500 rgb(255, 69, 0)
darkorange #ff8c00 rgb(255, 140, 0)
lightSalmon #ffa07a rgb(255, 160, 122)
orange #ffa500 rgb(255, 165, 0)

黄色系(11色)

カラーネーム HEX RGB
gold #ffd700 rgb(255, 215, 0)
yellow #ffff00 rgb(255, 255, 0)
lightyellow #ffffe0 rgb(255, 255, 224)
lemonchiffon #fffacd rgb(255, 250, 205)
lightgoldenrodyellow #fafad2 rgb(255, 250, 210)
papayawhip #ffefd5 rgb(255, 239, 213)
moccasin #ffe4b5 rgb(255, 228, 181)
peachpuff #ffdab9 rgb(255, 218, 185)
palegoldenrod #eee8aa rgb(238, 232, 170)
khaki #f0e68c rgb(240, 230, 140)
darkkhaki #bdb76b rgb(189, 183, 107)

紫系(18色)

カラーネーム HEX RGB
lavender #e6e6fa rgb(230, 230, 250)
thistle #d8bfd8 rgb(216, 191, 216)
plum #dda0dd rgb(221, 160, 221)
violet #ee82ee rgb(238, 130, 238)
orchid #da70d6 rgb(218, 112, 214)
fuchsia #ff00ff rgb(255, 0, 255)
magenta #ff00ff rgb(255, 0, 255)
mediumorchid #ba55d3 rgb(186, 85, 211)
mediumpurple #9370db rgb(147, 112, 219)
blueviolet #8a2be2 rgb(138, 43, 226)
darkviolet #9400d3 rgb(148, 0, 211)
darkorchid #9932cc rgb(153, 50, 204)
darkmagenta #8b008b rgb(139, 0, 139)
purple #800080 rgb(128, 0, 128)
indigo #4b0082 rgb(75, 0, 130)
darkslateblue #483d8b rgb(72, 61, 139)
slateblue #6a5acd rgb(106, 90, 205)
mediumslateblue #7b68ee rgb(123, 104, 238)

緑系(23色)

カラーネーム HEX RGB
greenyellow #adff2f rgb(173, 255, 47)
chartreuse #7fff00 rgb(127, 255, 0)
lawngreen #7cfc00 rgb(124, 252, 0)
lime #00ff00 rgb(0, 255, 0)
limegreen #32cd32 rgb(50, 205, 50)
springgreen #00ff7f rgb(0, 255, 127)
mediumspringgreen #00fa9a rgb(0, 250, 154)
lightgreen #90ee90 rgb(144, 238, 144)
palegreen #98fb98 rgb(152, 251, 152)
mediumseagreen #3cb371 rgb(60, 179, 113)
seagreen #2e8b57 rgb(46, 139, 87)
forestgreen #228b22 rgb(34, 139, 34)
green #008000 rgb(0, 128, 0)
darkgreen #006400 rgb(0, 100, 0)
darkolivegreen #556b2f rgb(85, 107, 47)
olive #808000 rgb(128, 128, 0)
olivedrab #6b8e23 rgb(107, 142, 35)
yellowgreen #9acd32 rgb(154, 205, 50)
darkseagreen #8fbc8f rgb(143, 188, 143)
mediumaquamarine #66cdaa rgb(102, 205, 170)
lightseagreen #20b2aa 32, 178, 170
darkcyan #008b8b rgb(0, 139, 139)
teal #008080 rgb(0, 128, 128)

青系(25色)

カラーネーム HEX RGB
aqua #00ffff rgb(0, 255, 255)
cyan #00ffff rgb(0, 255, 255)
lightcyan #e0ffff rgb(224, 255, 255)
paleturquoise #afeeee rgb(175, 238, 238)
aquamarine #7fffd4 rgb(127, 255, 212)
turquoise #40e0d0 rgb(64, 224, 208)
mediumturquoise #48d1cc rgb(72, 209, 204)
darkturquoise #00ced1 rgb(0, 206, 209)
cadetblue #5f9ea0 rgb(95, 158, 160)
steelblue #4682b4 rgb(70, 130, 180)
lightsteelblue #b0c4de rgb(176, 196, 222)
powderblue #b0e0e6 rgb(176, 224, 230)
lightblue #add8e6 rgb(173, 216, 230)
skyblue #87ceeb rgb(135, 206, 235)
lightskyblue #87cefa rgb(135, 206, 250)
deepskyblue #00bfff rgb(0, 191, 255)
dodgerblue #1e90ff 30, 144, 255
cornflowerblue #6495ed rgb(100, 149, 237)
mediumslateblue #7b68ee rgb(123, 104, 238)
royalblue #4169e1 rgb(65, 105, 225)
blue #0000ff rgb(0, 0, 255)
mediumblue #0000cd rgb(0, 0, 205)
darkblue #00008b rgb(0, 0, 139)
navy #000080 rgb(0, 0, 128)
midnightblue #191970 rgb(25, 25, 112)

茶系(17色)

カラーネーム HEX RGB
cornsilk #fff8dc rgb(255, 248, 220)
blanchedalmond #ffebcd rgb(255, 235, 205)
bisque #ffe4c4 rgb(255, 228, 196)
navajowhite #ffdead rgb(255, 222, 173)
wheat #f5deb3 rgb(245, 222, 179)
burlywood #deb887 rgb(222, 184, 135)
tan #d2b48c rgb(210, 180, 140)
rosybrown #bc8f8f rgb(188, 143, 143)
sandybrown #f4a460 rgb(244, 164, 96)
goldenrod #daa520 rgb(218, 165, 32)
darkgoldenrod #b8860b rgb(184, 134, 11)
peru #cd853f rgb(205, 133, 63)
chocolate #d2691e rgb(210, 105, 30)
saddlebrown #8b4513 rgb(139, 69, 19)
sienna #a0522d rgb(160, 82, 45)
brown #a52a2a rgb(165, 42, 42)
maroon #800000 rgb(128, 0, 0)

白系(17色)

カラーネーム HEX RGB
white #ffffff rgb(255, 255, 255)
snow #fffafa rgb(255, 250, 250)
honeydew #f0fff0 rgb(240, 255, 240)
mintcream #f5fffa rgb(245, 255, 250)
azure #f0ffff rgb(240, 255, 255)
aliceblue #f0f8ff rgb(240, 248, 255)
ghostwhite #f8f8ff rgb(248, 248, 255)
whitesmoke #f5f5f5 rgb(245, 245, 245)
seashell #fff5ee rgb(255, 245, 238)
beige #f5f5dc rgb(245, 245, 220)
oldlace #fdf5e6 rgb(253, 245, 230)
floralwhite #fffaf0 rgb(255, 250, 240)
ivory #fffff0 rgb(255, 255, 240)
antiquewhite #faebd7 rgb(250, 235, 215)
linen #faf0e6 rgb(250, 240, 230)
lavenderblush #fff0f5 rgb(255, 240, 245)
mistyrose #ffe4e1 rgb(255, 228, 225)

黒系(17色)

カラーネーム HEX RGB
gainsboro #dcdcdc rgb(220, 220, 220)
lightgray #d3d3d3 rgb(211, 211, 211)
lightgrey #d3d3d3 rgb(211, 211, 211)
silver #c0c0c0 rgb(192, 192, 192)
darkgray #a9a9a9 rgb(169, 169, 169)
darkgrey #a9a9a9 rgb(169, 169, 169)
gray #808080 rgb(128, 128, 128)
grey #808080 rgb(128, 128, 128)
dimgray #696969 rgb(105, 105, 105)
dimgrey #696969 rgb(105, 105, 105)
lightslategray #778899 rgb(119, 136, 153)
lightslategrey #778899 rgb(119, 136, 153)
slategray #708090 rgb(112, 128, 144)
slategrey #708090 rgb(112, 128, 144)
darkslategray #2f4f4f rgb(47, 79, 79)
darkslategrey #2f4f4f rgb(47, 79, 79)
black #000000 rgb(0, 0, 0)

CSS Color Module Level 4

「CSS Color Module Level 4」からは「RebeccaPurple」が追加されました。

カラーネーム HEX RGB
rebeccapurple #663399 rgb(102, 112, 219)

HTMLおよびCSSでのカラーネームの使用方法

カラーネームは、16進数での指定と同じように、インラインHTMLスタイルまたはCSSスタイルシートで使用できます。

HTML

<body>
	<h1 style="color:midnightblue;">MidnightBlue Title</h1>
	<p style="color:lightsteelblue;">LightSteelBlue Paragraph</p>
</body>

CSS

h1 { color:midnightblue; }
p { color:lightsteelblue; }

以上。

カラーネームは使用OSやブラウザのバージョンなどの環境に依存して正しく表示できない場合があるので注意してください!