ウェブサイト制作時の色の指定について。
よく使う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色)
カラーネームHEXRGB
indianred#cd5c5crgb(205, 92, 92)
lightcoral#f08080rgb(240, 128, 128)
lightsalmon#ffa07argb(255, 160, 122)
salmon#fa8072rgb(250, 128, 114)
darksalmon#e9967argb(233, 150, 122)
crimson#dc143crgb(220, 20, 60)
red#ff0000rgb(255, 0, 0)
firebrick#b22222rgb(178, 34, 34)
darkred#8b0000rgb(139, 0, 0)
ピンク系(6色)
カラーネームHEXRGB
pink#ffc0cbrgb(255, 192, 203)
lightpink#ffb6c1rgb(255, 182, 193)
hotpink#ff69b4rgb(255, 105, 180)
deeppink#ff1493rgb(255, 20, 147)
mediumvioletred#c71585rgb(199, 21, 133)
palevioletred#db7093rgb(219, 112, 147)
オレンジ系(6色)
カラーネームHEXRGB
coral#ff7f50rgb(255, 127, 80)
tomato#ff6347rgb(255, 99, 71)
orangered#ff4500rgb(255, 69, 0)
darkorange#ff8c00rgb(255, 140, 0)
lightSalmon#ffa07argb(255, 160, 122)
orange#ffa500rgb(255, 165, 0)
黄色系(11色)
カラーネームHEXRGB
gold#ffd700rgb(255, 215, 0)
yellow#ffff00rgb(255, 255, 0)
lightyellow#ffffe0rgb(255, 255, 224)
lemonchiffon#fffacdrgb(255, 250, 205)
lightgoldenrodyellow#fafad2rgb(255, 250, 210)
papayawhip#ffefd5rgb(255, 239, 213)
moccasin#ffe4b5rgb(255, 228, 181)
peachpuff#ffdab9rgb(255, 218, 185)
palegoldenrod#eee8aargb(238, 232, 170)
khaki#f0e68crgb(240, 230, 140)
darkkhaki#bdb76brgb(189, 183, 107)
紫系(18色)
カラーネームHEXRGB
lavender#e6e6fargb(230, 230, 250)
thistle#d8bfd8rgb(216, 191, 216)
plum#dda0ddrgb(221, 160, 221)
violet#ee82eergb(238, 130, 238)
orchid#da70d6rgb(218, 112, 214)
fuchsia#ff00ffrgb(255, 0, 255)
magenta#ff00ffrgb(255, 0, 255)
mediumorchid#ba55d3rgb(186, 85, 211)
mediumpurple#9370dbrgb(147, 112, 219)
blueviolet#8a2be2rgb(138, 43, 226)
darkviolet#9400d3rgb(148, 0, 211)
darkorchid#9932ccrgb(153, 50, 204)
darkmagenta#8b008brgb(139, 0, 139)
purple#800080rgb(128, 0, 128)
indigo#4b0082rgb(75, 0, 130)
darkslateblue#483d8brgb(72, 61, 139)
slateblue#6a5acdrgb(106, 90, 205)
mediumslateblue#7b68eergb(123, 104, 238)
緑系(23色)
カラーネームHEXRGB
greenyellow#adff2frgb(173, 255, 47)
chartreuse#7fff00rgb(127, 255, 0)
lawngreen#7cfc00rgb(124, 252, 0)
lime#00ff00rgb(0, 255, 0)
limegreen#32cd32rgb(50, 205, 50)
springgreen#00ff7frgb(0, 255, 127)
mediumspringgreen#00fa9argb(0, 250, 154)
lightgreen#90ee90rgb(144, 238, 144)
palegreen#98fb98rgb(152, 251, 152)
mediumseagreen#3cb371rgb(60, 179, 113)
seagreen#2e8b57rgb(46, 139, 87)
forestgreen#228b22rgb(34, 139, 34)
green#008000rgb(0, 128, 0)
darkgreen#006400rgb(0, 100, 0)
darkolivegreen#556b2frgb(85, 107, 47)
olive#808000rgb(128, 128, 0)
olivedrab#6b8e23rgb(107, 142, 35)
yellowgreen#9acd32rgb(154, 205, 50)
darkseagreen#8fbc8frgb(143, 188, 143)
mediumaquamarine#66cdaargb(102, 205, 170)
lightseagreen#20b2aa32, 178, 170
darkcyan#008b8brgb(0, 139, 139)
teal#008080rgb(0, 128, 128)
青系(25色)
カラーネームHEXRGB
aqua#00ffffrgb(0, 255, 255)
cyan#00ffffrgb(0, 255, 255)
lightcyan#e0ffffrgb(224, 255, 255)
paleturquoise#afeeeergb(175, 238, 238)
aquamarine#7fffd4rgb(127, 255, 212)
turquoise#40e0d0rgb(64, 224, 208)
mediumturquoise#48d1ccrgb(72, 209, 204)
darkturquoise#00ced1rgb(0, 206, 209)
cadetblue#5f9ea0rgb(95, 158, 160)
steelblue#4682b4rgb(70, 130, 180)
lightsteelblue#b0c4dergb(176, 196, 222)
powderblue#b0e0e6rgb(176, 224, 230)
lightblue#add8e6rgb(173, 216, 230)
skyblue#87ceebrgb(135, 206, 235)
lightskyblue#87cefargb(135, 206, 250)
deepskyblue#00bfffrgb(0, 191, 255)
dodgerblue#1e90ff30, 144, 255
cornflowerblue#6495edrgb(100, 149, 237)
mediumslateblue#7b68eergb(123, 104, 238)
royalblue#4169e1rgb(65, 105, 225)
blue#0000ffrgb(0, 0, 255)
mediumblue#0000cdrgb(0, 0, 205)
darkblue#00008brgb(0, 0, 139)
navy#000080rgb(0, 0, 128)
midnightblue#191970rgb(25, 25, 112)
茶系(17色)
カラーネームHEXRGB
cornsilk#fff8dcrgb(255, 248, 220)
blanchedalmond#ffebcdrgb(255, 235, 205)
bisque#ffe4c4rgb(255, 228, 196)
navajowhite#ffdeadrgb(255, 222, 173)
wheat#f5deb3rgb(245, 222, 179)
burlywood#deb887rgb(222, 184, 135)
tan#d2b48crgb(210, 180, 140)
rosybrown#bc8f8frgb(188, 143, 143)
sandybrown#f4a460rgb(244, 164, 96)
goldenrod#daa520rgb(218, 165, 32)
darkgoldenrod#b8860brgb(184, 134, 11)
peru#cd853frgb(205, 133, 63)
chocolate#d2691ergb(210, 105, 30)
saddlebrown#8b4513rgb(139, 69, 19)
sienna#a0522drgb(160, 82, 45)
brown#a52a2argb(165, 42, 42)
maroon#800000rgb(128, 0, 0)
白系(17色)
カラーネームHEXRGB
white#ffffffrgb(255, 255, 255)
snow#fffafargb(255, 250, 250)
honeydew#f0fff0rgb(240, 255, 240)
mintcream#f5fffargb(245, 255, 250)
azure#f0ffffrgb(240, 255, 255)
aliceblue#f0f8ffrgb(240, 248, 255)
ghostwhite#f8f8ffrgb(248, 248, 255)
whitesmoke#f5f5f5rgb(245, 245, 245)
seashell#fff5eergb(255, 245, 238)
beige#f5f5dcrgb(245, 245, 220)
oldlace#fdf5e6rgb(253, 245, 230)
floralwhite#fffaf0rgb(255, 250, 240)
ivory#fffff0rgb(255, 255, 240)
antiquewhite#faebd7rgb(250, 235, 215)
linen#faf0e6rgb(250, 240, 230)
lavenderblush#fff0f5rgb(255, 240, 245)
mistyrose#ffe4e1rgb(255, 228, 225)
黒系(17色)
カラーネームHEXRGB
gainsboro#dcdcdcrgb(220, 220, 220)
lightgray#d3d3d3rgb(211, 211, 211)
lightgrey#d3d3d3rgb(211, 211, 211)
silver#c0c0c0rgb(192, 192, 192)
darkgray#a9a9a9rgb(169, 169, 169)
darkgrey#a9a9a9rgb(169, 169, 169)
gray#808080rgb(128, 128, 128)
grey#808080rgb(128, 128, 128)
dimgray#696969rgb(105, 105, 105)
dimgrey#696969rgb(105, 105, 105)
lightslategray#778899rgb(119, 136, 153)
lightslategrey#778899rgb(119, 136, 153)
slategray#708090rgb(112, 128, 144)
slategrey#708090rgb(112, 128, 144)
darkslategray#2f4f4frgb(47, 79, 79)
darkslategrey#2f4f4frgb(47, 79, 79)
black#000000rgb(0, 0, 0)
CSS Color Module Level 4

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

カラーネームHEXRGB
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やブラウザのバージョンなどの環境に依存して正しく表示できない場合があるので注意してください!