キーワードを使った色の指定

色を指定する場合には前のページのように赤緑青の各値を数値で指定する方法の他に色のキーワードを使った指定も可能です。基本となる17色について色を表すキーワードが登録されています。

例えばp要素の文字の色としてredを指定する場合は次のように記述します。

p {
  color: red;
}

redは#ff0000を表すキーワードですのでredと指定しても#ff0000を指定しても同じ結果となります。

使用可能なキーワードは次の17個です。

white	#ffffff	rgb(255, 255, 255)
silver	#c0c0c0	rgb(192, 192, 192)
gray	#808080	rgb(128, 128, 128)
black	#000000	rgb(0, 0, 0)
lime	#00ff00	rgb(0, 255, 0)
olive	#808000	rgb(128, 128, 0)
green	#008000	rgb(0, 128, 0)
teal	#008080	rgb(0, 128, 128)
aqua	#00ffff	rgb(0, 255, 255)
red	#ff0000	rgb(255, 0, 0)
maroon	#800000	rgb(128, 0, 0)
yellow	#ffff00	rgb(255, 255, 0)
blue	#0000ff	rgb(0, 0, 255)
navy	#000080	rgb(0, 0, 128)
purple	#800080	rgb(128, 0, 128)
fuchsia	#ff00ff	rgb(255, 0, 255)
orange	#ffa500	rgb(255, 165, 0)

※基本16色にCSS2.1からorangeが追加となりました。

その他のよく使用される色

基本17色を含む比較的良く使われる色の一覧です。

blanchedalmond	#ffebcd	rgb(255, 235, 205)
lightyellow	#ffffe0	rgb(255, 255, 204)
cornsilk	#fff8dc	rgb(255, 248, 220)
antiquewhite	#faebd7	rgb(250, 235, 215)
papayawhip	#ffefd5	rgb(255, 239, 213)
lemonchiffon	#fffacd	rgb(255, 250, 205)
beige	#f5f5dc	rgb(245, 245, 220)
linen	#faf0e6	rgb(250, 240, 230)
oldlace	#fdf5e6	rgb(253, 245, 230)
lightcyan	#e0ffff	rgb(224, 255, 255)
aliceblue	#f0f8ff	rgb(240, 248, 255)
whitesmoke	#f5f5f5	rgb(245, 245, 245)
lavenderblush	#fff0f5	rgb(255, 240, 245)
floralwhite	#fffaf0	rgb(255, 250, 240)
mintcream	#f5fffa	rgb(245, 255, 250)
ghostwhite	#f8f8ff	rgb(248, 248, 255)
honeydew	#f0fff0	rgb(240, 255, 240)
seashell	#fff5ee	rgb(255, 245, 238)
ivory	#fffff0	rgb(255, 255, 240)
azure	#f0ffff	rgb(240, 255, 255)
snow	#fffafa	rgb(255, 250, 250)
white	#ffffff	rgb(255, 255, 255)
gainsboro	#dcdcdc	rgb(220, 220, 220)
lightgrey	#d3d3d3	rgb(211, 211, 211)
silver	#c0c0c0	rgb(192, 192, 192)
darkgray	#a9a9a9	rgb(169, 169, 169)
lightslategray	#778899	rgb(119, 136, 153)
slategray	#708090	rgb(112, 128, 144)
gray	#808080	rgb(128, 128, 128)
dimgray	#696969	rgb(105, 105, 105)
darkslategray	#2f4f4f	rgb(47, 79, 79)
black	#000000	rgb(0, 0, 0)
lawngreen	#7cfc00	rgb(124, 252, 0)
greenyellow	#adff2f	rgb(173, 255, 47)
chartreuse	#7fff00	rgb(127, 255, 0)
lime	#00ff00	rgb(0, 255, 0)
limegreen	#32cd32	rgb(50, 205, 50)
yellowgreen	#9acd32	rgb(154, 205, 50)
olive	#808000	rgb(128, 128, 0)
olivedrab	#6b8e23	rgb(107, 142, 35)
darkolivegreen	#556b2f	rgb(85, 107, 47)
forestgreen	#228b22	rgb(34, 139, 34)
darkgreen	#006400	rgb(0, 100, 0)
green	#008000	rgb(0, 128, 0)
seagreen	#2e8b57	rgb(46, 139, 87)
mediumseagreen	#3cb371	rgb(60, 179, 113)
darkseagreen	#8fbc8f	rgb(143, 188, 143)
lightgreen	#90ee90	rgb(144, 238, 144)
palegreen	#98fb98	rgb(152, 251, 152)
springgreen	#00ff7f	rgb(0, 255, 127)
mediumspringgreen	#00fa9a	rgb(0, 250, 154)
teal	#008080	rgb(0, 128, 128)
darkcyan	#008b8b	rgb(0, 139, 139)
lightseagreen	#20b2aa	rgb(32, 178, 170)
mediumaquamarine	#66cdaa	rgb(102, 205, 170)
cadetblue	#5f9ea0	rgb(95, 158, 160)
steelblue	#4682b4	rgb(70, 130, 180)
aquamarine	#7fffd4	rgb(127, 255, 212)
powderblue	#b0e0e6	rgb(176, 224, 230)
paleturquoise	#afeeee	rgb(175, 238, 238)
lightblue	#add8e6	rgb(173, 216, 230)
lightsteelblue	#b0c4de	rgb(176, 196, 222)
skyblue	#87ceeb	rgb(135, 206, 235)
lightskyblue	#87cefa	rgb(135, 206, 250)
mediumturquoise	#48d1cc	rgb(72, 209, 204)
turquoise	#40e0d0	rgb(64, 224, 208)
darkturquoise	#00ced1	rgb(0, 205, 209)
aqua	#00ffff	rgb(0, 255, 255)
red	#ff0000	rgb(255, 0, 0)
crimson	#dc143c	rgb(220, 20, 60)
maroon	#800000	rgb(128, 0, 0)
darkred	#8b0000	rgb(139, 0, 0)
brown	#a52a2a	rgb(165, 42, 42)
sienna	#a0522d	rgb(160, 82, 45)
saddlebrown	#8b4513	rgb(139, 69, 19)
indianred	#cd5c5c	rgb(205, 92, 92)
rosybrown	#bc8f8f	rgb(188, 143, 143)
lightcoral	#f08080	rgb(240, 128, 128)
salmon	#fa8072	rgb(250, 128, 114)
darksalmon	#e9967a	rgb(233, 250, 112)
coral	#ff7f50	rgb(255, 127, 80)
tomato	#ff6347	rgb(255, 99, 71)
sandybrown	#f4a460	rgb(244, 164, 96)
lightsalmon	#ffa07a	rgb(255, 160, 122)
peru	#cd853f	rgb(205, 133, 63)
chocolate	#d2691e	rgb(210, 105, 30)
orangered	#ff4500	rgb(255, 69, 0)
orange	#ffa500	rgb(255, 165, 0)
darkorange	#ff8c00	rgb(255, 140, 0)
tan	#d2b48c	rgb(210, 180, 140)
peachpuff	#ffdab9	rgb(255, 218, 185)
bisque	#ffe4c4	rgb(255, 228, 196)
moccasin	#ffe4b5	rgb(255, 228, 181)
navajowhite	#ffdead	rgb(255, 222, 173)
wheat	#f5deb3	rgb(245, 222, 179)
burlywood	#deb887	rgb(222, 184, 135)
darkgoldenrod	#b8860b	rgb(184, 134, 11)
goldenrod	#daa520	rgb(218, 165, 32)
gold	#ffd700	rgb(255, 215, 0)
yellow	#ffff00	rgb(255, 255, 0)
lightgoldenrodyellow	#fafad2	rgb(250, 250, 210)
palegoldenrod	#eee8aa	rgb(238, 232, 170)
khaki	#f0e68c	rgb(240, 230, 140)
darkkhaki	#bdb76b	rgb(189, 183, 107)
cyan	#00ffff	rgb(0, 255, 255)
deepskyblue	#00bfff	rgb(0, 191, 255)
dodgerblue	#1e90ff	rgb(30, 144, 255)
cornflowerblue	#6090ef	rgb(96, 144, 239)
royalblue	#4169e1	rgb(65, 105, 225)
blue	#0000ff	rgb(0, 0, 255)
mediumblue	#0000cd	rgb(0, 0, 205)
navy	#000080	rgb(0, 0, 128)
darkblue	#00008b	rgb(0, 0, 139)
midnightblue	#191970	rgb(25, 25, 112)
darkslateblue	#483d8b	rgb(72, 61, 139)
slateblue	#6a5acd	rgb(106, 90, 205)
mediumsateblue	#0e00b0	rgb(14, 0, 176)
mediumpurple	#9370db	rgb(147, 112, 219)
darkorchid	#9932cc	rgb(153, 50, 204)
darkviolet	#9400d3	rgb(148, 0, 211)
blueviolet	#8a2be2	rgb(138, 43, 226)
mediumorchid	#ba55d3	rgb(186, 85, 211)
plum	#dda0dd	rgb(221, 160, 221)
lavender	#e6e6fa	rgb(230, 230, 250)
thistle	#d8b8d8	rgb(216, 191, 216)
orchid	#da70d6	rgb(218, 112, 214)
violet	#ee82ee	rgb(238, 130, 238)
indigo	#4b0082	rgb(75, 0, 130)
darkmagenta	#8b008b	rgb(139, 0, 139)
purple	#800080	rgb(128, 0, 128)
mediumvioletred	#c71585	rgb(199, 21, 133)
deeppink	#ff1493	rgb(255, 0, 147)
fuchsia	#ff00ff	rgb(255, 0, 255)
magenta	#ff00ff	rgb(255, 0, 255)
hotpink	#ff69b4	rgb(255, 105, 180)
palevioletred	#db7093	rgb(219, 112, 147)
lightpink	#ffb6c1	rgb(255, 182, 193)
pink	#ffc0cb	rgb(255, 192, 203)
mistyrose	#ffe4e1	rgb(255, 228, 225)