色は光の3原色、すなわち R(red)、G(green)、B(blue) を混ぜ合わせることによって作られます。ひとつの光の強さを256段階(16進数で #00〜#ff)に変化させると 256×256×256= 16777216通りの組み合わせ(色)が出来ます。
3原色を、強(#ff)、中(#80)、ゼロ(#00)の3段階で組み合わせると下のように 27色ができます。
#ffffff White | #ffff80 | #ffff00 Yellow |
#ff80ff | #ff8080 | #ff8000 |
#ff00ff Fuchia | #ff0080 | #ff0000 Red |
#80ffff | #80ff80 | #80ff00 |
#8080ff | #808080 Gray | #808000 Olive |
#8000ff | #800080 Purple | #800000 Maroon |
#00ffff Aqua | #00ff80 | #00ff00 Lime |
#0080ff | #008080 Teal | #008000 Green |
#0000ff Blue | #000080 Navy | #000000 Black |
表の中で名前の付いている15色に #c0c0c0 Silver を加えた 16色は Web基本16色 として定義されており、古いブラウザーでも色を正しく表示する事ができます。これらはの色は「色の名前」でも表すことが出来ます。(例)#ffff00 と書く代わりに yellow と書いてもよろしい。
なお、HTMLでは 147色の名前が定義されていて、色の名前で表示できます。
原色を256通りに混ぜ合わせた1677万通りの組み合わせは、あまりにも多すぎますので、実用的な基本になる色として 216色を使います。(他の色<強さの組み合わせ>を使ってはならないと言うのではありません)
これは光の強さを 0から、51(16進数で #33、#は16進数であることを示す)ずつ増やして 255(= #ff)までの6段階に変化させたもので、6x6x6=216色となります。
次の表はこうした 216色を並べたものです。枡ごとに背景色に指定し、色(光)の値を16進数で表示しました。それぞれの値は RGBの順に2桁で並んでいます。
こんなに多くの色を見分けることは困難ですし、ディスプレイも対応していません。
#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 |
すべての色の違いが見分けられたでしょうか?
ディスプレイの特性に差がありますから一台ごとに色の見え方が違っていると考えたほうが良いようです。
せっかく微妙な色の調整をしても、他所のディスプレイでは自分の意図とは違った色に見えるということが起こります。なるべくいろんなパソコン(ディスプレイ)で自分のホームページを覗いて比べてみてください。
rgb の3色を同じ強さで混ぜ合わせると灰色になります。下は白から黒までを6段階の濃さで作ってあります。単色でも、いろんな表現ができそうですね。
#ffffff | #cccccc | #999999 | #666666 | #333333 | #000000 |
#000000 | #333333 | #666666 | #999999 | #cccccc | #ffffff |