この覚書は色について扱っています。また説明のためにW3Cの仕様で定義されていない色名を色指定の引数として使用しています。このため閲覧環境によっては正しい色が表示されない可能性があります。
HTMLで使用される色名はたくさんありますが,W3CがCSS 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セーフカラーを使うことをおすすめしたいところです。
次の表は,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色ばらばらの計算上の近似値ですから,見た目の色がかけ離れる場合がありますので,あくまでも目安ということで表を見てください。
キーワード | 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 |