ＨＴＭＬ ワンポイント 色 |
今回は『色』を取り上げます。まず、下の２行は白から黒までを６段階の濃さで作ってあります。見分けることが出来るでしょうか。
| #ffffff | #cccccc | #999999 | #666666 | #333333 | #000000 |
| #000000 | #333333 | #666666 | #999999 | #cccccc | #ffffff |
色は光の３原色、すなわち Ｒ(red)、Ｇ(green)、Ｂ(blue) を混ぜ合わせることによって作られます。ひとつの光の強さを256段階（16進数で #00〜#ff）に変化させると256x256x256=16777216通りの組み合わせ（色）が出来ます。
３原色を強（#ff）、中（#80）、ゼロ（#00）の３段階で組み合わせると次のようになります。基本になる色については「色の名前」でも表すことが出来ます。
| #ffffff Ｗｈｉｔｅ | ffff80 | #ffff00 Ｙｅｌｌｏｗ |
| #ff80ff | #ff8080 | #ff8000 |
| #ff00ff Ｆｕｃｈｉａ | #ff0080 | #ff0000 Ｒｅｄ |
| #80ffff | #80ff80 | #80ff00 |
| #8080ff | #808080 Ｇｒａｙ | #808000 Ｏｌｉｖｅ |
| #8000ff | #800080 Ｐｕｒｐｌｅ | #800000 Ｍａｒｏｏｎ |
| #00ffff Ａｑｕａ | #00ff80 | #00ff00 Ｇｒｅｅｎ |
| #0080ff | #008080 Ｔｅａｌ | #008000 Ｌｉｍｅ |
| #0000ff Ｂｌｕｅ | #000080 Ｎａｖｙ | #000000 Ｂｌａｃｋ |
原色を256通りに混ぜ合わせた1677万通りの組み合わせは、あまりにも多すぎますので、実用的な基本になる色として２１６色を使います。（他の色<強さの組み合わせ>を使ってはならないと言うのではありません）
これは光の強さを 0から、51（16進数で #33、#は16進数であることを示す）ずつ増やして 255(=#ff)までの６段階に変化させたもので、6x6x6=216色となります。
次の表はこうした２１６色を並べたものです。枡ごとに背景色を指定し、色（光）の値を16進数で表示しました。それぞれの値はＲＧＢの順に２桁で並んでいます。
| #ffffff | #ffffcc | #ffff99 | #ffff66 | #ffff33 | #ffff00 |
| #ffccff | #ffcccc | #ffcc99 | #ffcc66 | #ffcc33 | #ffcc00 |
| #ff99ff | #ff99cc | #ff9999 | #ff9966 | #ff9933 | #ff9900 |
| #ff66ff | #ff66cc | #ff6699 | #ff6666 | #ff6633 | #ff6600 |
| #ff33ff | #ff33cc | #ff3399 | #ff3366 | #ff3333 | #ff3300 |
| #ff00ff | #ff00cc | #ff0099 | #ff0066 | #ff0033 | #ff0000 |
| #ccffff | #ccffcc | #ccff99 | #ccff66 | #ccff33 | #ccff00 |
| #ccccff | #cccccc | #cccc99 | #cccc66 | #cccc33 | #cccc00 |
| #cc99ff | #cc99cc | #cc9999 | #cc9966 | #cc9933 | #cc9900 |
| #cc66ff | #cc66cc | #cc6699 | #cc6666 | #cc6633 | #cc6600 |
| #cc33ff | #cc33cc | #cc3399 | #cc3366 | #cc3333 | #cc3300 |
| #cc00ff | #cc00cc | #cc0099 | #cc0066 | #cc0033 | #cc0000 |
| #99ffff | #99ffcc | #99ff99 | #99ff66 | #99ff33 | #99ff00 |
| #99ccff | #99cccc | #99cc99 | #99cc66 | #99cc33 | #99cc00 |
| #9999ff | #9999cc | #999999 | #999966 | #999933 | #999900 |
| #9966ff | #9966cc | #996699 | #996666 | #996633 | #996600 |
| #9933ff | #9933cc | #993399 | #993366 | #993333 | #993300 |
| #9900ff | #9900cc | #990099 | #990066 | #990033 | #990000 |
| #66ffff | #66ffcc | #66ff99 | #66ff66 | #66ff33 | #66ff00 |
| #66ccff | #66cccc | #66cc99 | #66cc66 | #66cc33 | #66cc00 |
| #6699ff | #6699cc | #669999 | #669966 | #669933 | #669900 |
| #6666ff | #6666cc | #666699 | #666666 | #666633 | #666600 |
| #6633ff | #6633cc | #663399 | #663366 | #663333 | #663300 |
| #6600ff | #6600cc | #660099 | #660066 | #660033 | #660000 |
| #33ffff | #33ffcc | #33ff99 | #33ff66 | #33ff33 | #33ff00 |
| #33ccff | #33cccc | #33cc99 | #33cc66 | #33cc33 | #33cc00 |
| #3399ff | #3399cc | #339999 | #339966 | #339933 | #339900 |
| #3366ff | #3366cc | #336699 | #336666 | #336633 | #336600 |
| #3333ff | #3333cc | #333399 | #333366 | #333333 | #333300 |
| #3300ff | #3300cc | #330099 | #330066 | #330033 | #330000 |
| #00ffff | #00ffcc | #00ff99 | #00ff66 | #00ff33 | #00ff00 |
| #00ccff | #00cccc | #00cc99 | #00cc66 | #00cc33 | #00cc00 |
| #0099ff | #0099cc | #009999 | #009966 | #009933 | #009900 |
| #0066ff | #0066cc | #006699 | #006666 | #006633 | #006600 |
| #0033ff | #0033cc | #003399 | #003366 | #003333 | #003300 |
| #0000ff | #0000cc | #000099 | #000066 | #000033 | #000000 |
すべての色の違いが見分けられたでしょうか？
液晶やブラウン管の特性に差がありますから一台ごとに色の見え方が違っていると考えたほうが良いと思います。
せっかく微妙な色の調整をしても、他所のディスプレイでは自分の意図とは違った色に見えるということが起こります。なるべくいろんな機械で自分のホームページを覗いて比べてみてください。