HTML ワンポイント 色 |
下の2行は白から黒までを6段階の濃さで作ってあります。見分けることが出来るでしょうか。
#ffffff | #cccccc | #999999 | #666666 | #333333 | #000000 |
#000000 | #333333 | #666666 | #999999 | #cccccc | #ffffff |
色は光の3原色、すなわち R(red)、G(green)、B(blue) を混ぜ合わせることによって作られます。ひとつの光の強さを256段階(16進数で #00〜#ff)に変化させると256x256x256=16777216通りの組み合わせ(色)が出来ます。
3原色を強(#ff)、中(#80)、ゼロ(#00)の3段階で組み合わせると次のようになります。基本になる色については「色の名前」でも表すことが出来ます。
#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 Green |
#0080ff | #008080 Teal | #008000 Lime |
#0000ff Blue | #000080 Navy | #000000 Black |
原色を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 |
すべての色の違いが見分けられたでしょうか?
液晶やブラウン管の特性に差がありますから一台ごとに色の見え方が違っていると考えたほうが良いと思います。
せっかく微妙な色の調整をしても、他所のディスプレイでは自分の意図とは違った色に見えるということが起こります。なるべくいろんな機械で自分のホームページを覗いて比べてみてください。