表紙目次情報・コンピュータ・・・HTMLガイド > ワンポイント-色
作成:2005年03月19日 改版:2013年8月20日 

HTMLワンポイント

  色は光の3原色、すなわち R(red)、G(green)、B(blue) を混ぜ合わせることによって作られます。ひとつの光の強さを256段階(16進数で #00〜#ff)に変化させると 256×256×256= 16777216通りの組み合わせ(色)が出来ます。

直前のページに戻る

色の組み合わせ Web基本16色

  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色の名前が定義されていて、色の名前で表示できます。

Web セーフ カラー(216色)

  原色を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

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

ページの先頭に戻る

参考 灰色6階調

  rgb の3色を同じ強さで混ぜ合わせると灰色になります。下は白から黒までを6段階の濃さで作ってあります。単色でも、いろんな表現ができそうですね。

#ffffff #cccccc #999999 #666666 #333333 #000000
#000000 #333333 #666666 #999999 #cccccc #ffffff

ページの先頭に戻る  直前のページに戻る


作成 : 小田桐 一良 (舞子の浜

Valid HTML 4.01 Transitional   正当なCSSです!