Web ColorとWeb Safe Color

この覚書は色について扱っています。また説明のためにW3Cの仕様で定義されていない色名を色指定の引数として使用しています。このため閲覧環境によっては正しい色が表示されない可能性があります。

推奨される色の指定方法

HTMLで使用される色名はたくさんありますが,W3CCSS 2.1の仕様として定めた色のキーワードは, aqua (#00ffff), black (#000000), blue (#0000ff), fuchsia (#ff00ff), gray (#808080), green (#008000), lime (#00ff00), maroon (#800000), navy (#000080), olive (#808000), orange (#ffa500), purple (#800080), red (#ff0000), silver (#c0c0c0), teal (#008080), white (#ffffff), yellow (#ffff00) の17色だけで,他の色はRGB色モデルによる値で指定することが推奨されます。

また,表示の同一性とアクセシビリティの観点から,Webセーフカラーと呼ばれる216色に制限するという考え方もあります。「宗教的」な強制になりかねないので,Webセーフカラーの使用を強く主張するものではありませんが,微妙な色づかいが必要でない状況であればWebセーフカラーを使うことをおすすめしたいところです。

キーワードからRGB値へ

次の表は,Webカラーのキーワード,WebカラーのRGB色モデルによる指定,単純な計算によって近似値とされたWebセーフカラーのRGB値です。近似値の計算は以下のように行います。

RGB値は赤・緑・青の三原色を0〜255の値(8ビット)で表わしたものです。Webセーフカラーは,この256段階を6段階に簡素化した値,すなわち十進数で0/51/102/153/204/255,十六進数で00/33/66/99/CC/FFに限ってRGB値を構成した色のグループです。Webカラーの持つRGB値の赤・緑・青のそれぞれの値を,この6段階の値に25捨26入したものが近似値ということになります。ただし,あくまでも3色ばらばらの計算上の近似値ですから,見た目の色がかけ離れる場合がありますので,あくまでも目安ということで表を見てください。

Web Color Name to Web Safe Color
キーワードRGB値近似値
Aliceblue#f0f8ff#ffffff
Antiquewhite#faebd7#ffffcc
Aqua#00ffff#00ffff
Aquamarine#7fffd4#66ffcc
Azure#f0ffff#ffffff
Beige#f5f5dc#ffffcc
Bisque#ffe4c4#ffcccc
Black#000000#000000
Blanchedalmond#ffebcd#ffffcc
Blue#0000ff#0000ff
Blueviolet#8a2be2#9933cc
Brown#a52a2a#993333
Burlywood#deb887#cccc99
Cadetblue#5f9ea0#669999
Chartreuse#7fff00#66ff00
Chocolate#d2691e#cc6633
Coral#ff7f50#ff6666
Cornflowerblue#6495ed#6699ff
Cornsilk#fff8dc#ffffcc
Crimson#dc143c#cc0033
Cyan#00ffff#00ffff
Darkblue#00008b#000099
Darkcyan#008b8b#009999
Darkgoldenrod#b8860b#cc9900
Darkgray#a9a9a9#999999
Darkgreen#006400#006600
Darkkhaki#bdb76b#cccc66
Darkmagenta#8b008b#990099
Darkolivegreen#556b2f#666633
Darkorange#ff8c00#ff9900
Darkorchid#9932cc#9933cc
Darkred#8b0000#990000
Darksalmon#e9967a#ff9966
Darkseagreen#8fbc8f#99cc99
Darkslateblue#483d8b#333399
Darkslategray#2f4f4f#336666
Darkturquoise#00ced1#00cccc
Darkviolet#9400d3#9900cc
Deeppink#ff1493#ff0099
Deepskyblue#00bfff#00ccff
Dimgray#696969#666666
Dodgerblue#1e90ff#3399ff
Firebrick#b22222#993333
Floralwhite#fffaf0#ffffff
Forestgreen#228b22#339933
Fuchsia#ff00ff#ff00ff
Gainsboro#dcdcdc#cccccc
Ghostwhite#f8f8ff#ffffff
Gold#ffd700#ffcc00
Goldenrod#daa520#cc9933
Gray#808080#999999
Green#008000#009900
Greenyellow#adff2f#99ff33
Honeydew#f0fff0#ffffff
Hotpink#ff69b4#ff66cc
Indianred#cd5c5c#cc6666
Indigo#4b0082#330099
Ivory#fffff0#ffffff
Khaki#f0e68c#ffff99
Lavender#e6e6fa#ffffff
Lavenderblush#fff0f5#ffffff
Lawngreen#7cfc00#66ff00
Lemonchiffon#fffacd#ffffcc
Lightblue#add8e6#99ccff
Lightcoral#f08080#ff9999
Lightcyan#e0ffff#ccffff
Lightgoldenrodyellow#fafad2#ffffcc
Lightgreen#90ee90#99ff99
Lightgrey#d3d3d3#cccccc
Lightpink#ffb6c1#ffcccc
Lightsalmon#ffa07a#ff9966
Lightseagreen#20b2aa#339999
Lightskyblue#87cefa#99ccff
Lightslategray#778899#669999
Lightsteelblue#b0c4de#99cccc
Lightyellow#ffffe0#ffffcc
Lime#00ff00#00ff00
Limegreen#32cd32#33cc33
Linen#faf0e6#ffffff
Magenta#ff00ff#ff00ff
Maroon#800000#990000
Mediumaquamarine#66cdaa#66cc99
Mediumblue#0000cd#0000cc
Mediumorchid#ba55d3#cc66cc
Mediumpurple#9370db#9966cc
Mediumseagreen#3cb371#33cc66
Mediumslateblue#7b68ee#6666ff
Mediumspringgreen#00fa9a#00ff99
Mediumturquoise#48d1cc#33cccc
Mediumvioletred#c71585#cc0099
Midnightblue#191970#000066
Mintcream#f5fffa#ffffff
Mistyrose#ffe4e1#ffcccc
Moccasin#ffe4b5#ffcccc
Navajowhite#ffdead#ffcc99
Navy#000080#000099
Oldlace#fdf5e6#ffffff
Olive#808000#999900
Olivedrab#6b8e23#669933
Orange#ffa500#ff9900
Orangered#ff4500#ff3300
Orchid#da70d6#cc66cc
Palegoldenrod#eee8aa#ffff99
Palegreen#98fb98#99ff99
Paleturquoise#afeeee#99ffff
Palevioletred#db7093#cc6699
Papayawhip#ffefd5#ffffcc
Peachpuff#ffdab9#ffcccc
Peru#cd853f#cc9933
Pink#ffc0cb#ffcccc
Plum#dda0dd#cc99cc
Powderblue#b0e0e6#99ccff
Purple#800080#990099
Red#ff0000#ff0000
Rosybrown#bc8f8f#cc9999
Royalblue#4169e1#3366cc
Saddlebrown#8b4513#993300
Salmon#fa8072#ff9966
Sandybrown#f4a460#ff9966
Seagreen#2e8b57#339966
Seashell#fff5ee#ffffff
Sienna#a0522d#996633
Silver#c0c0c0#cccccc
Skyblue#87ceeb#99ccff
Slateblue#6a5acd#6666cc
Slategray#708090#669999
Snow#fffafa#ffffff
Springgreen#00ff7f#00ff66
Steelblue#4682b4#3399cc
Tan#d2b48c#cccc99
Teal#008080#009999
Thistle#d8bfd8#cccccc
Tomato#ff6347#ff6633
Turquoise#40e0d0#33cccc
Violet#ee82ee#ff99ff
Wheat#f5deb3#ffcccc
White#ffffff#ffffff
Whitesmoke#f5f5f5#ffffff
Yellow#ffff00#ffff00
Yellowgreen#9acd32#99cc33

参考

Webセーフカラーの一覧も参照できます。

Web ColorからWeb Safe Colorへ.
The PC resources. valid XHTML 1.0 Strict. ©2005.01.04 by mezala.