Webページをデザインするとき、デザイナーはデザインのクオリティを重視するためか、当たり前のように24ビットトゥルーカラー（またはフルカラー）をサポートしているマシン環境で制作を行っています。しかしながら、そのページを閲覧するユーザー側でも同じような環境で見ているとは限らないのです。
Webが一般化しはじめた初期の頃と違って、最近では一般ユーザ向けのエントリー・パソコンでも16ビットハイカラーや24ビットトゥルーカラー表示が当たり前になってきていますが、数年前のデスクトップマシンやノートパソコンなどでは、８ビットカラーの 256色表示が一般的でした。
Webページ上の色の扱いは、そのような低ビットのカラー環境で表示される場合についてもあらかじめ考慮し、デザインを行うのが理想です。
- ■ ８ビット環境でのディザリングについて
- ディザリングとは、８ビットカラーである 256色の中から色を組み合わせることによって、８ビットカラー環境のモニタでは本来表示できない 256色を超える色を見かけ上作り出す方法です。異なった色のドットを隣り合わせてパターンとしては位置していくと、色が混ざり合って中間色のように見える錯覚を利用します。
-
 |
 |
 |
|
(青いドットと赤いドットを組み合わせると紫色に見えます。) |
- ８ビットカラー環境では、256色を超える色については、ブラウザが 256色の中の色を使って画像にそのようなディザリング処理を自動的に施すか、または最も近い 256色の中の色に直接置き換えてしまいます。
- このとき単色ベタ面を含むイラストやロゴ、単色の背景などは、場合によってはかなり見苦しいディザ処理が行われ、本来グレーのはずの部分がクリーム色に置き換えられてしまったり、黄色いバックグラウンドが真っ白になってしまったりなど、予測のつかない事態が起こります。また
HTML内のコードにも、そういった環境では、それぞれ異なった色にずれてしまうことがあります。
- 「Webセーフカラー」と呼ばれる 216色のパレットから色を選んでページを作成すると、低ビットカラー環境のプラットフォームの違いにおいても、画面に表示される色が変化したり見苦しいディザが施されてしまったりすることがほとんどなくなります。
- ユーザー環境に左右されにくい安定した表示を考えるなら、Webセーフカラーをベースにしてページを作っておいたほうが無難です。
- しかしながら、すべてのデザインを 216色のみを使って制作するのは実際のところ難しいもので、現実的にはページ全体のデザインや画像のクオリティそのものを左右するような大きな単色ベタ面などには、できる限り 216色の Webセーフカラーを使うように気遣いすればいいでしょう。
- 単色ベタ面を多く含む画像の場合は、特にそういった点に関して注意が必要ですが、写真画像の場合は、フルカラーの画像を８ビットカラー環境で表示するのも、あらかじめ８ビットカラーに減色しておくのも、どちらでも結局ディザを施される結果になるため、Webセーフカラーに減色することはあまり意味をなしません。
- 写真などでは下手に減色せず、最適化したフルカラーのJPEG画像を、ユーザー側のブラウザのディザリング処理に任せるようにするほうがいいでしょう。
- ■ ビット深度と色数の関係
- コンピューターのモニタは、ひとつの色のピクセルを表現するために、R（赤）とG（緑）とB（青）という3色の光を用いて、それぞれの色の発光の強度と組み合わせによって「RGBカラー」といわれる混合色を作り出しています。
- 強度は RGB各色につき 0から 255までの 256段階 (2の8乗) あり、0が完全オフ、255が完全オン状態を示します。RGB3色とも0（完全オフ）であれば黒、RGB3色とも 255(完全オン) であれば白となります。例えば、R (赤) が255の半分の127、G (緑) が0、B (青) が 255であれば、その結果は紫がかった青 (マゼンダ) になります。
-
- 各色の 0〜255までの中間の段階数は、コンピューターがサポートしているビット深度の設定によって決まります。段階数が多い（ビット深度が深い)ほど、RGB各強度と組み合わせのパターン数が増えるので、表示できる色数は多くなります。設定できるビット深度の深さは、マシンが搭載している
VRAMの容量によって決まります。
- 24ビットトゥルーカラーの環境では RGB3色それぞれが 256段階のビット深度を持つので、256の3乗 (2の24乗) の組み合わせによって約1670万色の表現が可能となります。
- ■ Webセーフカラーの指定方法
- 8ビットカラーの 256色のうち、
Macintosh と Windowsの間で異なる40色のカラーを除いた、プラットフォーム共通の 216色を「Webセーフカラー」（ブラウザ共通色)といいます。あらかじめこの Webセーフカラーのパレットの中から色を選んでページを作成すれば、８ビットカラー環境においてマシンやブラウザによって色が変換されたり、見苦しくディザ処理されることがなくなります。ページの背景やページ上に配置する画像などに用いる色は、できるだけWebセーフカラーの中から選ぶようにしましょう。
HTMLや CSS (カスケーディング・スタイルシート) の属性では、色の指定に「#000000」とか「#FFFFFF」といった 16進表記によるカラー指定を行います。これは RGBカラーのR、G、Bのそれぞれに 00(0)〜FF（255)までの 256段階で数値を指定して「#」のあとに RRGGBB の順に２桁づつ、あるいは１桁表示の「#FFF」とか「#000」というように表記し、色を指定する方法です。詳しくは「Webセーフカラー一覧表」をご覧下さい。- その他の色を指定する方法として、
HTML 4.0で定義されている「Color Name」があります。例えば赤の「#FF0000」を「red」、白の「#FFFFFF」を「white」とするように全部で 16色あります。
- Webセーフカラー 216色のルールと違い、
00、33、66、99、CC、FF以外の組み合わせも含まれますが、それらの色は Windowsの８ビット・システムカラーの 256色のうち、Webセーフカラー以外の残りの40色の中から選ばれていますので、Windows環境であれば８ビットカラーの 256色表示の場合でも正確に色を表示することができます。
-
Color Names and RGB Code
|
Black = #000000 |
|
Green = #008000 |
|
Silver = #C0C0C0 |
|
Lime = #00FF00 |
|
Gray = #808080 |
|
Olive = #808000 |
|
White = #FFFFFF |
|
Yellow = #FFFF00 |
|
Maroon = #800000 |
|
Navy = #000080 |
|
Red = #FF0000 |
|
Blue = #0000FF |
|
Purple = #800080 |
|
Teal = #008080 |
|
Fuchsia = #FF00FF |
|
Aqua = #00FFFF |
Internet Explorer と Netscapeなどの Webブラウザでは、それぞれが独自にサポートしている「Color Name」(色名) がありますが、アクセシビリティを考えるとあまりお勧めいたしません。環境によっては正しい色が表示されないなどの弊害があります。
初版公開日 2002年5月1日 最新更新日 2003年9月9日
Copyright(C) 2002-2008 banban
