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

広告

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

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

p {
  color: red;
}

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

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

white#ffffffrgb(255, 255, 255)
silver#c0c0c0rgb(192, 192, 192)
gray#808080rgb(128, 128, 128)
black#000000rgb(0, 0, 0)
lime#00ff00rgb(0, 255, 0)
olive#808000rgb(128, 128, 0)
green#008000rgb(0, 128, 0)
teal#008080rgb(0, 128, 128)
aqua#00ffffrgb(0, 255, 255)
red#ff0000rgb(255, 0, 0)
maroon#800000rgb(128, 0, 0)
yellow#ffff00rgb(255, 255, 0)
blue#0000ffrgb(0, 0, 255)
navy#000080rgb(0, 0, 128)
purple#800080rgb(128, 0, 128)
fuchsia#ff00ffrgb(255, 0, 255)
orange#ffa500rgb(255, 165, 0)

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

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

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

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

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)