前置き
Webページにとって色は非常に重要な要素となります。
インターネットを白黒のディスプレイで閲覧している人は、障害者の方などを除けば皆無に近いでしょう。
私が初めてホームページを開設した頃は、グラフィックディスプレイカードも高価で256色程度で見ている人が大部分でした。
ですから、当時は色数には気を使って、基本色以外は使用しないように心掛けました。
今は全く違います。
微妙な配色でデザインして一人で悦に入っています。
自分では気に入った配色をしていたつもりが、実際にはとんでもない見え方をしているかの知れません。
デザインや色の使い方は、大変難しい分野です。
基本色について
HTML 4.01 仕様書に、以下の色がRGB色で指定されています。RGB色による指定も可能ですし、文字による指定も可能です。
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Web Safe Colorについて
Web Safe Colorで指定しておけば、自分が思っていた色に思っていたものと同様の色で表示されます。
しかし、これ以外の色ですとブラウザによってはWeb Safe Colorに置き換えられてしまう可能性があります。
ということは、最初からWeb Safe Colorにしておけば思った通りの色の表示になります。
上記の説明のようにホームページ作成者は、Web Safe Color を使用して配色すべきであると言うのが正統派のやり方のようです。
以前は、私もそのようにしておりましたが、最近では全く無視しております。
他の人の環境ではどのように見えているのか不明ですが、自分の環境で微妙な色の配色を楽しみたいと思うようになったからです。
これはホームページ作成業者なら禁止事項かも知れませんが、個人のサイトなら固い事を言わないでよと開き直るつもりです。
#0000ff #00f RGB(0,0,255) |
#0033ff #03f RGB(0,51,255) |
#0066ff #06f RGB(0,102,255) |
#0099ff #09f RGB(0,153,255) |
#00ccff #0cf RGB(0,204,255) |
#00ffff #0ff RGB(0,255,255) |
#0000cc #00c RGB(0,0,204) |
#0033cc #03c RGB(0,51,204) |
#0066cc #06c RGB(0,102,204) |
#0099cc #09c RGB(0,153,204) |
#00cccc #0cc RGB(0,204,204) |
#00ffcc #0fc RGB(0,255,204) |
#000099 #009 RGB(0,0,153) |
#003399 #039 RGB(0,51,153) |
#006699 #069 RGB(0,102,153) |
#009999 #099 RGB(0,153,153) |
#00cc99 #0c9 RGB(0,204,153) |
#00ff99 #0f9 RGB(0,255,153) |
#000066 #006 RGB(0,0,102) |
#003366 #036 RGB(0,51,102) |
#006666 #066 RGB(0,102,102) |
#009966 #096 RGB(0,153,102) |
#00cc66 #0c6 RGB(0,204,102) |
#00ff66 #0f6 RGB(0,255,102) |
#000033 #003 RGB(0,0,51) |
#003333 #033 RGB(0,51,51) |
#006633 #063 RGB(0,102,51) |
#009933 #093 RGB(0,153,51) |
#00cc33 #0c3 RGB(0,204,51) |
#00ff33 #0f3 RGB(0,255,51) |
#000000 #000 RGB(0,0,0) |
#003300 #030 RGB(0,51,0) |
#006600 #060 RGB(0,102,0) |
#009900 #090 RGB(0,153,0) |
#00cc00 #0c0 RGB(0,204,0) |
#00ff00 #0f0 RGB(0,255,0) |
#3300ff #30f RGB(51,0,255) |
#3333ff #33f RGB(51,51,255) |
#3366ff #36f RGB(51,102,255) |
#3399ff #39f RGB(51,153,255) |
#33ccff #3cf RGB(51,204,255) |
#33ffff #3ff RGB(51,255,255) |
#3300cc #30c RGB(51,0,204) |
#3333cc #33c RGB(51,51,204) |
#3366cc #36c RGB(51,102,204) |
#3399cc #39c RGB(51,153,204) |
#33cccc #3cc RGB(51,204,204) |
#33ffcc #3fc RGB(51,255,204) |
#330099 #309 RGB(51,0,153) |
#333399 #339 RGB(51,51,153) |
#336699 #369 RGB(51,102,153) |
#339999 #399 RGB(51,153,153) |
#33cc99 #3c9 RGB(51,204,153) |
#33ff99 #3f9 RGB(51,255,153) |
#330066 #306 RGB(51,0,102) |
#333366 #336 RGB(51,51,102) |
#336666 #366 RGB(51,102,102) |
#339966 #396 RGB(51,153,102) |
#33cc66 #3c6 RGB(51,204,102) |
#33ff66 #3f6 RGB(51,255,102) |
#330033 #303 RGB(51,0,51) |
#333333 #333 RGB(51,51,51) |
#336633 #363 RGB(51,102,51) |
#339933 #393 RGB(51,153,51) |
#33cc33 #3c3 RGB(51,204,51) |
#33ff33 #3f3 RGB(51,255,51) |
#330000 #300 RGB(51,0,0) |
#333300 #330 RGB(51,51,0) |
#336600 #360 RGB(51,102,0) |
#339900 #390 RGB(51,153,0) |
#33cc00 #3c0 RGB(51,204,0) |
#33ff00 #3f0 RGB(51,255,0) |
#6600ff #60f RGB(102,0,255) |
#6633ff #63f RGB(102,51,255) |
#6666ff #66f RGB(102,102,255) |
#6699ff #69f RGB(102,153,255) |
#66ccff #6cf RGB(102,204,255) |
#66ffff #6ff RGB(102,255,255) |
#6600cc #60c RGB(102,0,204) |
#6633cc #63c RGB(102,51,204) |
#6666cc #66c RGB(102,102,204) |
#6699cc #69c RGB(102,153,204) |
#66cccc #6cc RGB(102,204,204) |
#66ffcc #6fc RGB(102,255,204) |
#660099 #609 RGB(102,0,153) |
#663399 #639 RGB(102,51,153) |
#666699 #669 RGB(102,102,153) |
#669999 #699 RGB(102,153,153) |
#66cc99 #6c9 RGB(102,204,153) |
#66ff99 #6f9 RGB(102,255,153) |
#660066 #606 RGB(102,0,102) |
#663366 #636 RGB(102,51,102) |
#666666 #666 RGB(102,102,102) |
#669966 #696 RGB(102,153,102) |
#66cc66 #6c6 RGB(102,204,102) |
#66ff66 #6f6 RGB(102,255,102) |
#660033 #603 RGB(102,0,51) |
#663333 #633 RGB(102,51,51) |
#666633 #663 RGB(102,102,51) |
#669933 #693 RGB(102,153,51) |
#66cc33 #6c3 RGB(102,204,51) |
#66ff33 #6f3 RGB(102,255,51) |
#660000 #600 RGB(102,0,0) |
#663300 #630 RGB(102,51,0) |
#666600 #660 RGB(102,102,0) |
#669900 #690 RGB(102,153,0) |
#66cc00 #6c0 RGB(102,204,0) |
#66ff00 #6f0 RGB(102,255,00) |
#9900ff #90f RGB(153,0,255) |
#9933ff #93f RGB(153,51,255) |
#9966ff #96f RGB(153,102,255) |
#9999ff #99f RGB(153,153,255) |
#99ccff #9cf RGB(153,204,255) |
#99ffff #9ff RGB(153,255,255) |
#9900cc #90c RGB(153,0,204) |
#9933cc #93c RGB(153,51,204) |
#9966cc #96c RGB(153,102,204) |
#9999cc #99c RGB(153,153,204) |
#99cccc #9cc RGB(153,204,204) |
#99ffcc #9fc RGB(153,255,204) |
#990099 #909 RGB(153,0,153) |
#993399 #939 RGB(153,51,153) |
#996699 #969 RGB(153,102,153) |
#999999 #999 RGB(153,153,153) |
#99cc99 #9c9 RGB(153,204,153) |
#99ff99 #9f9 RGB(153,255,153) |
#990066 #906 RGB(153,0,102) |
#993366 #936 RGB(153,51,102) |
#996666 #966 RGB(153,102,102) |
#999966 #996 RGB(153,153,102) |
#99cc66 #9c6 RGB(153,204,102) |
#99ff66 #9f6 RGB(153,255,102) |
#990033 #903 RGB(153,0,51) |
#993333 #933 RGB(153,51,51) |
#996633 #963 RGB(153,102,51) |
#999933 #993 RGB(153,153,51) |
#99cc33 #9c3 RGB(153,204,51) |
#99ff33 #9f3 RGB(153,255,51) |
#990000 #900 RGB(153,0,0) |
#993300 #930 RGB(153,51,0) |
#996600 #960 RGB(153,102,0) |
#999900 #990 RGB(153,153,0) |
#99cc00 #9c0 RGB(153,204,0) |
#99ff00 #9f0 RGB(153,255,0) |
#cc00ff #c0f RGB(204,0,255) |
#cc33ff #c3f RGB(204,51,255) |
#cc66ff #c6f RGB(204,102,255) |
#cc99ff #c9f RGB(204,153,255) |
#ccccff #ccf RGB(204,204,255) |
#ccffff #cff RGB(204,255,255) |
#cc00cc #c0c RGB(204,0,204) |
#cc33cc #c3c RGB(204,51,204) |
#cc66cc #c6c RGB(204,102,204) |
#cc99cc #c9c RGB(204,153,204) |
#cccccc #ccc RGB(204,204,204) |
#ccffcc #cfc RGB(204,255,204) |
#cc0099 #c09 RGB(204,0,153) |
#cc3399 #c39 RGB(204,51,153) |
#cc6699 #c69 RGB(204,102,153) |
#cc9999 #c99 RGB(204,153,153) |
#cccc99 #cc9 RGB(204,204,153) |
#ccff99 #cf9 RGB(204,255,153) |
#cc0066 #c06 RGB(204,0,102) |
#cc3366 #c36 RGB(204,51,102) |
#cc6666 #c66 RGB(204,102,102) |
#cc9966 #c96 RGB(204,153,102) |
#cccc66 #cc6 RGB(204,204,102) |
#ccff66 #cf6 RGB(204,255,102) |
#cc0033 #c03 RGB(204,0,51) |
#cc3333 #c33 RGB(204,51,51) |
#cc6633 #c63 RGB(204,102,51) |
#cc9933 #c93 RGB(204,153,51) |
#cccc33 #cc3 RGB(204,204,51) |
#ccff33 #cf3 RGB(204,255,51) |
#cc0000 #c00 RGB(204,0,0) |
#cc3300 #c30 RGB(204,51,0) |
#cc6600 #c60 RGB(204,102,0) |
#cc9900 #c90 RGB(204,153,0) |
#cccc00 #cc0 RGB(204,204,0) |
#ccff00 #cf0 RGB(204,255,0) |
#ff00ff #f0f RGB(255,0,255) |
#ff33ff #f3f RGB(255,51,255) |
#ff66ff #f6f RGB(255,102,255) |
#ff99ff #f9f RGB(255,153,255) |
#ffccff #fcf RGB(255,204,255) |
#ffffff #fff RGB(255,255,255) |
#ff00cc #f0c RGB(255,0,204) |
#ff33cc #f3c RGB(255,51,204) |
#ff66cc #f6c RGB(255,102,204) |
#ff99cc #f9c RGB(255,153,204) |
#ffcccc #fcc RGB(255,204,204) |
#ffffcc #ffc RGB(255,255,204) |
#ff0099 #f09 RGB(255,0,153) |
#ff3399 #f39 RGB(255,51,153) |
#ff6699 #f69 RGB(255,102,153) |
#ff9999 #f99 RGB(255,153,153) |
#ffcc99 #fc9 RGB(255,204,153) |
#ffff99 #ff9 RGB(255,255,153) |
#ff0066 #f06 RGB(255,0,102) |
#ff3366 #f36 RGB(255,51,102) |
#ff6666 #f66 RGB(255,102,102) |
#ff9966 #f96 RGB(255,153,102) |
#ffcc66 #fc6 RGB(255,204,102) |
#ffff66 #ff6 RGB(255,255,102) |
#ff0033 #f03 RGB(255,0,51) |
#ff3333 #f33 RGB(255,51,51) |
#ff6633 #f63 RGB(255,102,51) |
#ff9933 #f93 RGB(255,153,51) |
#ffcc33 #fc3 RGB(255,204,51) |
#ffff33 #ff3 RGB(255,255,51) |
#ff0000 #f00 RGB(255,0,0) |
#ff3300 #f30 RGB(255,51,0) |
#ff6600 #f60 RGB(255,102,0) |
#ff9900 #f90 RGB(255,153,0) |
#ffcc00 #fc0 RGB(255,204,0) |
#ffff00 #ff0 RGB(255,255,0) |
基本色以外の色について
以下の色名によるものは各ブラウザが独自に対応している色です。また、ブラウザによっては、解釈できないものもあります。なるべくRGB指定にしたほうが良いでしょう。
以下のものは色名した色とRGB指定したものの対応表です。
|
システムカラーについて
CSS2により、システムが使用するシステムカラーを使うことが可能となりました。当然システムが現在使用している色となりますので、各々の人の環境に左右された色となります。以下に示します。
|