Web セーフカラーってなに?

日本語に訳してみると「WEB上で安全な色」となるのでしょうか?よく意味がわからないこの単語について今回は話を進めていきます。

ただ、「色の予備知識」で勉強した内容が分かっていないと少し分かりづらいかもしれません。不安な方は復習に戻って下さい。

さて、安全な色と勝手に訳させてもらいましたが、いったい何が安全なのかを考えてみましょう。これまでも何回か話してきましたが、WEBページは広告のちらしなどと違って、誰でも同じように見えるわけではありません。「HPを見る道具」で話しました通り、見る人のブラウザによって表示のされ方が変わることもあります。見る人のOSによって表示のされ方が変わることもあります。WEBページを見る人の環境によって、表示のされ方が違うこともあるということでしたよね。

話を戻しますが、この「表示のされ方」に実は「色」も含まれているのです。WEBページの作り手としましては、自分の思惑と違った表示のされ方をされたのではおもしろくないですよね。

そこで、ユーザーの多い(当時多かった)「Windows」と「Macintosh」の両方で、ほぼ同じように表示される色を「Netscape社」という会社が制定しました。その色のことを「Web セーフカラー」と呼んでいます。言い換えますと、「環境によって色の置換が起こらないことを約束された色」となります。

WEBページ上の色は赤と緑と青の組み合わせであらわすことができる、と「色の予備知識」で解説しましたよね。そしてそれぞれの色は256段階の強さ(0〜255)であらわすことができました。ということは、Webセーフカラーにこだわらなければ

256 × 256 × 256 = 16,777,216

通りの色をWEBページ上で表すことができるのです。しかし、Webセーフカラーにこだわるとすべての色が使えるわけではありません。安全を保障されている色というのは当然限られているわけで、それぞれの色の強さを6段階でしかあらわすことができません。その6段階を16進数で表現しますと

「00」「33」「66」「99」「cc」「ff」

の値となっています。つまり、下記に示します216色がWebセーフカラーとなるわけですね。

  #000000   #000033   #000066   #000099   #0000cc   #0000ff
  #003300   #003333   #003366   #003399   #0033cc   #0033ff
  #006600   #006633   #006666   #006699   #0066cc   #0066ff
  #009900   #009933   #009966   #009999   #0099cc   #0099ff
  #00cc00   #00cc33   #00cc66   #00cc99   #00cccc   #00ccff
  #00ff00   #00ff33   #00ff66   #00ff99   #00ffcc   #00ffff
  #330000   #330033   #330066   #330099   #3300cc   #3300ff
  #333300   #333333   #333366   #333399   #3333cc   #3333ff
  #336600   #336633   #336666   #336699   #3366cc   #3366ff
  #339900   #339933   #339966   #339999   #3399cc   #3399ff
  #33cc00   #33cc33   #33cc66   #33cc99   #33cccc   #33ccff
  #33ff00   #33ff33   #33ff66   #33ff99   #33ffcc   #33ffff
  #660000   #660033   #660066   #660099   #6600cc   #6600ff
  #663300   #663333   #663366   #663399   #6633cc   #6633ff
  #666600   #666633   #666666   #666699   #6666cc   #6666ff
  #669900   #669933   #669966   #669999   #6699cc   #6699ff
  #66cc00   #66cc33   #66cc66   #66cc99   #66cccc   #66ccff
  #66ff00   #066ff33   #66ff66   #66ff99   #66ffcc   #66ffff
  #990000   #990033   #990066   #990099   #9900cc   #9900ff
  #993300   #993333   #993366   #993399   #9933cc   #9933ff
  #996600   #996633   #996666   #996699   #9966cc   #9966ff
  #999900   #999933   #999966   #999999   #9999cc   #9999ff
  #99cc00   #99cc33   #99cc66   #99cc99   #99cccc   #99ccff
  #99ff00   #99ff33   #99ff66   #99ff99   #99ffcc   #99ffff
  #cc0000   #cc0033   #cc0066   #cc0099   #cc00cc   #cc00ff
  #cc3300   #cc3333   #cc3366   #cc3399   #cc33cc   #cc33ff
  #cc6600   #cc6633   #cc6666   #cc6699   #cc66cc   #cc66ff
  #cc9900   #cc9933   #cc9966   #cc9999   #cc99cc   #cc99ff
  #cccc00   #cccc33   #cccc66   #cccc99   #cccccc   #cc99ff
  #ccff00   #ccff33   #ccff66   #ccff99   #ccffcc   #ccffff
  #ff0000   #ff0033   #ff0066   #ff0099   #ff00cc   #ff00ff
  #ff3300   #ff3333   #ff3366   #ffff33   #ff33cc   #ff33ff
  #ff6600   #ff6633   #ff6666   #ff6699   #ff66cc   #ff66ff
  #fff9900   #ff9933   #ff9966   #ff9999   #ff99cc   #ff99ff
  #ffcc00   #ffcc33   #ffcc66   #ffcc99   #ffcccc   #ffccff
  #ffff00   #ffff33   #ffff66   #ffff99   #ffffcc   #ffffff
OS
【Operating System】の略でコンピュータの基本的な機能を提供、管理するソフトウェアです。 有名なものでは「Windows」「Mac OS」「Linux」などがあります。
自分の思惑と違った
表示のされ方が違うとは言っても「赤」が「青」に見えるわけではありません。 微妙に色が違う程度と思っておいて下さい。