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

 すべての色の違いが見分けられたでしょうか?
 液晶やブラウン管の特性に差がありますから一台ごとに色の見え方が違っていると考えたほうが良いと思います。
 せっかく微妙な色の調整をしても、他所のディスプレイでは自分の意図とは違った色に見えるということが起こります。なるべくいろんな機械で自分のホームページを覗いて比べてみてください。

直前のページに戻る  



作成 : 小田桐 一良